Open
Description
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.7
Severity
blocking an upgrade