找不到模塊“./App.svelte”或其對應的類型聲明

Question

我有一個集成了 electron 和 Svelte 以及 typescript 支持的設置。

當我運行rollup腳本來編譯 svelte 應用程序時，我得到了找不到模塊./App.svelte錯誤，如下所示。

Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations.

這是我的package.json配置：

{
  "name": "tapwire-electron-first",
  "productName": "tapwire-electron-first",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": "dist/index.js",
  "scripts": {
    "electron-start": "tsc && electron-forge start",
    "electron-package": "electron-forge package",
    "electron-make": "electron-forge make",
    "electron-publish": "electron-forge publish",
    "electron-lint": "eslint --ext .ts .",
    "svelte-build": "rollup -c",
    "svelte-dev": "rollup -c -w",
    "svelte-start": "sirv public",
    "svelte-validate": "svelte-check",
    "start": "run-p svelte-dev electron-start"
  },
  "keywords": [],
  "author": {
    "name": "nateshmbhat",
  },
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "tapwire_electron_first"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.53",
    "@electron-forge/maker-deb": "^6.0.0-beta.53",
    "@electron-forge/maker-rpm": "^6.0.0-beta.53",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.53",
    "@electron-forge/maker-zip": "^6.0.0-beta.53",
    "@rollup/plugin-commonjs": "^15.1.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "@types/node": "^14.11.2",
    "@typescript-eslint/eslint-plugin": "^2.34.0",
    "@typescript-eslint/parser": "^2.34.0",
    "cross-env": "^7.0.2",
    "electron": "10.1.3",
    "eslint": "^7.10.0",
    "eslint-plugin-import": "^2.22.1",
    "npm-run-all": "^4.1.5",
    "rollup": "^2.28.2",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^6.0.1",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.29.0",
    "svelte-check": "^1.0.55",
    "svelte-preprocess": "^4.3.2",
    "typescript": "^4.0.3"
  },
  "dependencies": {
    "concurrently": "^5.3.0",
    "electron-reload": "^1.5.0",
    "electron-squirrel-startup": "^1.0.0",
    "sirv-cli": "^1.0.6"
  }
}

Answer 1

原來我必須先安裝@tsconfig/svelte作為開發依賴項，然后用我的tsconfig.json擴展它，如下所示：

安裝@tsconfig/svelte

npm i --save-dev @tsconfig/svelte

將此 tsconfig 添加為tsconfig.json中的基本配置文件：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
}

Answer 2

我的罪魁禍首是陳舊的global.d.ts 。 我設置了/// <reference types="@sveltejs/kit" /> ，但試圖將項目更改為 vanilla Svelte。 將其修復為具有/// <reference types="svelte" />反而起到了作用。

Answer 3

使用tsc編譯 Typescript 時，我在默認的react-ts vite 項目中遇到了同樣的問題

我不得不刪除tsconfig.json中的以下行

"skipLibCheck": false,

Answer 4

如果Natesh 的回答對您不起作用，則此文件應作為基本 shim：

// svelte-shim.d.ts

declare module "*.svelte" {
    import type { ComponentType } from "svelte";
    const component: ComponentType;
    export default component;
}

這實際上告訴 TypeScript 任何它不知道如何處理的 .svelte 文件都應該作為 Svelte 組件讀入。 你不會得到他們導出的任何道具或方法，但如果你只需要使用他們的基本ComponentType接口，這應該可以正常工作。

Answer 5

我有一個類似的問題。 我用 Svelte 構建了一個組件庫，並嘗試用 rollup 構建它。 在我的 index.tsx 文件中，我導出我的組件，例如：

export { default as MyComponent } from "./components/MyComponent.svelte";

當我嘗試運行構建時，我收到以下錯誤：插件 typescript:@rollup/plugin-typescript TS2307: 找不到模塊 './components/MyComponent.svelte' 或其相應的類型聲明。

這是我的 tsconfig：

  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "outDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "declaration": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "importsNotUsedAsValues": "remove"
}
```

and my rollup.config:
```
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '@rollup/plugin-json';
import autoPreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import nodeResolve from '@rollup/plugin-node-resolve';

const packageJson = require("./package.json");

export default {
  input: "src/index.tsx",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: false,
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: false,
    },
  ],
  plugins: [
    json({ compact: true }),
    svelte({
      preprocess: autoPreprocess(),
    }),
    resolve(),
    peerDepsExternal(),
    nodeResolve(),
    typescript({ sourceMap: true, rootDir: "./src" }),
    postcss({
      extensions: [".css"],
    }),
  ],
};

有沒有人也遇到過這個問題？ 謝謝！