找不到模块'./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" />，但试图将项目更改为香草Svelte。将其修复为/// <reference types="svelte" />反而起到了作用。

Answer 3

如果Natesh的答案对你不起作用，这个文件应该作为一个基本的填充程序：

// svelte-shim.d.ts
declare module "*.svelte" {
import type { ComponentType } from "svelte";
const component: ComponentType;
export default component;
}

这本质上告诉TypeScript，它不知道该怎么做的任何.svelte文件都应该作为svelte组件读取。你不会得到他们导出的任何道具或方法，但如果你只需要使用他们的基本ComponentType接口，这应该可以正常工作。

Answer 4

当使用tsc编译Typescript时，我在默认的react-tsvite项目中遇到了同样的问题

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

"skipLibCheck": false,

Answer 5

我安装了Svelte的初始JS设置；对我有用的是进入我的jsconfig.json文件并将compilerOptions.checkJS设置为false，在配置本身中，注释将该选项描述为：

默认在.svelte和.js文件中Typecheck JS。。。

-编辑我会把这个贴在这里，但我意识到原来的问题是在事后设置的。不过，这个线程中的响应确实让我发现了这个编译器选项。