Cannot find module or its corresponding type declarations.ts(2307)

Question

I created this custom npm package: https://www.npmjs.com/package/leon-theme?activeTab=code

Then I created a basic create-react-app https://github.com/leongaban/test-project and in the src/index.tsx file I tried to import my package.

However when add my import import { LeonTheme } from "leon-theme";

I get the following error when I hover over the above line:

Cannot find module 'leon-theme' or its corresponding type declarations.ts(2307)

tsconfig

{
  "compilerOptions": {
    "module": "ES6",
    "target": "es2016",
    "lib": ["ES2020", "DOM"],
    "jsx": "react",
    "allowJs": true,
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": false,
    "outDir": "./dist",
    "moduleResolution": "node",
    "noImplicitAny": false
  },
  "include": ["src/**/*.ts"]
}

package.json

{
  "name": "leon-theme",
  "version": "0.0.15",
  "module": "dist/lib/es6/index.js",
  "description": "A simple React style & component library",
  "homepage": "https://github.com/leongaban/leon-theme",
  "bugs": {
    "url": "https://github.com/leongaban/leon-theme/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/leongaban/leon-theme.git"
  },
  "keywords": [
    "javascript",
    "theme",
    "buttons",
    "leon"
  ],
  "scripts": {
    "build": "rm -rf dist/lib && tsc --build"
  },
  "author": "Leon Gaban",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.22",
    "jest-environment-jsdom": "^29.7.0",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2"
  },
  "files": [
    "dist",
    "types"
  ],
  "types": "dist/index.d.ts"
}

node_modules/leon-theme folder structure in the new react app

Answer 1

I wasn't building / bundling things correctly. Now with rollup I'm finally able to create the files I need.

https://rollupjs.org/

rollup config

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import typescript from '@rollup/plugin-typescript';

export default {
    input: 'src/index.ts',
    output: [
        {
            file: 'dist/index.js',
            format: 'cjs',
            sourcemap: true
        },
        {
            file: 'dist/index.esm.js',
            format: 'esm',
            sourcemap: true
        }
    ],
    plugins: [
        peerDepsExternal(),
        postcss({
            inject: true
        }),
        typescript(),
        babel({
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            exclude: 'node_modules/**'
        }),
        resolve(),
        commonjs()
    ],
};

Updated tsconfig

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "es6",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDirs": [
      "src"
    ],
    "baseUrl": ".",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "declaration": true
  },
  "include": [
    "src/**/*"
  ]
}

Also needed this bablerc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

packages for the lib

{
  "name": "leon-theme",
  "version": "0.0.17",
  "module": "dist/index.js",
  "description": "A simple React style & component library",
  "homepage": "https://github.com/leongaban/leon-theme",
  "bugs": {
    "url": "https://github.com/leongaban/leon-theme/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/leongaban/leon-theme.git"
  },
  "keywords": [
    "javascript",
    "theme",
    "buttons",
    "leon-theme"
  ],
  "scripts": {
    "build": "rm -rf dist/lib && rollup -c"
  },
  "author": "Leon Gaban",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.22.20",
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.22.15",
    "@rollup/plugin-commonjs": "^25.0.4",
    "@rollup/plugin-node-resolve": "^15.2.1",
    "@rollup/plugin-typescript": "^11.1.3",
    "@types/react": "^18.2.22",
    "rollup": "^2.79.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "tslib": "^2.6.2",
    "typescript": "*"
  },
  "files": [
    "dist",
    "types"
  ],
  "types": "dist/index.d.ts",
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.2.2"
  }
}

Missing module error now gone: