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

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

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.