[英]Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations
I have the following problem with my svelte project我的苗条项目有以下问题
main.ts main.ts
import App from './App.svelte';
const app = new App({
target: document.body,
});
export default app;
The first line return a warning第一行返回警告
Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations.
插件 typescript:@rollup/plugin-typescript TS2307:找不到模块“./App.svelte”或其相应的类型声明。
but my config looks ok I did install and added "@tsconfig/svelte": "^2.0.1",
to my tsconfig但我的配置看起来不错我确实安装并添加了
"@tsconfig/svelte": "^2.0.1",
到我的 tsconfig
rollup.config.js rollup.config.js
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
import preprocess from 'svelte-preprocess';
import alias from '@rollup/plugin-alias';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true,
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
},
};
}
export default {
input: 'src/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
},
plugins: [
svelte({
preprocess: preprocess({
sourceMap: !production,
postcss: true,
}),
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
alias({
resolve: ['.svelte', '.ts'], //optional, by default this will just look for .js files or folders
entries: [
{ find: '@assets', replacement: 'src/assets/' },
{ find: '@components', replacement: 'src/components/' },
{ find: '@libs', replacement: 'src/libs/' },
{ find: '@routes', replacement: 'src/routes/' },
{ find: '@models', replacement: 'src/models/' },
{ find: '@constants', replacement: 'src/constants/' },
{ find: '@services', replacement: 'src/services/' },
],
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
typescript({
sourceMap: !production,
inlineSources: !production,
resolveJsonModule: true,
}),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
],
watch: {
clearScreen: false,
},
};
tsconfig.json tsconfig.json
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*", "**/*.config.js"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
"compilerOptions": {
"baseUrl": "./",
"strict": true,
"forceConsistentCasingInFileNames": true,
"paths": {
"@assets/*": ["src/assets/*"],
"@components/*": ["src/components/*"],
"@libs/*": ["src/libs/*"],
"@routes/*": ["src/routes/*"],
"@models/*": ["src/models/*"],
"@constants/*": ["src/constants/*"],
"@services/*": ["src/services/*"]
}
}
}
I can import .svelte
in .svelte
files, but not .svelte
files in .ts
files我可以在
.svelte
文件中导入.svelte
,但不能在.ts
文件中导入.svelte
文件
@tsconfig/svelte
version 1.x did include "types": ["svelte"]
. @tsconfig/svelte
版本 1.x 确实包含"types": ["svelte"]
。 This ensured that TypeScript found the ambient Svelte type definitions that tell TypeScript that Svelte imports are "ok".这确保了 TypeScript 找到了环境 Svelte 类型定义,告诉 TypeScript Svelte 导入是“好的”。 But at the same time it closed off all other ambient type definitions like those from Jest which lead to confusion.
但同时它关闭了所有其他环境类型定义,例如来自 Jest 的那些导致混淆的定义。 Therefore, in version 2, the
types
field is removed.因此,在版本 2 中,删除了
types
字段。 You are now required to add the ambient definition or a reference to it yourself.您现在需要自己添加环境定义或对其的引用。
Within your src
folder create a global.d.ts
file with在您的
src
文件夹中创建一个global.d.ts
文件
/// <reference types="svelte" />
This functions essentially the same as the "types": ["svelte"]
in the tsconfig.json
previously and tells TS where to find the ambient type definition.这与之前的
tsconfig.json
中的"types": ["svelte"]
基本相同,并告诉 TS 在哪里可以找到环境类型定义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.