language-tools: Svelte is not a module with "astro@latest -- --template framework-svelte"

Astro Info

Astro                    v4.3.5
Node                     v20.11.0
System                   Windows (x64)
Package Manager          npm
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

Hey!

I want to use “astro@latest – --template framework-svelte” but when I run “npm run build” I have an error message that explains:

src/pages/index.astro:3:21 - error ts(2306): File ‘C:/Users/Utilisateur/Desktop/astrosvelte/src/components/Counter.svelte’ is not a module.

Is the @astrojs/svelte package installed? You can add it to your project by running the following command: astro add svelte. If already installed, restarting the language server might be necessary in order for the change to take effect.

import Counter from ‘…/components/Counter.svelte’;

I have installed my dependencies correctly, and @astrojs/svelte is indeed in my node_modules, and I haven’t touched the default settings.

I have tested with other templates, and React and Vue do not pose any problems.

Setup :

IDE : VS Code + Extension Astro & Svelte Node : v20.11.0 NPM : 10.2.4

What’s the expected result?

I want to import Svelte components in .astro and build my app.

Link to Minimal Reproducible Example

https://github.com/withastro/astro/tree/main/examples/framework-svelte

Participation

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

About this issue

Original URL
State: closed
Created 5 months ago
Reactions: 2
Comments: 18 (9 by maintainers)

Most upvoted comments

Fixed by https://github.com/withastro/language-tools/pull/791

Princesseuh on Feb 13, 2024

Can reproduce on Windows, WSL and other integrations like React don’t have this error

Astro v4.3.5 Node v20.10.0 System Windows (x64) Package Manager pnpm Output static Adapter none Integrations @astrojs/svelte

ticua07 on Feb 12, 2024

There was a similar issue with Vue, I transferred it to the language-tools repo. Can’t do it rn (on phone)

florian-lefebvre on Feb 10, 2024

I have the same problem.

Astro Info:

Astro                    v4.3.5
Node                     v21.6.1
System                   Windows (x64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/tailwind
                         @astrojs/svelte

IDE: VS Code

VS Code info:

Version: 1.86.1 (user setup)
Commit: 31c37ee8f63491495ac49e43b8544550fbae4533
Date: 2024-02-07T09:08:20.941Z
Electron: 27.2.3
ElectronBuildId: 26495564
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Windows_NT x64 10.0.22621

relevant extensions installed:

https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode

package.json:

"dependencies": {
    "@astrojs/check": "^0.5.2",
    "@astrojs/node": "^8.2.0",
    "@astrojs/svelte": "^5.0.3",
    "@astrojs/tailwind": "^5.1.0",
    "@fontsource-variable/source-sans-3": "^5.0.19",
    "@zxcvbn-ts/core": "^3.0.4",
    "@zxcvbn-ts/language-common": "^3.0.4",
    "astro": "^4.3.5",
    "firebase": "^10.8.0",
    "firebase-admin": "^12.0.0",
    "pino": "^8.18.0",
    "sharp": "^0.33.2",
    "stripe": "^14.16.0",
    "svelte": "^4.2.10",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "prettier": "^3.2.5",
    "prettier-plugin-astro": "^0.13.0",
    "prettier-plugin-svelte": "^3.1.2",
    "prettier-plugin-tailwindcss": "^0.5.11"
  }

astro.config.mjs:

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import tailwind from '@astrojs/tailwind';

import svelte from '@astrojs/svelte';

// https://astro.build/config
export default defineConfig({
  integrations: [
    tailwind({
      nesting: true,
      applyBaseStyles: false,
    }),
    svelte(),
  ],
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
  image:{
    domains: ['files.stripe.com']
  },
  trailingSlash: 'always',
  redirects: {
    '/': {
      status: 302,
      destination: '/dashboard',
    },
  },
});

svelte.config.js

import { vitePreprocess } from '@astrojs/svelte';

export default {
	preprocess: vitePreprocess(),
};

Error message:

File ‘c:/Users/username/Documents/projects/my-app/src/components/authComponents/RegisterForm.svelte’ is not a module.

JulioGrajales on Feb 12, 2024