Svelte TS App.svelte is not a module ts(2306)

Question

I am using Vite svelete-ts template. I changed the project structure to bundle every page in one single file without chunks. Everything works except typescript imports for .svelte extensions. I don't know where I did the wrong configuration for typescript but it throws an error when I am trying to import the Svelte component

Issue: When I try to import App.svelte it says src/components/App.svelte' is not a module.ts(2306)

Expected behavior: It should import the svelte component and recognize it as a Svelte module

What I tried to do: I tried to add types property into tsconfig.json file, but it didn't help

The code where the error happens:

import App from '@components/App.svelte';

const app = new App({
  target: document.getElementById('app'),
});

export default app;

App.svelte code:

<script lang="ts">
  import '@assets/tailwind.css';

  import { googleFontsUrl } from '@utils/fonts';
  import type { SvelteComponent } from 'svelte';

  export let component: SvelteComponent;
  export let componentProps: Record<string, any>;
</script>

<svelte:head>
  <link href={googleFontsUrl} rel="stylesheet" />
</svelte:head>

{#if component}
  <svelte:component this={component} {...componentProps} />
{/if}

tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "useDefineForClassFields": true,
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": true,
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@dev/*": ["src/dev/*"],
      "@libs/*": ["src/libs/*"],
      "@services/*": ["src/services/*"],
      "@types/*": ["src/types/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": [
    "configs/**/*",
    "scripts/**/*",
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.svelte"
  ],
  "exclude": ["node_modules"]
}

P.S. I didn't finish the whole implementation that I wanted, please don't worry about the code, it should work as I am expecting

More details: Sometimes it doesn't throw an error when I am importing the Svelte components. I cannot understand what causes the error.

Athanor

Vite normally scaffolds a svelte-ts project with the following in src/vite-env.d.ts: /// <reference types="svelte" />. That enables the types for .svelte files. – Zooplasty

Answer 1

The problem is that you haven't declared App.svelte as a module yet, you've just tried to use it like it was one.

You need to make it a TS Module.

Try this:

<script lang="ts" type="module">

Voyeurism