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

【问题标题】：How Prevent Multiple Copies Of React from Loading?如何防止加载多个 React 副本？
【发布时间】：2016-04-14 21:26:15
【问题描述】：

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

我在我的 Meteor 应用程序中使用 react-select，它运行良好，但使用 browserify 我可以防止加载多个 react 副本，从而防止我现在遇到的这个错误：

错误：不变违规：addComponentAsRefTo(...)：只有 ReactOwner 可以有 refs。您可能正在向未在组件的 `render` 方法中创建的组件添加 ref，或者您加载了多个 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'
}

【问题讨论】：

看起来使用了多个版本的 react。 stackoverflow.com/questions/34236426/how-to-fix-react-error-uncaught-error-invariant-violation-addcomponentasrefto/34358537#34358537

标签： javascript meteor reactjs webpack

【解决方案1】：

由于你使用webpack，你可以添加一个别名来加载react，像这样：

// In webpack.config.js

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

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

【讨论】：

这个解决方案救了我！谢谢。
react: require.resolve('react') 似乎也可以工作，并且应该在react 模块所在的任何地方继续工作。
这可能是您的部门不匹配。卸载您的依赖项，在这种情况下为react-select，检查您的依赖项的react 版本并安装它。再次安装您的依赖项，npm 应该从您的对等依赖项中删除它，而不是创建一个新副本。该文档还解释了可能产生此错误的三种情况reactjs.org/warnings/refs-must-have-owner.html

【解决方案2】：

对我有用的是：

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

然后：rm -rf node_modules

然后：使用 npm install 代替 yarn install

考虑使用 crate-react-app 创建并弹出的 App

【讨论】：

crate-react-app 中的错字；我想你的意思可能是create-react-app

【解决方案3】：

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

当我遇到此错误时，我的解决方案是通过将以下内容添加到其 webpack.config.js 的 module.exports 中来防止 react 和 react-dom 包含在 some-library 捆绑输出中：

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

【讨论】：

将其添加到我的配置时出现“未捕获的 ReferenceError：未定义反应”。

【解决方案4】：

如果您使用 webpack，那么您可以通过将以下内容添加到 Webpack 配置来修复它对于不要捆绑 react 或 react-dom

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

【讨论】：