#v2 Maximum call stack size exceeded

69 messages · Page 1 of 1 (latest)

unborn pendant
#

I'm currently migrating our project (around 440k lines of code) which uses nx and all components are in libraries. I managed to fix all phrasing context and useComputer breaking changes and everything is working fine except interactions (like some button onClick and opening dropdowns). In the server console, no matter the page I go to (even when I navigate on client), I get the following error:

QWIK ERROR Maximum call stack size exceeded RangeError: Maximum call stack size exceeded
...list of files from @qwik.dev/core/dist/core.mjs
[vite] Internal server error: Maximum call stack size exceeded
...list of files from @qwik.dev/core/dist/core.mjs

Currently installed package version for core and router is PR@6903, which should be latest I think.
Do you have any suggestions how to debug this error or reproduce it?
Thank you!

late elk
#

hey, is there any error line from core.mjs?

unborn pendant
#

Hey @late elk sorry for the late reply. Yes, when refreshing the page more than 20 times, these same 4 lines circle around in no particular order.

Screenshot_2025-02-24_at_02.22.51.png Screenshot_2025-02-24_at_02.21.12.png Screenshot_2025-02-24_at_02.20.06.png Screenshot_2025-02-24_at_02.18.48.png
late elk
#

Hey, good news. This should be already solved on the v2 branch. I hope we will release the next alpha version soon

unborn pendant
#

@late elk I'm on branch PR@6903 and I ran npm i now and I still get these errors plus 2 new ones (maybe I didn't catch them earlier)... Should I switch to a different PR?

Screenshot_2025-02-24_at_13.43.44.png Screenshot_2025-02-24_at_13.42.49.png
late elk
#

can you check if alpha.6 has the same problem?

unborn pendant
#

@late elk alpha.6 doesn't have that problem and alpha.7 does

late elk
#

can you paste code of page that returns that error?

#

I mean the component

unborn pendant
#

I would need some time, because I think that every page returns that error

unborn pendant
#

I noticed that two places in our header component cause this error:

<Resource
    value={breadcrumbs}
    onResolved={(breadcrumbLinks) => (
        <div
        class={[
            'border-t border-gray-200 h-14 bg-slate-50 relative before:absolute before:bottom-0 before:left-0 before:right-0 before:h-px before:bg-slate-200 justify-center flex-col',
            breadcrumbLinks.length === 0 ? 'hidden lg:flex' : 'flex',
        ]}
        >
        <PageContentWrapper noMargin>
            <div class="lg:flex justify-between w-full">
            <div class="hidden lg:block">
                <DesktopNavigation
                navigation={props.headerLayoutProps.navigation}
                openedNavigationIndex={openedNavigationIndex}
                />
            </div>
            <Breadcrumbs breadcrumbLinks={breadcrumbLinks} />
            </div>
        </PageContentWrapper>
        </div>
    )}
/>
#

and in global search component:

useTask$(({ track, cleanup }) => {
      track(() => windowBlur);

      if (isServer) return;
      if (
        windowBlur.value.setupListeners === null ||
        windowBlur.value.setupListeners === false
      )
        return;

      windowBlur.value.setupListeners = false;

      const blurWindowListener = () => {
        windowBlur.value.didHappen = true;
      };
      const focusOutDocumentListener = (event: FocusEvent) => {
        windowBlur.value.didHappen = false;
        setTimeout(() => {
          if (windowBlur.value.didHappen) {
            return;
          }
          if (props.isActive.value) {
            const globalSearchGroup = document.getElementById(id);
            if (!globalSearchGroup?.contains(event.relatedTarget as any)) {
              props.isActive.value = false;
            }
          }
        }, 0);
      };

      window.addEventListener('blur', blurWindowListener);
      document.addEventListener('focusout', focusOutDocumentListener);

      cleanup(() => {
        window.removeEventListener('blur', blurWindowListener);
        document.removeEventListener('focusout', focusOutDocumentListener);
      });
    });
unborn pendant
#

I would say alpha6 is pretty stable, but sometimes on client navigation I get
QWIK ERROR Internal assert, this is likely caused by a bug in Qwik: Missing child.

late elk
#

alpha.7 has a lot of changes, probably something is missing

unborn pendant
#

Just try to find what broke in alpha.7 😅

late elk
#

probably I know what is causing the Maximum call stack size exceeded, but I need reproduction anyway :/

unborn pendant
#

okay I will give my best to find a way to reproduce it in a clean project

unborn pendant
#

Also in alpha.6 when using PropsOf<'button'> (for example) and trying to build types (tsc -b) I get error TS4023: Exported variable 'ComponentName' has or is using name 'HTMLElementAttrs' from external module ".../node_modules/@qwik.dev/core/dist/core-internal" but cannot be named.

unborn pendant
#

@late elk https://github.com/markovickosta/qwik-2-test/pull/2
I managed to reproduce it. Maybe we were using track function the way it's not supposed to.
The error happens when using track function on store without specific value or when tracking signal without .value

late elk
#

Thanks! I will check it later today or tomorrow

unborn pendant
#

Thank you for taking the time to look into it 😇

unborn pendant
#

I believe this is the reason why modular forms does not work properly in alpha.7, where in alpha.6 they are working as expected

late elk
#

@unborn pendant hmm I installed "@qwik.dev/core": "https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@6903", and everything is working

unborn pendant
#

The pr I created is on version alpha.7

#

Maybe someone fixed it?

late elk
#

I've fixed this error few days ago, but can be more edge cases

unborn pendant
#

@late elk I installed latest version (@6903) in main project and currently looks like the stablest one I have tried so far

late elk
#

If you encounter any v2 related bug, let me know 😄

unborn pendant
#

I encountered two small client errors that I have been waiting to report until these major "breaking" ones are resolved, will update you later on that. But those could probably be resolved by changing our code a little

unborn pendant
unborn pendant
late elk
#

the problem here is you do function call. Under the hood this expression is converted to wrapped signal, but fn cannot be serialized

#

as far as I remember this works the same in v1, but maybe in v1 this is not converted to signal under the hood (the only option if in v1 it works)

unborn pendant
unborn pendant
late elk
#

Ah sorry

#

I read it wrong

#

Fix should be today or tomorrow I think

unborn pendant
#

No problem, let me know when it's merged to 6903

late elk
#

I hope we will merge it soon, but until then you can test it by installing npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@7384

late elk
#

Fyi its merged to the v2 branch

unborn pendant
#

@late elk Thank you for letting me know, I tested both 7384 and 6903 in my clean project and for some reason I still get the same result... The only difference I'm noticing between your tests and mine project is that my component is in a library, is it possible that nx is causing some problems?

late elk
#

Ahh I know why, you need to install qwik router too

unborn pendant
#

@late elk That was it, thank you. There is one problem with this... now when you send unwrapped signal in outside component it get's wrapped inside. Repro:

export const useTestLoader = routeLoader$(async () => {
  return { test: "test" };
});

export default component$(() => {
  const testSignal = useTestLoader();
  // Here we send an unwrapped signal
  return <Homepage testSignalValue={testSignal.value} />;
});

export const Homepage = component$(
  (props: { testSignalValue: { test: string } }) => {
    // Here props.testSignalValue is wrapped signal and would need .value to work
    return <div id="prop">{props.testSignalValue.test}</div>;
  },
);
late elk
late elk
late elk
unborn pendant
#

@late elk Thank you

late elk
#

no problem

unborn pendant
late elk
#

but yes if it doesn't work then its bug

unborn pendant
# late elk why not just use styles scoped?

Because we use configurations to generate styles for different websites based on that configuration.
Our actual code:

<style
  dangerouslySetInnerHTML={generateProductListStyles(
    productListConfig,
    id,
  )}
/>
late elk
#

I think you can use it like that:

useStylesScoped$(generateProductListStyles(
  productListConfig,
  id,
));
unborn pendant
#

Didn't know that, I will definitely try it, thanks

unborn pendant
late elk
#

what if you first assign result to variable and use variable in useStylesScoped?

unborn pendant
unborn pendant
late elk
unborn pendant
unborn pendant
late elk
late elk
unborn pendant