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

itaak commented 7 months ago

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.

florian-lefebvre commented 7 months ago

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

itaak commented 7 months ago

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

Thanks ! Do you need help ? : )

florian-lefebvre commented 7 months ago

Nothing you can do about but thanks! I'll do it when I can

Princesseuh commented 7 months ago

Everything works for me when following the steps outlined in the post. I wonder if it could be a Windows issue, perhaps.

JulioGrajales commented 7 months ago

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.

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.

itaak commented 7 months ago

I migrated to WSL, and it works !

Astro v4.3.5 Node v20.11.0 System Linux (x64) Package Manager npm Output static Adapter none Integrations @astrojs/svelte

ticua07 commented 7 months ago

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

Princesseuh commented 7 months ago

Added test to our codebase for this and they run just fine on Windows, so not sure what the issue is

Could anyone report if there's any info inside the Output panel for the Astro extension when this happens?

ticua07 commented 7 months ago

Downgrading to version 2.6.3 solves the issue, Here's my output in latest version: https://pastebin.com/AfidZq8H

Princesseuh commented 7 months ago

Is there no output when you're not running in verbose mode? I feel like this is missing the beginning of the output, and the verbose info isn't super helpful.

KyTiXo commented 7 months ago

@Princesseuh Same issue VSCode on Win 10. Can confirm it works fine on my Macbook.

Astro Language Server has no mention of it in the output panel by default. However I enabled verbose logging for the extension and got this.

[Trace - 11:01:42 AM] Sending request 'textDocument/codeAction - (95)'.
Params: {
    "textDocument": {
        "uri": "file:///c%3A/Users/Kyle/Desktop/Personal/javascript/my-project/src/pages/login.astro"
    },
    "range": {
        "start": {
            "line": 2,
            "character": 22
        },
        "end": {
            "line": 2,
            "character": 58
        }
    },
    "context": {
        "diagnostics": [
            {
                "range": {
                    "start": {
                        "line": 2,
                        "character": 22
                    },
                    "end": {
                        "line": 2,
                        "character": 58
                    }
                },
                "message": "File 'c:/Users/Kyle/Desktop/Personal/javascript/my-project/src/components/forms/FormLogin.svelte' is not a module.\n\nIs 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.",
                "data": {
                    "uri": "file:///c%3A/Users/Kyle/Desktop/Personal/javascript/my-project/src/pages/login.astro",
                    "version": 3,
                    "serviceIndex": 3,
                    "isFormat": false,
                    "original": {},
                    "documentUri": "file:///c%3A/Users/Kyle/Desktop/Personal/javascript/my-project/src/pages/login.astro?virtualCodeId=tsx"
                },
                "code": 2306,
                "severity": 1,
                "source": "ts"
            }
        ],
        "only": [
            "quickfix"
        ],
        "triggerKind": 1
    }
}

Princesseuh commented 7 months ago

Yeah, unfortunately the verbose output isn't really useful in this context. I'll have to get a Windows computer or something since I cannot reproduce in CI.

KyTiXo commented 7 months ago

Edit: Removed... Workaround didn't resolve

Princesseuh commented 7 months ago

You might be encountering another different issue if it works with a relative path.

KyTiXo commented 7 months ago

You might be encountering another different issue if it works with a relative path.

Plz ignore previous comment. Was bad path, once I set proper relative path issue came back.

ticua07 commented 7 months ago

Maybe it's related to issue #782? I don't think either vue or svelte export modules,(unline React for example which exports a function)

Princesseuh commented 7 months ago

Yeah, it's the same issue affecting both frameworks.

Princesseuh commented 7 months ago

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

withastro / language-tools