引入react文件报错_npm引入React Hooks轮子库报错Minified React error#321的解决方法

博客作者在尝试发布并测试自建的React Hooks库时遇到Minified React error#321。通过排查,作者发现错误并非由违反Hooks规则、React版本不匹配或引入重复React引起。最终,问题在于webpack打包时将React和ReactDOM包含在内,导致项目中有多个React实例。解决方案是将React和ReactDOM设置为webpack的externals,使其在运行时从宿主环境加载,成功解决了问题。
摘要由CSDN通过智能技术生成

最近把自己(未完待续)的轮子库 cui-demo 尝试发布到 npm 上,在测试项目中尝试引用时,报了一个无情的错。

a49b0bf70b5db78765c7e7effabca1db.png
Minified React error#321
「不看废话版」
排除了我的代码问题后,这个报错的原因应该是我的轮子库没有成功获取到测试项目(宿主环境)的依赖 reactreact-dom 。解决方法如下:
1. 在 webpack 配置中将 reactreact-dom 标记为 externals(这同时要求 output.libraryTargetumd ),使轮子库可以在运行时获取到宿主环境的依赖。即
// webpack.config.js
module.exports = {
    
  // ...
  externals: {
    
    react: {
    
      commonjs: 'react',
      commonjs2: 'react',
      amd: 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值