Rollup打包报错：无法解析入口模块dist/esm/index.js

Root Cause #

Your Rollup config has duplicate input keys in the same configuration object. The second input: "dist/esm/index.js" overrides the first input: "src/index.js", forcing Rollup to load a file that hasn’t been created yet (it’s supposed to be output by the build, not used as an entry point).

Step 1: Correct Rollup Configuration #

Remove the duplicate input line and add the rollup-plugin-peer-deps-external plugin to exclude peer dependencies (like React) from your bundle. Here’s the fixed config:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    input: "src/index.js",
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs()
    ],
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true
      }
    ]
  }
];

Step 2: Clean Up package.json #

Since you’re not using TypeScript, remove unused dependencies and fields:

• Delete @rollup/plugin-typescript and rollup-plugin-dts from dependencies (they’re for TypeScript only)
• Remove the types field (you aren’t generating type definitions)
• Optional: Remove typescript and @types/react from devDependencies if you don’t use TypeScript at all

Updated package.json snippet:

"devDependencies": {
  "jest-environment-jsdom": "^29.7.0",
  "react": "^18.2.0"
},
"dependencies": {
  "@rollup/plugin-commonjs": "^25.0.7",
  "@rollup/plugin-node-resolve": "^15.2.3",
  "@rollup/plugin-terser": "^0.4.4",
  "react-dom": "^18.2.0",
  "rollup": "^4.5.2",
  "rollup-plugin-peer-deps-external": "^2.2.4",
  "rollup-plugin-terser": "^7.0.2"
},
// Remove the "types" entry here

Step 3: Validate Source Entry #

Ensure src/index.js exists and exports your components correctly. Example:

import MyButton from "./components/MyButton";

export { MyButton };

Optional: Add Minification #

To minify your bundle, include the terser plugin:

import terser from "@rollup/plugin-terser";

// Add to plugins array:
plugins: [peerDepsExternal(), resolve(), commonjs(), terser()]

内容的提问来源于stack exchange，提问作者chidijoe