Cannot find module './App.svelte' or its corresponding type declarations

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"
  }
}

Bertolde

Use a well tested starter pack for electron and svelte : github.com/nateshmbhat/svelte-electron-ts-starter – Bertolde

See official docs on Svelte with TypeScript – Nordine

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",
}

Bertolde

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.

Commencement

in my case, this file was missing altogether – Karrikarrie

If you're using Vite, you may have to change the setting in vite-end.d.ts. – Knuth

Yeah, for me this line was just missing. They tell you to add it in github.com/tsconfig/bases#svelte-tsconfigjson – Rameriz

Answer 3

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.

Culinarian

Answer 4

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,

Dubbin

Answer 5

I had the initial JS setup for Svelte installed; what worked for me is going into my jsconfig.json file and setting compilerOptions.checkJS to false, which in the config itself the comment described this option as:

Typecheck JS in .svelte and .js files by default...

-- EDIT I'll leave this posted here, but I realized the original question had a TS setup after the fact. The responses in this thread did lead me to discover this compiler option, though.

Nixon

Answer 6

I use command select Typescript version as use workspace version in vscode to solve this problem.

Croquet