為什么我的 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：完成上述步驟后，您可能會發現主捆綁文件的大小也會顯着減小:)