Namespace imports break hydration, requiring investigation into Svelte's component handling.
The issue involves namespace imports (`import * as X`) causing hydration failures in SvelteKit, treating components as `null`. The problem is reproducible and blocks upgrades, but the root cause likely involves Svelte's internal handling of namespace imports. Fixing this requires understanding Svelte's hydration and component resolution logic.
When importing for example Bits-UI components via a namespace import like:
import * as Sheet from '$lib/components/ui/sheet';
any attempt to render a component (for example Sheet.Root) causes SvelteKit to fail hydration. The component is treated as null, which leads to a hydration mismatch.
Using named imports fixes the issue:
import {
Root as SheetRoot,
Trigger as SheetTrigger,
Content as SheetContent
} from '$lib/components/ui/sheet';
Expected behavior Namespace imports should be fully supported and should not result in invalid component references.
Actual behavior
Components imported via import * as X are not recognized as valid Svelte components, causing hydration to break.
https://github.com/timootten/SvelteKit-Remotefunctions-BitsUI-Problem
(index):810
Failed to hydrate: TypeError: Cannot read properties of null (reading 'nodeType')
in <unknown>
in +layout.svelte
in root.svelte
at _page (+page.svelte:7:25)
System:
OS: Windows 11 10.0.26100
CPU: (16) x64 AMD Ryzen 7 5700X 8-Core Processor
Memory: 16.89 GB / 31.91 GB
Binaries:
Node: 22.20.0 - C:\Program Files\nodejs\node.EXE
npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 10.18.1 - C:\Users\timoo\AppData\Local\pnpm\pnpm.CMD
bun: 1.3.1 - C:\Users\timoo\AppData\Local\pnpm\bun.CMD
Deno: 2.3.3 - C:\Users\timoo\.deno\bin\deno.EXE
Browsers:
Chrome: 142.0.7444.136
Edge: Chromium (140.0.3485.54)
Firefox: 144.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
Internet Explorer: 11.0.26100.1882
npmPackages:
svelte: 5.43.6 => 5.43.6
blocking an upgrade
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!