I have the following problem with my svelte project
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.
but my config looks ok I did install and added "@tsconfig/svelte": "^2.0.1",
to my tsconfig
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
{
"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
@tsconfig/svelte
version 1.x did include "types": ["svelte"]
. This ensured that TypeScript found the ambient Svelte type definitions that tell TypeScript that Svelte imports are "ok". But at the same time it closed off all other ambient type definitions like those from Jest which lead to confusion. Therefore, in version 2, the types
field is removed. 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
/// <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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.