Question

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

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

在我的新项目中，我已经在我的package.json中定义了库的回购路径，它被NPM拉下来，Webpack成功地将它编译到我的包中，但是当我在浏览器中运行代码时，我得到了：

未捕获的不变违规：addComponentAsRefTo（...）：仅限a ReactOwner可以有refs。您可能正在为组件添加引用这不是在组件的render方法中创建的，或者你有加载了多个React副本（详情： https://fb.me/react-refs-must-have-owner）。

该项目的React依赖于它，我引入的库将React作为devDependency自己的package.json。

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

Answer 1

在我的库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没有被编译到我的包中但可以在库中引用，所以当它在项目中使用时它可以拿起项目＆＃39; s React / ReactDOM的副本。

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

1 个答案: