为什么我的外部托管的 React 组件在通过 NPM 加载时会中断

Why does my externally hosted React component break when loaded through NPM?

本文关键字：NPM 加载 中断 组件 外部 我的 React 为什么      更新时间：2023-09-26

我写了一个很好的自包含组件，它在我构建它的初始项目中按预期工作。

我想最终将库作为 NPM 模块发布，所以我想我应该首先通过 NPM 从另一个存储库加载库。

在我的新项目中，我已经在我的package.json中定义了库存储库的路径，并且它被 NPM 很好地拉下了，Webpack 成功地将其编译到我的捆绑包中，但是当我在浏览器中运行代码时，我得到：

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a
ReactOwner can have refs. You might be adding a ref to a component
that was not created inside a component's `render` method, or you have
multiple copies of React loaded (details:
https://reactjs.org/warnings/refs-must-have-owner.html).
该项目在其依赖项中具有React

，我正在导入的库在其自己的package.json中将React作为devDependency

我已经阅读了这个问题，问题似乎源于 React 的 2 个副本，我已经 rm -rf'ed 我的node_modules目录清除了我的缓存并重新安装了所有内容。或者你不能在渲染函数之外添加 ref 属性，我没有这样做。

在我的库中 Webpack 配置文件中，我定义了两个这样的外部

externals: {
  'react': {
    'commonjs': 'react',
    'commonjs2': 'react',
    'amd': 'react',
    // React dep should be available as window.React, not window.react
    'root': 'React'
  },
  'react-dom': {
    'commonjs': 'react-dom',
    'commonjs2': 'react-dom',
    'amd': 'react-dom',
    'root': 'ReactDOM'
  }
},

这解决了这个问题，React 和 ReactDOM 不会被编译到我的捆绑包中，但可以在库中引用，所以当它在项目中使用时，它可以获取项目的 React/ReactDOM 副本。

相关文章：