javascript - Svelte TS App.svelte bukan modul ts(2306)

Saya menggunakan template Vite svelete-ts. Saya mengubah struktur proyek untuk menggabungkan setiap halaman dalam satu file tanpa potongan. Semuanya bekerja kecuali impor TypeScript untuk ekstensi .svelte. Saya tidak tahu di mana saya melakukan konfigurasi yang salah untuk TypeScript, tetapi itu menimbulkan kesalahan saat saya mencoba mengimpor komponen Svelte

Masalah: Ketika saya mencoba mengimpor App.svelte, muncul pesan src/components/App.svelte' bukan modul.ts(2306)

Perilaku yang diharapkan: Seharusnya mengimpor komponen svelte dan mengenalinya sebagai modul Svelte

Apa yang saya coba lakukan: Saya mencoba menambahkan properti types ke dalam file tsconfig.json, tetapi itu tidak membantu

Kode tempat terjadinya kesalahan:

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

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

export default app;

Kode App.svelte:

<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. Saya belum menyelesaikan seluruh implementasi yang saya inginkan, mohon jangan khawatir tentang kodenya, seharusnya berjalan seperti yang saya harapkan

Lebih banyak detail: Terkadang tidak muncul kesalahan saat saya mengimpor komponen Svelte. Saya tidak bisa memahami apa yang menyebabkan kesalahan tersebut.

Jawaban #1

Masalahnya adalah Anda belum mendeklarasikan App.svelte sebagai modul, Anda hanya mencoba menggunakannya seolah-olah itu adalah modul.

Anda perlu menjadikannya sebagai Modul TS.

Coba ini:

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

Artikel terkait