reactjs - 防止反应被捆绑在我的模块中，所以反应不能存在两次

Question

我正在编写一个依赖于：

"peerDependencies": {
  "react": "15.4.1",
},
"dependencies": {
  "classnames": "2.2.5",
  "react-onclickoutside": "5.8.3",
  "styled-components": "1.1.2"
}

我已将它们添加为对等依赖项。

我已经创建了一个 webpack 构建，并且我已经生成了一个我想在我的应用程序中导入的“umd”模块。

问题是模块中依赖于 react-onclickoutside 的组件抱怨2 React 的存在。

这是可以切换并生成此错误的代码：

DropDown = onClickOutside(DropDown, {
  handleClickOutside(instance) {
    return instance.closeMenu;
  },
});

这给了我这个错误：

Error: 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: ....).(…)

如果我查看我的 UMD 模块，我可以看到我的对等依赖项是捆绑的，这可能是我的应用程序中现在有两个 React 的原因。

我想知道如何防止 webpack 在我的模块中捆绑 React react

Answer 1

您可以使用 webpack 中的externals功能。基本上它将创建 UMD 模块而不捆绑 React，并假设它将在其他地方提供