I created this custom npm package:

Then I created a basic create-react-app 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

{
  "pilerOptions": {
    "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 & ponent library",
  "homepage": ";,
  "bugs": {
    "url": ";
  },
  "repository": {
    "type": "git",
    "url": "git+.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

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

Then I created a basic create-react-app https://github./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

{
  "pilerOptions": {
    "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 & ponent library",
  "homepage": "https://github./leongaban/leon-theme",
  "bugs": {
    "url": "https://github./leongaban/leon-theme/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github./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

• javascript
• typescript
• npm
• npm-package

• 1 In the code you published in the npm, you have this "types": "dist/index/.d.ts" in package.json. but there is no file. – plsankar Commented Sep 22, 2023 at 4:31
• 2 also i can see that your you have pushed the node_modules folder inside the dist. node_modules doesn't have to be published. – plsankar Commented Sep 22, 2023 at 4:33
• Ah @plsankar the dist/index/.d.ts is published into the types directory, do we have to manually move it? – Leon Gaban Commented Sep 22, 2023 at 4:48
• 1 Wele. Everything doesn't have to be in the dist folder. you could just push the types folder along. – plsankar Commented Sep 22, 2023 at 4:52
• 1 In your package.json there is a property which controls which files get sent to npm. ``` "files": [ "dist" ], ``` add types folder to this array – plsankar Commented Sep 22, 2023 at 5:08

1 Answer 1

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

https://rollupjs/

rollup config

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import monjs from '@rollup/plugin-monjs';
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(),
        monjs()
    ],
};

Updated tsconfig

{
  "pilerOptions": {
    "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 & ponent library",
  "homepage": "https://github./leongaban/leon-theme",
  "bugs": {
    "url": "https://github./leongaban/leon-theme/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github./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-monjs": "^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: