title: Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations
body: <p>I have the following problem with my svelte project</p>
  <p><em>main.ts</em></p>
  <pre><code>import App from './App.svelte';
  
  const app = new App({
    target: document.body,
  });
  
  export default app;
  </code></pre>
  <p>The first line return a warning</p>
  <blockquote>
  <p>Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations.</p>
  </blockquote>
  <p>but my config looks ok I did install and added <code>&quot;@tsconfig/svelte&quot;: &quot;^2.0.1&quot;,</code> to my tsconfig</p>
  <p>rollup.config.js</p>
  <pre><code>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 &amp;&amp; serve(),
  
      // Watch the `public` directory and refresh the
      // browser on changes when not in production
      !production &amp;&amp; livereload('public'),
  
      // If we're building for production (npm run build
      // instead of npm run dev), minify
      production &amp;&amp; terser(),
    ],
    watch: {
      clearScreen: false,
    },
  };
  
  </code></pre>
  <p><em>tsconfig.json</em></p>
  <pre><code>{
    &quot;extends&quot;: &quot;@tsconfig/svelte/tsconfig.json&quot;,
    &quot;include&quot;: [&quot;src/**/*&quot;, &quot;**/*.config.js&quot;],
    &quot;exclude&quot;: [&quot;node_modules/*&quot;, &quot;__sapper__/*&quot;, &quot;public/*&quot;],
    &quot;compilerOptions&quot;: {
      &quot;baseUrl&quot;: &quot;./&quot;,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;paths&quot;: {
        &quot;@assets/*&quot;: [&quot;src/assets/*&quot;],
        &quot;@components/*&quot;: [&quot;src/components/*&quot;],
        &quot;@libs/*&quot;: [&quot;src/libs/*&quot;],
        &quot;@routes/*&quot;: [&quot;src/routes/*&quot;],
        &quot;@models/*&quot;: [&quot;src/models/*&quot;],
        &quot;@constants/*&quot;: [&quot;src/constants/*&quot;],
        &quot;@services/*&quot;: [&quot;src/services/*&quot;]
      }
    }
  }
  </code></pre>
  <p>I can import <code>.svelte</code> in <code>.svelte</code> files, but not <code>.svelte</code> files in <code>.ts</code> files</p>