react引入插件报错Error: Minified React error #321

小林犟

已于 2022-10-11 11:34:09 修改

阅读量8.5k

点赞数 3

分类专栏： React 文章标签： react.js javascript webpack

于 2022-10-11 11:28:13 首次发布

本文链接：https://blog.csdn.net/weixin_41387351/article/details/127257290

版权

React 专栏收录该内容

4 篇文章

订阅专栏

本文解决了一个React项目中因webpack配置不当导致的Error #321错误。问题源于项目使用了多个React实例，通过调整webpack配置及插件依赖，成功解决了冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在react16.8之前不支持hook的项目上，引入拖拽插件报错#321,提示Error: Minified React error #321，react官方(https://reactjs.org/warnings/invalid-hook-call-warning.html)提示导致可能这个错误的原因如下：
在这里插入图片描述
1、在package.json文件中我的react版本是

"react": "^16.5.2",
"react-dom": "^16.5.2",

普及一下package.json文件中，^ 和 ~ 的区别：

^ ：它将当前库的版本更新到第一个数字（major version)中的最新版本，比如： “^16.5.2” ，库会匹配更新到 16.X.X 的最新版本(也就是16.14.0)，但是不会更新到17.X.X版本

~ ：当下载的时候，它会自动更新到中间那个数字（minor version）的最新版本，比如：“~4.2.0”，库就会更新到 4.2.X 的最新版本，但是不会更新到4.3.X版本，波浪符号是曾经 npm 安装时候的默认符号，现在已经变为了插入符号

在 node_modules 中 react 和 react-dom 可以看到他的版本已经升级到了 16.14.0😮，也就是说他是支持hook的

2、逐个排查

确定 react 和 react-dom 是相同版本，16.14.0，支持hooks语法
确定自己的代码没有违背hooks的使用准则
项目中引入了不止一个react实例？？？

很快定位到是第三个原因，那就说明应该是打包的配置文件有问题，我这边用的是webpack配置，而且是用了 dll 抽离打包，在 webpack.dll.config.js 这个预打包文件

在这里插入图片描述

react-redux 是依赖 react 的，放到redux这个入口，打包会产生两个react实例，解决办法很简单，移动到 vendor 的入口，再打包就不会出现这个问题了

3、那我们怎么知道 react-redux 是依赖 react 的，而 redux-router-redux 却没有依赖react呢

我使用的是 Node 进行包管理，在项目文件夹中运行此检查：

npm ls react

在这里插入图片描述

npm ls react 这个命令会告诉我们，有哪些插件是依赖 react 的，很显然上面没有 redux-router-redux（那就是它没有依赖react），但是有 react-redux

4、可以尝试通过添加一些日志并重新启动开发服务器来调试此问题：

// 在 node_modules/react-dom/index.js 添加
window.React1 = require('react');

// 在随意一个组件里添加（我是在首页）
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);