Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Bug Report: Namespace import (`import * as X`) breaks hydration | GoodFirstPicks

Bug Report: Namespace import (`import * as X`) breaks hydration

sveltejs/svelte 1 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeSvelteTypeScript

Why this is a good first issue

Namespace imports break hydration, requiring investigation into Svelte's component handling.

AI Summary

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.

Issue Description

Describe the bug

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.

Reproduction

https://github.com/timootten/SvelteKit-Remotefunctions-BitsUI-Problem

Logs

(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 Info

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

Severity

blocking an upgrade

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • hydration logic
  • namespace import handling
Loading labels...

Details

Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno