为什么我的 React TS 组件库中的某些组件会抛出 Minified React 错误 #321

Question

我正在使用 TypeScript 和 webpack 构建一个 React 组件库，并使用webpack serve在空白 ZFC335FDC70D28C69A2D 页面上对其进行测试。 现在奇怪的是，当我使用这样的组件时，每个组件都可以正常工作。 但是，如果我想在另一个项目中使用它们（使用 npm 安装库），例如使用 create-react-app 会引发 Minified React 错误 #321。 我不知道为什么会这样。 我也看不到非工作组件中的模式。

如果您想自己尝试一下： https://www.npmjs.com/package/athenic-ui

Answer 1

我刚刚查看了您的存储库，我认为问题Minified React error #321可能来自将react / react-dom包含到构建您的库中。 然后在使用项目构建后拥有多个 React 实例。

因此，为了解决问题，您必须将react / react-dom作为外部部门排除在外，其中应包含在消耗您的库的父项目级别。

// webpack.config.js
exports.module = [
  // your dev one
  // { ... },
  // your prod one
  {
    // ...
    externals: {
      react: "react",
      'react-dom': "react-dom"
    },
  }
]

PS：完成上述步骤后，您可能会发现主捆绑文件的大小也会显着减小:)