Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations

Question

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

Ernie

Did you try adding declare module "*.svelte" { }? – Macguiness

thx for the reply, something like this indeed work declare module '*.svelte' { export { SvelteComponentDev as default } from 'svelte/internal'; } , is it a requisite ? I must have missed in the doc ? – Ernie

Not sure... I haven't used plain Svelte in a while; it was not required with Sapper (now Svelte-Kit). – Macguiness

anyway, it s a workaround I will try to gather more information, thank you ! – Ernie

Answer 1

@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.

Update: 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.

Opinionated

I started getting this error from out of nowhere and this answer helped me. Turns out I deleted the > character by mistake while adding some new types. I don't think I would have spotted it otherwise. – Judd

Yep. This one hit the spot :) – Tuttifrutti