Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Svelte 5 legacy interop bug: Uncaught TypeError: Cannot read properties of undefined (reading 'before') #15423

Open
echocrow opened this issue Mar 3, 2025 · 2 comments
Open

Svelte 5 legacy interop bug: Uncaught TypeError: Cannot read properties of undefined (reading 'before') #15423

echocrow opened this issue Mar 3, 2025 · 2 comments

Comments

@echocrow
Copy link

echocrow commented Mar 3, 2025 •
edited
Loading

Describe the bug

Seems like some niche combination of stores and component updates may lead to a runtime error.

We noticed it when we upgraded our site to Svelte 5. Upon page navigation, JS error'd out (see Logs below), blocking other critical runtime code.

This error does not seem to be present in dev mode, but only occurs in build && preview or on e.g. Vercel.

The requirements for this bug seem rather niche. We eventually found a workaround in our case (migrating more components to runes, and moving off of $app/stores). Unsure if a bug fix is worth it in this case(?).

Reproduction

https://stackblitz.com/edit/svelte-5-legacy-nav-update-bug?file=md!README.md

  1. npm run build && npm run preview
    • (the bug is not present in dev!)
    • (in the repro above, this will be run automatically)
  2. open the client console
  3. nagivate to another page
    • (e.g. click any of the header links)
  4. inspect your console
    • Expected: No console errors
    • Actual: 
      Uncaught TypeError: Cannot read properties of undefined (reading 'before')
  at L (Doj7iJtn.js:1:839)
   at ks (0.Ck8LqK_p.js:2:3042)
   at 0.Ck8LqK_p.js:2:3658
   at BBycYa5G.js:1:323
   at Ut (C6bb17t1.js:1:8885)
   at ft (C6bb17t1.js:1:9715)
   at Sn (C6bb17t1.js:1:10628)
   at Ht (C6bb17t1.js:1:10041)

In some instances this may also block further page navigation (e.g. navigating to a third page).

In this repro, performing any of the following steps seems to bypass this issue:

  • migrate LdJsonScript.svelte to runes
  • migrate meta.ts to runes and relovate into +layout.svelte
  • remove <svelte:head> (i.e. render into regular <body>)

Logs

Uncaught TypeError: Cannot read properties of undefined (reading 'before')
    at L (N6OWQcpE.js:1:841)
    at Rs (0.DYl3NbUt.js:2:3042)
    at 0.DYl3NbUt.js:2:3658
    at CA0ixJbY.js:1:2699
    at Ut (CS1pTN2Y.js:1:8858)
    at ft (CS1pTN2Y.js:1:9688)
    at Rn (CS1pTN2Y.js:1:10601)
    at Ht (CS1pTN2Y.js:1:10014)

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 18.20.3 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.2.3 - /usr/local/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
  svelte: ^5.0.0 => 5.20.5

Severity

annoyance
@gwest7
Copy link

gwest7 commented Mar 11, 2025 •
edited
Loading

We have the same error consistently in when running preview (or node index.js). As soon as we goto the error occurs. The problem seems to come from my svelte:head block, specifically the canonical href assignment. Removing this line gets rid of the error.

<svelte:head>
	<Meta meta={data.meta}/>
	<link rel="canonical" href={data.canonical} /> <!-- << cause -->
</svelte:head>

before referenced in the error message comes from node_modules/svelte/src/internal/client/dom/template.js:

/**
 * Assign the created (or in hydration mode, traversed) dom elements to the current block
 * and insert the elements into the dom (in client mode).
 * @param {Text | Comment | Element} anchor
 * @param {DocumentFragment | Element} dom
 */
export function append(anchor, dom) {
	if (hydrating) {
		/** @type {Effect} */ (active_effect).nodes_end = hydrate_node;
		hydrate_next();
		return;
	}

	if (anchor === null) {
		// edge case — void `<svelte:element>` with content
		return;
	}

	anchor.before(/** @type {Node} */ (dom)); // <---- `anchor` undefined
}

@echocrow
Copy link
Author

@gwest7 this somewhat aligns with what we saw when we were debugging this.

in our case, it was a custom <script> data tag inside <svelte:head>, with content derived from $page (aka its props change on page navigation). even when we swapped that with a basic <link foo={someProp} /> (to rule out logic in our custom script code), the error still occurred.

might be some niche edge case, perhaps related to elements inside svelte:head that update during page nav(?)

oharsta added a commit to OpenConext/OpenConext-myconext that referenced this issue Mar 12, 2025
@oharsta
Downgraded Svelte after dependabot
487796c 
sveltejs/svelte#15423
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gwest7 @echocrow