{"id":790,"hash":"69d858664692646cdc6b91d84baead6324fcd84d753b66cbd97d6d61135cc9b0","pattern":"Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module &#39;./App.svelte&#39; or its corresponding type declarations","full_message":"I have the following problem with my svelte project\n\nmain.ts\n\nimport App from './App.svelte';\n\nconst app = new App({\n  target: document.body,\n});\n\nexport default app;\n\nThe first line return a warning\n\nPlugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations.\n\nbut my config looks ok I did install and added \"@tsconfig/svelte\": \"^2.0.1\", to my tsconfig\n\nrollup.config.js\n\nimport svelte from 'rollup-plugin-svelte';\nimport commonjs from '@rollup/plugin-commonjs';\nimport resolve from '@rollup/plugin-node-resolve';\nimport livereload from 'rollup-plugin-livereload';\nimport { terser } from 'rollup-plugin-terser';\nimport typescript from '@rollup/plugin-typescript';\nimport css from 'rollup-plugin-css-only';\nimport preprocess from 'svelte-preprocess';\nimport alias from '@rollup/plugin-alias';\n\nconst production = !process.env.ROLLUP_WATCH;\n\nfunction serve() {\n  let server;\n\n  function toExit() {\n    if (server) server.kill(0);\n  }\n\n  return {\n    writeBundle() {\n      if (server) return;\n      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {\n        stdio: ['ignore', 'inherit', 'inherit'],\n        shell: true,\n      });\n\n      process.on('SIGTERM', toExit);\n      process.on('exit', toExit);\n    },\n  };\n}\n\nexport default {\n  input: 'src/main.ts',\n  output: {\n    sourcemap: true,\n    format: 'iife',\n    name: 'app',\n    file: 'public/build/bundle.js',\n  },\n  plugins: [\n    svelte({\n      preprocess: preprocess({\n        sourceMap: !production,\n        postcss: true,\n      }),\n      compilerOptions: {\n        // enable run-time checks when not in production\n        dev: !production,\n      },\n    }),\n    // we'll extract any component CSS out into\n    // a separate file - better for performance\n    css({ output: 'bundle.css' }),\n    alias({\n      resolve: ['.svelte', '.ts'], //optional, by default this will just look for .js files or folders\n      entries: [\n        { find: '@assets', replacement: 'src/assets/' },\n        { find: '@components', replacement: 'src/components/' },\n        { find: '@libs', replacement: 'src/libs/' },\n        { find: '@routes', replacement: 'src/routes/' },\n        { find: '@models', replacement: 'src/models/' },\n        { find: '@constants', replacement: 'src/constants/' },\n        { find: '@services', replacement: 'src/services/' },\n      ],\n    }),\n    // If you have external dependencies installed from\n    // npm, you'll most likely need these plugins. In\n    // some cases you'll need additional configuration -\n    // consult the documentation for details:\n    // https://github.com/rollup/plugins/tree/master/packages/commonjs\n    resolve({\n      browser: true,\n      dedupe: ['svelte'],\n    }),\n    commonjs(),\n    typescript({\n      sourceMap: !production,\n      inlineSources: !production,\n      resolveJsonModule: true,\n    }),\n\n    // In dev mode, call `npm run start` once\n    // the bundle has been generated\n    !production && serve(),\n\n    // Watch the `public` directory and refresh the\n    // browser on changes when not in production\n    !production && livereload('public'),\n\n    // If we're building for production (npm run build\n    // instead of npm run dev), minify\n    production && terser(),\n  ],\n  watch: {\n    clearScreen: false,\n  },\n};\n\ntsconfig.json\n\n{\n  \"extends\": \"@tsconfig/svelte/tsconfig.json\",\n  \"include\": [\"src/**/*\", \"**/*.config.js\"],\n  \"exclude\": [\"node_modules/*\", \"__sapper__/*\", \"public/*\"],\n  \"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"paths\": {\n      \"@assets/*\": [\"src/assets/*\"],\n      \"@components/*\": [\"src/components/*\"],\n      \"@libs/*\": [\"src/libs/*\"],\n      \"@routes/*\": [\"src/routes/*\"],\n      \"@models/*\": [\"src/models/*\"],\n      \"@constants/*\": [\"src/constants/*\"],\n      \"@services/*\": [\"src/services/*\"]\n    }\n  }\n}\n\nI can import .svelte in .svelte files, but not .svelte files in .ts files","ecosystem":"npm","package_name":"typescript","package_version":null,"solution":"@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.\n\nWithin your src folder create a global.d.ts file with\n\n/// <reference types=\"svelte\" />\n\nThis functions essentially the same as the \"types\": [\"svelte\"] in the tsconfig.json previously and tells TS where to find the ambient type definition.\n\nUpdate: If you get this error with @tsconfig/svelte version 2, check your TS version. If it's 4.5, it's likely a bug in TS which broke tripleslash types like these in certain situations. Either downgrade to TS 4.4.x or bump Svelte to the latest version which contains a fix to make it work again.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/67907079/plugin-typescript-rollup-plugin-typescript-ts2307-cannot-find-module-app-s","votes":10,"created_at":"2026-04-19T04:51:43.004781+00:00","updated_at":"2026-04-19T04:51:43.004781+00:00"}