如何防止多个React副本加载？ [英] How Prevent Multiple Copies Of React from Loading?

问题描述

在我以前的Meteor应用程序中，使用browserify和React，所有工作都在运行，直到我切换到 meteor webpack 。

In my previous Meteor app, using browserify and React, all was working until I switched to meteor webpack.

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

I use react-select in my meteor apps and it worked great but with browserify I could prevent multiple copies of react from loading which prevents this error I'm now having:

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

Error: 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://fb.me/react-refs-must-have-owner).

我的package.json看起来像这样：

My package.json look this:

...

"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中是否有配置我可以使用外部调用？不完全确定这意味着什么，但评论说要使用：

Is there a configuration in webpack I could use something call externals? Not fully sure what that means but a comment said to use:

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

推荐答案

由于您使用webpack，您可以为加载反应添加别名，如下所示：

Since you use webpack, you can add an alias for loading react, like this:

// In webpack.config.js

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

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

This prevented the addComponentAsRefTo(...) error and made our build succeed again. However, for some reason, the testing build failed only on our CI environment as it could not resolve the node_modules/react path. I think it's unlikely that you will encounter this particular problem, though.

这篇关于如何防止多个React副本加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！