Cannot read properties of undefined (reading 'call')

[ambrt]

Describe the bug

It works in browser and Astro's npm run dev .
I'm getting this error when trying to test with Vitest of Astro page with svelte file.

TypeError: Cannot read properties of undefined (reading 'call')
 
// edited - moved to Logs section

Reproduction

If required then later might try to repro. Its big page with runes, functions passed as props and template.
EDIT:
https://stackblitz.com/edit/-ch9tapzs?file=test%2Fhappy-dom-env.test.ts&on=stackblitz
After dependencies install, stop npm in terminal and run npm run test

Logs

TypeError: Cannot read properties of undefined (reading 'call')
 ❯ get_first_child node_modules/svelte/src/internal/client/dom/operations.js:81:28
     80| /**
     81|  * @template {Node} N
     82|  * @param {N} node
       |      ^
     83|  * @returns {Node | null}
     84|  */
 ❯ eval node_modules/svelte/src/internal/client/dom/template.js:48:91
 ❯ eval node_modules/svelte/src/internal/client/dev/elements.js:13:15
 ❯ Test src/components/test.svelte:15:12
 ❯ render node_modules/svelte/src/internal/server/index.js:121:2
 ❯ Object.renderToStaticMarkup node_modules/@astrojs/svelte/server.js:45:49
 ❯ renderFrameworkComponent node_modules/astro/dist/runtime/server/render/component.js:189:68
 ❯ renderComponent node_modules/astro/dist/runtime/server/render/component.js:368:10

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (2) x64 Intel(R) Core(TM)2 Duo CPU     E4500  @ 2.20GHz
    Memory: 464.32 MB / 3.82 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.15.2 - ~/.local/share/pnpm/pnpm
    bun: 1.1.6 - ~/.bun/bin/bun
    Watchman: 20201115.021953.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 132.0.6834.83
  npmPackages:
    svelte: ^5.1.3 => 5.16.2

Severity

blocking all usage of svelte

[Conduitry]

A reproduction is required, yes.

[ambrt]

@Conduitry

Repro:
https://stackblitz.com/edit/-ch9tapzs?file=test%2Fhappy-dom-env.test.ts&on=stackblitz
(After dependencies install, stop npm in terminal and run npm run test)

Error happens in happy-dom and jsdom environments.

JSDom, throws same error as happy-dom , but since stackblitz has node v18, JSDom would fail with non svelte related issue.
So only happy-dom test is in the repro.

Test passes in plain node environment.

[Gbps]

I was getting this problem when I installed axios-retry. It seems to interact poorly with Sveltekit because it modifies the functions in the dependency of axios directly. Removing the package fixed the issue.

[ambrt]

@Gbps Thanks for writing. Astro doesn't use SvelteKit, just Svelte alone but maybe there's culprit in axios-retry

[ambrt]

@Conduitry pinging since repro is provided.

[davyzhang]

read properties of undefined (reading 'call')
    at get_first_child (chunk-CWO6IWAX.js?v=9ddc4299:1283:29)
    at chunk-YCK63UA3.js?v=9ddc4299:146:9
    at chunk-ZQUM5PSP.js?v=9ddc4299:230:17
    at Root (root.svelte:42:41)

reproduce step:

1. create a new sveltekit project
2. npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest

it's worked fine before, I guess something happens with the latest daisyui or vite

[akkie]

I also have this problem from time to time. For me it helps to delete my node_modules and .svelte-kit folder and reinstall all dependencies. It happens sporadically during development. I also use tailwind and daisyui. But I'm sure it happened with the old versions too.

[davyzhang]

I find my problem is something cache related because I can access the localhost:5173 without this error. This reminded me that I used cloudflare tunnels to host a local dev server on a domain. I guess that's the reason why not so many people ran into this problem.

Some steps to solve this:

1. follow this issue to disable cache for tunnels:
   Documentation for tunnel caching cloudflare/cloudflared#186

2. restart tunnel service
   sudo systemctl restart cloudflared

3. change something & build the project, clean the browser cache to reload the page

hopefully the error will be gone.

[ambrt]

Just to let you know, Astro maintainers said that bug is not Astro's fault.

[raythurnvoid]

@ambrt Are you supposed to use jsdom/happy-dom environment when testing astro components?

I never used astro but i would assume that if you call renderToString you are testing the SSR but running vitest jsdom makes the astro vite plugin think you are running in browser environment where renderToString is not granted to work.

You can check that import.meta.env.SSR is false when running in jsdom/happy-dom both in the test, astro and svelte sources but is true when running in node env.

I also noticed that the source generated by the svelte compiler is different in the 2 environments, in the node environment the SSR code is produced while in jsdom/happy-dom the client side code is produced.

In astro docs I did not find any reference to jsdom/happy-dom, perhaps you should just run your astro components test in the node env only

[ambrt]

@raythurnvoid Thank you for indepth explanation.

It's true that Astro isn't mentioning those environments.

One thing that is possible to check is "manual" installation.
https://docs.astro.build/en/reference/container-reference/#adding-a-renderer-manually

It supposed to be for runtime execution instead of build time.

There is also recently added option of executing vitest in native browser (reusing already running one) which is a hybrid between doing node env and running Cypress or Nightwatch.

It would suffice as a temporary solution.