javascriptreactjstypescriptes6-modulesrollup

Module not found: Error: Can't resolve when install a published react component libary which using rollup to build


I create a react component library named '@b/b-core', and using Rollup to build and publish to the repository. I install the libary in a react app, It shows Module not found: Error: Can't resolve '@b/b-core' when use npm start, But there is no errors in the component's source code of react app in vs code using import statement, It seems types are correct.

Here is the rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import copy from 'rollup-plugin-copy';

const packageJson = require("./package.json");

export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: true,
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: true,
            },
        ],
        plugins: [
            peerDepsExternal(),
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            copy({
                targets: [
                    { src: 'package.json', dest: 'dist' },
                ],
            }),
        ],
        external: ["react", "react-dom"],
    },
    {
        input: "src/index.ts",
        output: [{ file: "dist/index.d.ts", format: "es" }],
        plugins: [dts()],
    },
];

Here is the packages.json, I add main,module,types and peerDependencies

{
  "name": "@b/b-core",
  "version": "0.1.6",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/index.d.ts",
  "dependencies": {
    "crypto-js": "^4.0.0",
    "esprima": "^4.0.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "5.0.1",
    "rxjs": "^7.8.1",
    "typescript": "^4.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "rollup -c",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@types/react": "^16.9.8",
    "@types/react-dom": "^16.9.19",
    "@rollup/plugin-commonjs": "^25.0.3",
    "@rollup/plugin-node-resolve": "^15.1.0",
    "@rollup/plugin-typescript": "^11.1.2",
    "@types/crypto-js": "^4.1.1",
    "@types/esprima": "^4.0.3",
    "rollup": "^2.79.1",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-dts": "^5.3.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2"
  },
  "peerDependencies": {
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  }
}

I am new to the rollup and react, I did it fllowed https://blog.logrocket.com/how-to-build-component-library-react-typescript/


Solution

  • Solved, It because publish in the folder dist, and the package.json should be

      "main": "cjs/index.js",
      "module": "esm/index.js",
      "types": "index.d.ts",
    

    without start with dist/***, so the module can't resolve!