Describe the bug
When using a CSS import with ?inline in the URL and including it in the page using a svelte:element tag (to force a specific CSS file to be inlined in the page), a hydration error is created in Svelte 5 that did not exist in Svelte 4. This breaks the CSS, as the page hydration stops (the MRE doesn't significantly change as it's too minimal, but in the site I'm actually building, the styles mess up entirely!).
This appears to happen because the svelte:element node has no defined previous or next siblings.
Reproduction
See MRE repo - it's essentially just this file:
https://github.com/mashedkeyboard/test-hydration-inline-import/blob/main/src/routes/%2Bpage.svelte
Logs
No notable content in server console. Browser console as below:
Navigated to http://localhost:5173/
[vite] connecting... [client:495:8](http://localhost:5173/@vite/client)
[vite] connected. [client:614:14](http://localhost:5173/@vite/client)
Source map error: No sources are declared in this source map.
Resource URL: http://localhost:5173/node_modules/.vite/deps/chunk-UGBVNEQM.js?v=f8c6c012
Source Map URL: chunk-UGBVNEQM.js.map
Source map error: No sources are declared in this source map.
Resource URL: http://localhost:5173/node_modules/.vite/deps/svelte_legacy.js?v=f8c6c012
Source Map URL: svelte_legacy.js.map
Source map error: No sources are declared in this source map.
Resource URL: http://localhost:5173/node_modules/.vite/deps/svelte_internal_client.js?v=f8c6c012
Source Map URL: svelte_internal_client.js.map
Source map error: No sources are declared in this source map.
Resource URL: http://localhost:5173/node_modules/.vite/deps/svelte.js?v=f8c6c012
Source Map URL: svelte.js.map
[svelte] hydration_mismatch
Hydration failed because the initial UI does not match what was rendered on the server [client.js:2684:15](http://localhost:5173/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=f8c6c012)
System Info
System:
OS: Linux 6.1 Manjaro Linux
CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
Memory: 6.13 GB / 31.29 GB
Container: Yes
Shell: 3.7.1 - /bin/fish
Binaries:
Node: 18.20.4 - /bin/node
Yarn: 1.22.22 - /bin/yarn
npm: 10.8.3 - /bin/npm
pnpm: 8.7.5 - ~/.local/share/nvm/v18.12.0/bin/pnpm
Browsers:
Chrome: Linux
Chromium: 131.0.6778.69
npmPackages:
svelte: ^5.0.0 => 5.2.7Severity
blocking an upgrade
Describe the bug
When using a CSS import with
?inlinein the URL and including it in the page using asvelte:elementtag (to force a specific CSS file to be inlined in the page), a hydration error is created in Svelte 5 that did not exist in Svelte 4. This breaks the CSS, as the page hydration stops (the MRE doesn't significantly change as it's too minimal, but in the site I'm actually building, the styles mess up entirely!).This appears to happen because the
svelte:elementnode has no defined previous or next siblings.Reproduction
See MRE repo - it's essentially just this file:
https://github.com/mashedkeyboard/test-hydration-inline-import/blob/main/src/routes/%2Bpage.svelte
Logs
No notable content in server console. Browser console as below:
System Info
System: OS: Linux 6.1 Manjaro Linux CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor Memory: 6.13 GB / 31.29 GB Container: Yes Shell: 3.7.1 - /bin/fish Binaries: Node: 18.20.4 - /bin/node Yarn: 1.22.22 - /bin/yarn npm: 10.8.3 - /bin/npm pnpm: 8.7.5 - ~/.local/share/nvm/v18.12.0/bin/pnpm Browsers: Chrome: Linux Chromium: 131.0.6778.69 npmPackages: svelte: ^5.0.0 => 5.2.7Severity
blocking an upgrade