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

Question

我正在编写一个依赖于 :

的 npm 包

"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 反应

Answer 1

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

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

prevent react from being bundled in my module so react can't exist twice

jsx

reactive-programming

reactjs

webpack

umd