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

【问题标题】：Why are some components in my React TS component library throwing Minified React error #321为什么我的 React TS 组件库中的某些组件会抛出 Minified React 错误 #321
【发布时间】：2021-06-12 11:58:28
【问题描述】：

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

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

【问题讨论】：

您很可能在另一个项目中有多个 react lib 副本。请参阅本指南：reactjs.org/warnings/invalid-hook-call-warning.html

标签： javascript reactjs typescript webpack athenic-ui

【解决方案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：完成上述步骤后，您可能会发现主捆绑文件的大小也会显着减小:)

【讨论】：