找不到模块“./App.svelte”或其对应的类型声明

Question

I have a setup that integrates electron with svelte along with typescript support.

when I run the rollup script to compile svelte app, i am getting cannot find module ./App.svelte error as shown below.

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

Here's my package.json configuration:

{
  "name": "tapwire-electron-first",
  "productName": "tapwire-electron-first",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": "dist/index.js",
  "scripts": {
    "electron-start": "tsc && electron-forge start",
    "electron-package": "electron-forge package",
    "electron-make": "electron-forge make",
    "electron-publish": "electron-forge publish",
    "electron-lint": "eslint --ext .ts .",
    "svelte-build": "rollup -c",
    "svelte-dev": "rollup -c -w",
    "svelte-start": "sirv public",
    "svelte-validate": "svelte-check",
    "start": "run-p svelte-dev electron-start"
  },
  "keywords": [],
  "author": {
    "name": "nateshmbhat",
  },
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "tapwire_electron_first"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.53",
    "@electron-forge/maker-deb": "^6.0.0-beta.53",
    "@electron-forge/maker-rpm": "^6.0.0-beta.53",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.53",
    "@electron-forge/maker-zip": "^6.0.0-beta.53",
    "@rollup/plugin-commonjs": "^15.1.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "@types/node": "^14.11.2",
    "@typescript-eslint/eslint-plugin": "^2.34.0",
    "@typescript-eslint/parser": "^2.34.0",
    "cross-env": "^7.0.2",
    "electron": "10.1.3",
    "eslint": "^7.10.0",
    "eslint-plugin-import": "^2.22.1",
    "npm-run-all": "^4.1.5",
    "rollup": "^2.28.2",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^6.0.1",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.29.0",
    "svelte-check": "^1.0.55",
    "svelte-preprocess": "^4.3.2",
    "typescript": "^4.0.3"
  },
  "dependencies": {
    "concurrently": "^5.3.0",
    "electron-reload": "^1.5.0",
    "electron-squirrel-startup": "^1.0.0",
    "sirv-cli": "^1.0.6"
  }
}

Answer 1

Turns out i had to install @tsconfig/svelte as a dev dependency first then extend this with my tsconfig.json as shown below :

Install @tsconfig/svelte

npm i --save-dev @tsconfig/svelte

Add this tsconfig as the base config file in your tsconfig.json :

{
  "extends": "@tsconfig/svelte/tsconfig.json",
}

Answer 2

The culprit on my end was a stale global.d.ts . I had /// <reference types="@sveltejs/kit" /> set, but was trying to change the project to vanilla Svelte. Fixing it to have /// <reference types="svelte" /> instead did the trick.

Answer 3

I had the same problem with a default react-ts vite project when compiling Typescript with tsc

I had to remove following line in tsconfig.json

"skipLibCheck": false,

Answer 4

If Natesh's answer doesn't work for you, this file should work as a basic shim:

// svelte-shim.d.ts

declare module "*.svelte" {
    import type { ComponentType } from "svelte";
    const component: ComponentType;
    export default component;
}

This essentially tells TypeScript that any .svelte files it doesn't otherwise know what to do with should be read in as Svelte components. You won't get any of their exported props or methods, but if all you need is to use their basic ComponentType interface, this should work fine.

Answer 5

I've got a similar problem. I built a component library with Svelte and trying to build it with rollup. In my index.tsx file I export my components like:

export { default as MyComponent } from "./components/MyComponent.svelte";

When I try to run build, I get the following error: Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './components/MyComponent.svelte' or its corresponding type declarations.

Here is my tsconfig:

  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "outDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "declaration": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "importsNotUsedAsValues": "remove"
}
```

and my rollup.config:
```
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '@rollup/plugin-json';
import autoPreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import nodeResolve from '@rollup/plugin-node-resolve';

const packageJson = require("./package.json");

export default {
  input: "src/index.tsx",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: false,
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: false,
    },
  ],
  plugins: [
    json({ compact: true }),
    svelte({
      preprocess: autoPreprocess(),
    }),
    resolve(),
    peerDepsExternal(),
    nodeResolve(),
    typescript({ sourceMap: true, rootDir: "./src" }),
    postcss({
      extensions: [".css"],
    }),
  ],
};

Has anyone faced this issue too? Thanks!