Question

在我以前的Meteor应用程序中，使用browserify和React，一切正常，直到我切换到meteor webpack。

我在我的meteor应用程序中使用react-select并且它工作得很好但是使用browserify我可以阻止多个反应来自加载，这可以防止我现在遇到的错误：

错误：不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向未在组件的render方法内创建的组件添加引用，或者您已加载多个React副本（详细信息：https://fb.me/react-refs-must-have-owner）。

我的package.json看起来：

...

"dependencies": {
    "classnames": "^2.1.3",
    "lodash": "^3.10.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-mixin": "^2.0.1",
    "react-select": "^1.0.0-beta8"
  },

...

webpack中是否有配置我可以使用外部调用？不完全确定这意味着什么，但评论说要使用：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'
}

Answer 1

由于您使用webpack，您可以添加用于加载react的别名，如下所示：

// In webpack.config.js

  resolve: {
    alias: {
      react: path.resolve('node_modules/react'),
    },
  },

这可以防止addComponentAsRefTo(...)错误并使我们的构建再次成功。但是，由于某些原因，测试构建仅在我们的CI环境中失败，因为它无法解析node_modules/react路径。不过，我认为你不太可能遇到这个特殊问题。

Answer 2

对我有用的东西是：

卸载所有与react相关的全局安装包（create-react-app，react-native，react等）

然后：rm -rf node_modules

然后：使用npm install代替纱线安装

考虑使用crate-react-app创建的应用程序并弹出

Answer 3

如果您使用Web Pack，则可以通过将以下内容添加到Webpack配置中来对其进行修复因为不要捆绑反应或反应dom

externals: { 'react': 'React', 'react-dom': 'ReactDOM' }

Answer 4

就我而言，我正在构建一个单独的npm模块，然后使用npm link ../some-library将其作为本地的另一个项目中的库包含在内。当我运行父项目时，该库中的一个模块导致了这个错误。

当我遇到这个错误时，我的解决方案是通过将以下内容添加到其webpack.config.js的module.exports来防止反应和反应包含在某些库包输出中：

externals: {
    react: 'react',
    'react-dom': 'react-dom'
}

如何防止多个React副本加载？

4 个答案: