Error when importing Svelte components in a .astro page (File 'Path/Component.svelte.tsx' is not a module)

[marcfilleul]

Astro Info

Astro                    v3.1.0
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          yarn
Output                   static
Adapter                  none
Integrations             @astrojs/svelte
                         @astrojs/vue
                         @astrojs/react

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

No response

Describe the Bug

Here is a public repo with a fresh Astro 3.1.0 + Svelte, Vue and React integrations:
Repo to reproduce the issue

When importing a Svelte component in a .astro page, I have an error saying: File 'Path/Component.svelte.tsx' is not a module. And I don't have any intellisense for the available props.
The components work as expected though.
I have no issue with Vue or React components.

Everything is working in Astro 2.0, so it seems to be an Astro 3.0 regression.
Maybe it's only a Astro language-tools issue.

It's not related to my vscode settings as I still get the error when reverting back to the default settings.

Here is a screenshot of my error in vscode:

What's the expected result?

I would expect to have no error and working intellisense for props.

Link to Minimal Reproducible Example

https://github.com/marcfilleul/astro-3

Participation

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

[YolCruz]

Has anyone found a workaround for this? I would really like to use Astro with Svelte

[YolCruz]

I tried this with yarn. bun and pnpm. There's no issue with pnpm

[marcfilleul]

I tried this with yarn. bun and pnpm. There's no issue with pnpm

Very interesting. I hope it will help investigate the issue.

[Princesseuh]

Typically it's pnpm that has issues, not the other ones, ha. Not quite sure what this is about. Will investigate

[Princesseuh]

Sorry about the delay, I got pulled into other things. In the reproduction, the issue is that typescript isn't installed and yarn can't find it. Since it's a peer dep of Svelte's editor integration, probably that other package manager install it magically.

As such, running npm install typescript will workaround the issue in the meantime until we have a better fix.

[ralphwest1]

I am newly running into this exact same error, when running astro check.
Error: File 'c:/../SvelteComponent.svelte' is not a module.
I am on a windows machine and using pnpm with typescript installed.

Issue seems to be related to recent realease of @volar/language-service removing typescript.

• @astrojs/language-server: https://github.com/withastro/language-tools/releases/tag/astro-vscode%402.7.0
• @volar/language-service: https://github.com/volarjs/volar.js/releases/tag/v2.0.0`

As a temporary fix I was able to resolve by modifying my package.json as below:

{
  "dependencies": {
-    "@astrojs/check": "0.5.1",
+    "@astrojs/check": "0.4.1",
  },
+  "pnpm": {
+   "overrides": {
+      "@astrojs/language-server": "2.6.2"
+   }
  },
}