React 和 react-dom 仍然被 rollup bundler 捆绑

Question

I'm not sure what I am doing wrong but I simply cannot build components with react hooks for rollup.js. I have tries all the popular comments such as adding skip to my resolve addon and adding externals and adding as peerdependencies in package.json.

My imports is as follows:

 import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "@rollup/plugin-typescript"; import { terser } from "rollup-plugin-terser"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; import postcss from "rollup-plugin-postcss"; import image from "@rollup/plugin-image"; 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, }, ], external: ["react", "react-dom"], plugins: [ peerDepsExternal(), resolve({ skip: ["react", "react-dom"], }), commonjs(), typescript({ tsconfig: "./tsconfig.json", }), postcss({ plugins: [require("tailwindcss"), require("autoprefixer")], }), terser(), image(), ], };

Answer 1

For me 'rollup-plugin-ignore' worked.

  import ignore from 'rollup-plugin-ignore';
  ignore(['fs', 'net', 'react', 'react-dom', 'prop-types', 'PropTypes']),

And external like this

external: [
  (id) => /^react$|^react-dom$|^@babel\/runtime/.test(id),
];