昨天在开发过程中，突然遇到项目部署到服务器后，直接白屏，报：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',
},
}
};
文章参考链接
