昨天在开发过程中，突然遇到项目部署到服务器后，直接白屏，报：Minified React error#321，

立马网上查，各种说法，什么不支持hooks版本？什么违反了hooks使用规则？什么出现了不同版本的react库？等等...

然后回想了一下这次改动点...

首先想到的就是我们package-lock.json文件是2版本，这次开发的时候，发现上一个开发的同事把他降回了1...

我也没想太多，直接npm i，进行了覆盖，又变回了2，本地运行正常，然后就一顿操作，此处省略13689个字，顺利提测...

提测后发现，进去直接白屏了，然后开始按照报错查呀查...

因为我们所有项目基础库是一样的，这个项目在基础库上额外增加了两三个画图的antv插件和echart插件，所以想到的解决方案是到其他项目拿到一个正常运行的package-lock.json版本为2的文件替换该项目lock文件，重新安装，然后再把少的插件装上，重新npm star ......

项目顺利运行

我们这个很多东西是封装到二方库里了，像webpack配置相关的东西等等，我们只要去copy一个正常运行的拿过来，改吧改吧就可以了。

但是如果你们只有一个项目，该怎么办呢？？？？

然后就网上又查了一下，发现了解决方案，经过评论论证，问题得到了解决。

那这里也记录一下，方便以后查阅。。。

问题原因：

项目中真的存在着多个 react 实例，webpack 打包时 把 react 一起把它打包进 bundles 里了。

解决方案：

在 webpack 构建时将 react 和 react-dom 标记为 externals （外部扩展），这样它就不会被打包进 bundles 中，而是在运行时自动从宿主环境中获取这些扩展依赖。webpack增加配置如下：

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist/lib'),
    library: 'CUI',
 // 当扩展依赖是对象({ root, amd, commonjs, ... })时，libraryTarget必为'umd'。查看：https://webpack.js.org/configuration/externals/#object
    libraryTarget: 'umd'     
  },
  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      root: 'React',
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      root: 'ReactDOM',
    },
  }
};

文章参考链接