Svelte 5: Hydration fails when SvelteKit app is run as a dependency

[samlfair]

Describe the bug

I have a SvelteKit application with Svelte 5, which runs as an npm dependency. The project runs fine on its own:

https://stackblitz.com/~/github.com/samlfair/svelte-dependency

It also runs fine with csr disabled. However, if I try to run it as an npm dependency with csr enabled, hydration fails and the page breaks:

https://stackblitz.com/edit/node-kortck?file=package.json

I see this error:

chunk-JTKFLJAK.js?v=ce2151a9:1507 ERR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. Error: onMount can only be used during component initialisation.
    at onMount (svelte.js?v=2ff9db38:405:11)
    at Root (root.svelte:28:2)
    at Object.fn (hmr.js?v=ce2151a9:31:29)
    at execute_reaction_fn (runtime.js?v=ce2151a9:257:20)
    at execute_effect (runtime.js?v=ce2151a9:421:18)
    at create_effect (effects.js?v=ce2151a9:83:4)
    at branch (effects.js?v=ce2151a9:244:9)
    at Object.fn (hmr.js?v=ce2151a9:29:13)
    at execute_reaction_fn (runtime.js?v=ce2151a9:257:20)
    at execute_effect (runtime.js?v=ce2151a9:421:18)
hydrate @ chunk-JTKFLJAK.js?v=ce2151a9:1507
Show 1 more frame
Show less
svelte.js?v=2ff9db38:405 Uncaught (in promise) Error: onMount can only be used during component initialisation.
    at onMount (svelte.js?v=2ff9db38:405:11)
    at Root (root.svelte:28:2)
    at Object.fn (hmr.js?v=ce2151a9:31:29)
    at execute_reaction_fn (runtime.js?v=ce2151a9:257:20)
    at execute_effect (runtime.js?v=ce2151a9:421:18)
    at create_effect (effects.js?v=ce2151a9:83:4)
    at branch (effects.js?v=ce2151a9:244:9)
    at Object.fn (hmr.js?v=ce2151a9:29:13)
    at execute_reaction_fn (runtime.js?v=ce2151a9:257:20)
    at execute_effect (runtime.js?v=ce2151a9:421:18)

In one case, it also shows this error:

SyntaxError: The requested module '/@fs/Users/samlittlefair/Documents/asides/svelte-test-consumer/node_modules/debug/src/browser.js?v=ce2151a9' does not provide an export named 'default' (at create-tokenizer.js?v=ce2151a9:31:8)

But, as far as I can tell, the export should work fine.

Reproduction

Dependency:

https://stackblitz.com/~/github.com/samlfair/svelte-dependency

Consumer:

https://stackblitz.com/edit/node-kortck?file=package.json

Logs

chunk-JTKFLJAK.js?v=ce2151a9:1507 ERR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. Error: onMount can only be used during component initialisation.
    at onMount (svelte.js?v=2ff9db38:405:11)
    at Root (root.svelte:28:2)
    at Object.fn (hmr.js?v=ce2151a9:31:29)
    at execute_reaction_fn (runtime.js?v=ce2151a9:257:20)
    at execute_effect (runtime.js?v=ce2151a9:421:18)
    at create_effect (effects.js?v=ce2151a9:83:4)
    at branch (effects.js?v=ce2151a9:244:9)
    at Object.fn (hmr.js?v=ce2151a9:29:13)
    at execute_reaction_fn (runtime.js?v=ce2151a9:257:20)
    at execute_effect (runtime.js?v=ce2151a9:421:18)
hydrate @ chunk-JTKFLJAK.js?v=ce2151a9:1507
Show 1 more frame
Show less
svelte.js?v=2ff9db38:405 Uncaught (in promise) Error: onMount can only be used during component initialisation.
    at onMount (svelte.js?v=2ff9db38:405:11)
    at Root (root.svelte:28:2)
    at Object.fn (hmr.js?v=ce2151a9:31:29)
    at execute_reaction_fn (runtime.js?v=ce2151a9:257:20)
    at execute_effect (runtime.js?v=ce2151a9:421:18)
    at create_effect (effects.js?v=ce2151a9:83:4)
    at branch (effects.js?v=ce2151a9:244:9)
    at Object.fn (hmr.js?v=ce2151a9:29:13)
    at execute_reaction_fn (runtime.js?v=ce2151a9:257:20)
    at execute_effect (runtime.js?v=ce2151a9:421:18)

System Info

Operating system: OS X 10.15.7
Browser: Chrome 123

Problem also occurs in Safari

Severity

blocking all usage of svelte