npm build error with svelte: Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module 'X' or its corresponding type declarations

Question

I am trying to build a component library with svelte. I tried to build it with:

npm build

I got the error message:

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

The components I want to export are in the index.tsx:

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

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

My rollup.config.js:

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 pkg = require('./package.json');

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

Does anyone already had such a problem? Thanks in advance!

brunnerh · Accepted Answer · 2022-08-24 10:08:37Z

4

You may have to add a type declaration like this:

import type { SvelteComponentTyped } from 'svelte';

declare module '*.svelte' {
    export default SvelteComponentTyped;
}

The svelte package also provides something like this via svelte/types/runtime/ambient.d.ts, though it may not be visible to tsc depending on configuration.

Maybe you could also include this file somehow via the tsconfig.json.

answered Aug 24, 2022 at 10:08

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ninosaurier Over a year ago

Thanks for the quick response! Your answer has solved the problem. Thank you very much! :) I created the file sveltetype.d.ts and copied the content from your answer. Now I can build

canooerms · Accepted Answer · 2024-03-19 04:39:17Z

1

building upon brunnerh's answer, if you

import 'svelte';

I believe it imports all the ambient declarations d.ts's from node_modules/svelte. Worked for me

answered Mar 19, 2024 at 4:39

canooerms

111 bronze badge

Collectives™ on Stack Overflow

npm build error with svelte: Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module 'X' or its corresponding type declarations

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related