Svelte TS App.svelte 不是模块 ts(2306)

Question

我使用的是Vitesvelete-ts模板。我更改了项目结构，将每个页面捆绑在一个文件中，没有块。除了用于扩展的打字稿导入之外，一切正常.svelte。我不知道我在哪里对打字稿做了错误的配置，但当我尝试导入 Svelte 组件时它会抛出错误

问题：当我尝试导入 App.svelte 时，它​​说src/components/App.svelte' is not a module.ts(2306)

预期行为：它应该导入 svelte 组件并将其识别为 Svelte 模块

我尝试做的事情：我尝试将types属性添加到 tsconfig.json 文件中，但没有帮助

发生错误的代码：

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

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

export default app;

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"]
}

PS我没有完成我想要的整个实现，请不要担心代码，它应该按照我的预期工作

更多细节：有时，当我导入 Svelte 组件时，它不会抛出错误。我无法理解导致错误的原因。

Answer 1

问题是您还没有将 App.svelte 声明为模块，您只是尝试像模块一样使用它。

您需要将其设为 TS 模块。

尝试这个：

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