Svelte 5: SSR breaks rendering of Select component when HMR is enabled

[pheuter]

Describe the bug

---

See the minimal repro I created.

Reproduction

https://github.com/pheuter/hmr-repro

Logs

No response

System Info

System:
    OS: macOS 15.0
    CPU: (16) arm64 Apple M3 Max
    Memory: 2.91 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    bun: 1.1.20 - ~/.bun/bin/bun
  Browsers:
    Chrome: 127.0.6533.73
    Safari: 18.0
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.198

Severity

blocking an upgrade

[trueadm]

I'm not sure if it's directly related (still digging into this) but I encounter an exception SUPERFORMS_LEGACY is not defined when refreshing the page.

Also this seems unrelated to HMR, but rather seems like a hydration only issue.

[pheuter]

Hm, I'm not seeing any exceptions or errors in my browser or node console when refreshing.

Also this seems unrelated to HMR, but rather seems like a hydration only issue.

If I go into svelte.config.js and set hmr: false, the refresh issue goes away, which is why I thought it's related to HMR.

[trueadm]

Ah you're right, it is related to hmr being enabled, but not during the client – more from the server or vps it seems?

It seems related to the generation of the svelte class. From the server the class is called s-413vZPMk7oiT yet when rendered on the client, it is svelte-82qwg8. The first class doesn't actually reference any CSS selector, so it's missing the styles entirely for the global styles.

[dominikg]

vite-plugin-svelte uses a custom cssHash function during dev to ensure that dom nodes don't get different style hashes every time you edit css in your .svelte file.

This is what you see as s-413vZPMk7oiT ( its a hash of the file path)

[dominikg]

https://github.com/sveltejs/vite-plugin-svelte/blob/bd915c1317127a716a22cdd8c44d66d766e0f513/packages/vite-plugin-svelte/src/utils/compile.js#L66

is options.emitCss not stable?

[trueadm]

https://github.com/sveltejs/vite-plugin-svelte/blob/bd915c1317127a716a22cdd8c44d66d766e0f513/packages/vite-plugin-svelte/src/utils/compile.js#L66

is options.emitCss not stable?

It seems stable and i can confirm commenting that code out doesn't fix the issue. What's strange is that the class names don't match any selectors in the injected CSS string.

Update: it was this after all, I was seeing a cached svelte-select doh

[trueadm]

@dominikg Is this line meant to be used here?

https://github.com/sveltejs/vite-plugin-svelte/blob/bd915c1317127a716a22cdd8c44d66d766e0f513/packages/vite-plugin-svelte/src/utils/compile.js#L169

It never reaches it with hmr enabled.

[trueadm]

I also get a console error in the terminal when refreshing on the Select page:

SvelteKitError: Not found: /workspaces/1/Select.svelte

Not sure if it's connected to this issue though.

[dominikg]

@dominikg Is this line meant to be used here?

https://github.com/sveltejs/vite-plugin-svelte/blob/bd915c1317127a716a22cdd8c44d66d766e0f513/packages/vite-plugin-svelte/src/utils/compile.js#L169

It never reaches it with hmr enabled.

the only reason that line isn't reached would be emitCss false (which we ruled out above) or hasCss false, which would mean ssr compile did not produce css.

[trueadm]

So the problem is this it seems: https://github.com/sveltejs/vite-plugin-svelte/blob/bd915c1317127a716a22cdd8c44d66d766e0f513/packages/vite-plugin-svelte/src/utils/compile.js#L66

[dominikg]

please try again with [email protected]

https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md#400-next5

[pheuter]

@dominikg Upgrading @sveltejs/vite-plugin-svelte to 4.0.0-next.5 appears to break SSR with two different error messages now, and on more pages too (even those without the Select component):

Unhandled Promise Rejection: HierarchyRequestError: The operation would yield an incorrect node tree.
	in PageWithSidePanel.svelte
	in Page.svelte
	in +page.svelte
	in +layout.svelte
	in pane.svelte
	in pane-group.svelte
	in res...

and

Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'node.nodeType')
	in InfoPanel.svelte
	in PageColumns.svelte
	in Page.svelte
	in +page.svelte
	in pane.svelte
	in pane-group.svelte
	in resizable-pane-gro...

[trueadm]

@pheuter Are you using the latest Svelte too?

[pheuter]

I tried with both 199 and 200, no difference in terms of the errors above. Think I'm able to repro the new null is not an object (evaluating 'node.nodeType') issue, will update the repo shortly, it's a weird one...

[pheuter]

I've updated the repro here to showcase the new Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'node.nodeType') issue.

This is a weird one and I'm not sure how to best explain it other than to note that it happens when you SSR on the page and the {:else if} branch happens to be the active one:

<div class="flex items-center gap-2">
	<LucideMapPin class="h-4 w-4" />
	{#if $formData.role === 'editor'}
		{$formData.name} (Editor)
	{:else if $formData.role === 'admin'}
		{$formData.name} (Admin)
	{:else}
		{$formData.name}
	{/if}
</div>

Note that this only starts to happen after the upgrade to vite-plugin-svelte 4.0.0-next.5.

/cc @dominikg @trueadm

[trueadm]

@pheuter I assume this is with HMR enabled too? What happens when you disable HMR?

[pheuter]

@trueadm Correct, the SSR rendering works just fine with hmr: false.

[dominikg]

the error comes from

svelte/packages/svelte/src/internal/client/dom/hydration.js

Line 65 in 7af0e60

if (node.nodeType === 8) {

and it looks like the loop ran out of siblings before encountering an end marker.

If it was while(node) instead of while(true) that would not happen, however i assume something else borked the end marker before and that loop rightfully expected it to exist?

removing this line https://github.com/sveltejs/vite-plugin-svelte/blob/2670424fc7f66cef6797286bee4e0be1aa03b4a8/packages/vite-plugin-svelte/src/utils/esbuild.js#L78 in vite-plugin-svelte fixes it, so it seems like hmr code in prebundled dependencies is somehow required for their hydration?

[trueadm]

@dominikg This seems like an esbuild bug then?

[trueadm]

@pheuter Can you please try with the latest version of vite-plugin-svelte?

[vyconm]

@trueadm the issue persists for me with vite-plugin-svelte 4.0.0-next.6, if that's the newest

[dominikg]

just to be sure can you try again with pnpm dev --force ? i'm at a loss here what might cause it

[vyconm]

hm, after forcing re-op with --force I cannot seem to recreate it in the reproduction repo linked from the author anymore, having ssr and hmr enabled.

The same error persists when using a third party library though, and the author referenced it as a svelte issue:
huntabyte/bits-ui#620

That is recreatable even with vite-plugin-svelte-next6, but it might be a library issue, not related to svelte anymore: https://stackblitz.com/edit/github-lahshv?file=src%2Froutes%2F%2Bpage.svelte

[pheuter]

@trueadm The issues I was encountering appear to be resolved with 4.0.0-next.6 👍

[vyconm]

the issue is now also fixed on the libraries side :

huntabyte/shadcn-svelte@3497b07

I think the issue can be closed! :)

[dominikg]

looks like everything works, thanks for confirming