Updating to [email protected] throws errors

[amit13k]

Astro Info

Astro                    v4.9.1
Node                     v18.20.3
System                   Linux (x64)
Package Manager          unknown
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

Updating to [email protected] throws the following error,

✘ [ERROR] No matching export in "node_modules/svelte/src/internal/client/index.js" for import "add_snippet_symbol"

    node_modules/@astrojs/svelte/client-v5.js:2:9:
      2 │ import { add_snippet_symbol } from 'svelte/internal/client';

What's the expected result?

No errors

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-w4fbdg?file=package.json

Participation

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

[und3fined]

From next.134 can't access to svelte/internal/client (https://github.com/sveltejs/svelte/releases/tag/svelte%405.0.0-next.134)

Currently, i downgrade to next.133 and wait Astro fix it

[mwc]

Svelte checks whether the import path starts with 'svelte/internal', so it is possible to import from the file path to bypass error checking; or directly 'fake' the 'add_snippet_symbol' function, which merely adds a 'snippet' identifier to the function, but neither approach seems to be a long-term solution.

[mateothegreat]

Downgrading @astrojs/svelte to 4.0.4 and changing to static for output: "static" will get you up and running for now.

package.json:

{
  "name": "blog",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro check --watch & astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/check": "^0.7.0",
    "@astrojs/mdx": "^3.0.1",
    "@astrojs/rss": "^4.0.6",
    "@astrojs/sitemap": "^3.1.5",
    "@astrojs/svelte": "^4.0.4",
    "@astrojs/tailwind": "^5.1.0",
    "@astrojs/vercel": "^7.6.0",
    "astro": "^4.9.2",
    "prettier-plugin-astro": "^0.14.0",
    "prettier-plugin-svelte": "^3.2.3",
    "prettier-plugin-tailwindcss": "^0.6.1",
    "svelte": "^5.0.0-next.148",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.4.5"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^3.1.1",
    "prettier": "^3.2.5"
  }
}

astro.config.mjs:

import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import svelte from "@astrojs/svelte";
import tailwind from "@astrojs/tailwind";
import { defineConfig } from 'astro/config';

import vercel from '@astrojs/vercel/static';

export default defineConfig({
  site: 'https://matthewdavis.io',
  integrations: [mdx(), sitemap(), svelte(), tailwind()],
  output: "static",
  adapter: vercel()
});

[azat-io]

I created PR to fix this issue:
sveltejs/svelte#12008

[ShaitanLyss]

This workaround doesn't work btw, it totally breaks the page.

[nzoschke]

As a temporary workaround an older version works with Astro... npm install --save-dev [email protected]

[kj-9]

for my hobby projects, I wrote a post install script to add one line to installed a svelte file. (which is content of sveltejs/svelte#12008)

it's bit a silly and temporal fix, but I'll share code if anyone is interested.

[ShaitanLyss]

Yes that'd be great, I'm doing it manually atm

[kj-9]

1. Save the following code as scripts/patchSvelte5Export.js:

import fs from 'fs/promises';
import path from 'path';

const getSvelteVersion = async () => {
  try {
    const packageJsonPath = path.join(process.cwd(), 'package.json');
    const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
    return packageJson.dependencies?.svelte || packageJson.devDependencies?.svelte;
  } catch (error) {
    console.error('Error reading package.json:', error);
    throw error;
  }
};

const addNewlineToSvelteFile = async () => {
  try {
    const svelteVersion = await getSvelteVersion();

    const filePath = path.join(
      process.cwd(),
      // this may change if you use a different package manager like npm or yarn
      `node_modules/.pnpm/svelte@${svelteVersion}/node_modules/svelte/src/internal/client/index.js`
    );

    console.log('Adding a line to file path:', filePath);

    let content = await fs.readFile(filePath, 'utf8');
    const lineToAdd = 'export {\n\tadd_snippet_symbol\n} from \'../shared/validate.js\';\n';

    if (!content.includes(lineToAdd)) {
      // append lineToAdd at the end of the content
      content += `\n${lineToAdd}`;
      await fs.writeFile(filePath, content, 'utf8');
      console.log('Newline added successfully.');
    } else {
      console.log('a line already added.');
    }
  } catch (error) {
    console.error('Error in addNewlineToSvelteFile:', error);
  }
};

addNewlineToSvelteFile();

NOTE: I am using pnpm as my package manager. If you are using a different package manager like npm or yarn, please change the path to the file.

2. add scripts key in package.json to following line:

"postinstall": "node ./scripts/patchSvelte5Export.js"

then run rm -rf node_modules && pnpm i

[rhymbit]

Idk if it'll help anybody or not, but it doesn't work if you use pnpm, but works perfectly if you use npm.
I installed "svelte": "^5.0.0-next.1", (latest at the time) in my astro project with pnpm, and it doesn't work.
Then I came across this stackblitz example.
Inside README, they're using npm, so I just tried it on a whim, and it works without any errors whatsoever.
This is what I've got in my package.json :-

"@astrojs/svelte": "^5.7.0",
"svelte": "^5.0.0-next.1",

So, try using npm

[danawoodman]

Using a brand new Astro project and installing svelte@next causes :

16:24:37 [ERROR] Your application, or one of its dependencies, imported from 'svelte/internal', which was a private module used by Svelte 4 components that no longer exists in Svelte 5. It is not intended to be public API. If you're a library author and you used 'svelte/internal' deliberately, please raise an issue on https://github.com/sveltejs/svelte/issues detailing your use case.

[rhymbit]

TLDR
Here's the working code - github repo

I'm currently using node v20.12.2, but I've tested it with the newer v22 as well and it works fine.

Steps to reproduce :-

1. Start by creating a new Astro project using svelte template with the following command :-
   npm create astro@latest -- --template framework-svelte
   In the options, I chose not to install dependencies yet because the template project uses Svelte v4
2. After the template has been generated, this is the dependencies section inside the package.json for me:-

  "dependencies": {
    "@astrojs/svelte": "^5.7.0",
    "astro": "^4.14.2",
    "svelte": "^4.2.18",
    "@astrojs/check": "^0.9.2",
    "typescript": "^5.5.4"
  }

3. Now, all I did was replace the "svelte": "^4.2.18" with the latest "svelte": "^5.0.0-next.1"
4. Install the dependencies and Svelte 5 code should work fine 🎉

[danawoodman]

I used astro add to add svelte and upgraded next with svelte@next and got the above, so there must be more to it than just changing the version number

[ryoppippi]

Me too

[ryoppippi]

I found that some component using svelte4 causes that error