Svelte integration with Svelte 5 is unusable since [email protected]

[xiBread]

Astro Info

Astro                    v4.5.12
Node                     v21.7.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/svelte

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Svelte 5 has removed the ability to directly import from the internal module, which the svelte integration relies on, and now throws:

On next.88 (sveltejs/svelte#10968)

On next.90 (sveltejs/svelte#10987)

The exports have moved to internal/client and internal/server in v5.

What's the expected result?

No error

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal?file=README.md

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

Should be fixed upstream: sveltejs/svelte#10979

[xiBread]

That was fixed but next.90 introduced a new error because the specifier was only added to avoid Vite throwing on startup. The actual module does not export anything anymore. Please see the second screenshot.

[bluwy]

Seems like we need to use the new entrypoints now:

astro/packages/integrations/svelte/server-v5.js

Line 1 in 260f4fa

import { add_snippet_symbol } from 'svelte/internal';

astro/packages/integrations/svelte/client-v5.js

Line 2 in 260f4fa

import { add_snippet_symbol } from 'svelte/internal';

(/internal/server and /internal/client respectively)

and bump the peer dep to next.90

[mingjunlu]

UPDATE:

I did a bit of searching and found #9098 mentioning that @astrojs/svelte's devDependency svelte needs to be bumped as well when testing locally. After doing so, the error message went away 🥳

---

I changed those imports and bumped the peer dependency. When testing locally, although the original error message went away, another error message showed up:

src/components/Counter.svelte (2:9): Error when using sourcemap for reporting an error: Can't resolve original location of error.
20:14:36 [ERROR] [vite] x Build failed in 251ms
src/components/Counter.svelte (2:9): "create_ssr_component" is not exported by "node_modules/svelte/src/internal/index.js", imported by "src/components/Counter.svelte".
file: /Downloads/jvminvvrg.github/src/components/Counter.svelte:2:9
1: /* src/components/Counter.svelte generated by Svelte v4.2.12 */
2: import { create_ssr_component, escape } from "svelte/internal";
            ^
3: 
4: const css = {
  Stack trace:
    at getRollupError (file:///Developer/astro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:376:41)
    at Module.error (file:///Developer/astro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13654:16)
    at ModuleScope.findVariable (file:///Developer/astro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:11805:39)
    at CallExpression.bind (file:///Developer/astro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4735:23)
    at VariableDeclarator.bind (file:///Developer/astro/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4735:23)

Is there anything I need to pay attention to when testing locally?