javascript - Svelte TS App.svelte er ikke et modul ts(2306)

Jeg bruker Vite svelete-ts-mal. Jeg endret prosjektstrukturen for å pakke hver side i én enkelt fil uten chunks. Alt fungerer bortsett fra TypeScript-importer for .svelte-utvidelser. Jeg vet ikke hvor jeg gjorde feil konfigurasjon for TypeScript, men det gir en feil når jeg prøver å importere Svelte-komponenten.

Problem: Når jeg prøver å importere App.svelte, sier den src/components/App.svelte' er ikke et modul.ts(2306)

Forventet oppførsel: Det skal importere Svelte-komponenten og gjenkjenne den som en Svelte-modul

Hva jeg prøvde å gjøre: Jeg prøvde å legge til types-egenskapen i tsconfig.json-filen, men det hjalp ikke

Koden der feilen oppstår:

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

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

export default app;

App.svelte-kode:

<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. Jeg fullførte ikke hele implementeringen som jeg ønsket, vær så snill å ikke bekymre deg for koden, den bør fungere som jeg forventer

Flere detaljer: Noen ganger gir det ikke en feil når jeg importerer Svelte-komponentene. Jeg kan ikke forstå hva som forårsaker feilen.

Svar #1

Problemet er at du ikke har erklært App.svelte som en modul ennå, du har bare prøvd å bruke den som om det var en.

Du må gjøre det til en TS-modul.

Prøv dette:

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

Relaterte artikler