Material-ui: 你加载了多个 React 副本

使用 DropDownMenus 时也会发生。 删除 node_modules_material-ui/node_modules/react 也有助于避免错误。

@iceafish @neenaoffline您是否仅在 0.14.1 而不是 0.14.0 上遇到此问题？ 你能告诉我是哪个代码导致了错误或者它抱怨的是什么组件吗？

这可能与#2802 相关。

如果其中一个能够尝试master ，那也会有帮助。

我在 0.14.2 中使用 Datepicker 组件（在节点 4.2.3/npm 2.14.7 中）面临相同的错误消息。
我正在使用 ES6 导入语法，我相信https://github.com/callemall/material-ui/issues/2802可能是问题的根本原因，但安装 babel-plugin-add-module-exports 并插入它对我的 browserify 捆绑任务似乎没有帮助。
我已经建立了目前在 material-ui 的 master 分支上并遇到了同样的问题。
如果我可以提供更多信息来帮助调查，请告诉我。

@mlarcher我试着在0.14.2上写一个测试DatePicker ，看起来它在我这边工作。 您在导入时遇到错误吗？ 还是在渲染？ 你能告诉我你的进口声明吗？

此外，您的项目中不应该需要babel-plugin-add-module-exports （或者更具体地说，您不应该在 material-ui 组件中需要它）。 我们已经在 0.14.2 中将它作为 material-ui 构建的一部分包含在内。

也许尝试删除您的node_modules并重新安装。

我已经尝试删除 node_modules 并重新安装，但没有成功。
这是完整的错误输出：

Uncaught 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).

invariant @ invariant.js:39
ReactOwner.addComponentAsRefTo  @ ReactOwner.js:67
attachRef @ ReactRef.js:23
ReactRef.attachRefs @ ReactRef.js:42
attachRefs  @ ReactReconciler.js:21
assign.notifyAll  @ CallbackQueue.js:65
ON_DOM_READY_QUEUEING.close @ ReactReconcileTransaction.js:81
Mixin.closeAll  @ Transaction.js:202
Mixin.perform @ Transaction.js:149
Mixin.perform @ Transaction.js:136
assign.perform  @ ReactUpdates.js:86
flushBatchedUpdates @ ReactUpdates.js:147
wrapper @ ReactPerf.js:66
NESTED_UPDATES.close  @ ReactUpdates.js:45
Mixin.closeAll  @ Transaction.js:202
Mixin.perform @ Transaction.js:149
assign.perform  @ ReactUpdates.js:86
flushBatchedUpdates @ ReactUpdates.js:147
wrapper @ ReactPerf.js:66
Mixin.closeAll  @ Transaction.js:202
Mixin.perform @ Transaction.js:149
ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62
enqueueUpdate @ ReactUpdates.js:176
enqueueUpdate @ ReactUpdateQueue.js:24
ReactUpdateQueue.enqueueCallback  @ ReactUpdateQueue.js:108
ReactComponent.setState @ ReactComponent.js:67
openDialog  @ date-picker.js:244
(anonymous function)  @ date-picker.js:273
setTimeout (async)    
_handleInputTouchTap  @ date-picker.js:272
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:71
executeDispatch @ EventPluginUtils.js:79
executeDispatchesInOrder  @ EventPluginUtils.js:102
executeDispatchesAndRelease @ EventPluginHub.js:43
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54
forEachAccumulated  @ forEachAccumulated.js:23
EventPluginHub.processEventQueue  @ EventPluginHub.js:259
runEventQueueInBatch  @ ReactEventEmitterMixin.js:18
ReactEventEmitterMixin.handleTopLevel @ ReactEventEmitterMixin.js:34
handleTopLevelWithoutPath @ ReactEventListener.js:93
handleTopLevelImpl  @ ReactEventListener.js:73
Mixin.perform @ Transaction.js:136
ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates  @ ReactUpdates.js:94
ReactEventListener.dispatchEvent  @ ReactEventListener.js:204

错误似乎在渲染（但我不完全确定）。
这是用法的样子：

import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import DatePicker from 'material-ui/lib/date-picker/date-picker';
// injectTapEventPlugin needs to be called for datepicker to work!
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

class BoxedInput extends Component {

  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();
    this.props.onAction();
  }

  render() {
    var actionButton = !this.props.onAction ? null : (
      <button
        type="button"
        className="boxedInput_button"
        onClick={this.handleClick}
      >
        <FormattedMessage id={this.props.actionText || 'boxedInput_defaultActionMsg'}/>
      </button>
    );

    var boxedInputLabel = !this.props.label ? '' : (
      <span className="boxedInput_labelText">
        <FormattedMessage id={this.props.label}/>
      </span>
    );

    const input = this.props.type !== 'date' ? (
      <input
        type={this.props.showPassword ? 'text' : this.props.type}
        placeholder={this.props.placeholder}
        className={`boxedInput ${!this.props.type ? '' : `boxedInput--${this.props.type}`}`}
        {...this.props.field}
      />
    ) : (
      <DatePicker
        hintText={this.props.placeholder}
      />
    )

    return (
      <div
        className={`boxedInputWrapper ${!this.props.type ? '' : `boxedInputWrapper--${this.props.type}`} ${this.props.customClass || ''} `}
      >
        <label className="boxedInput_label">
          {boxedInputLabel}
          {input}
          {actionButton}
        </label>
      </div>
    );
  }
}

BoxedInput.displayName = 'BoxedInput';


BoxedInput.propTypes = {
  onAction: PropTypes.func,
  actionText: PropTypes.string,
  customClass: PropTypes.string,
  placeholder: PropTypes.string,
  type: PropTypes.string,
  label: PropTypes.string,
};

export default BoxedInput;

@mlarcher感谢您复制代码。 你可以试试这个作为你的导入吗？

import {DatePicker} from 'material-ui/lib/date-picker';

DatePicker组件当前未默认导出，不确定何时更改...

编辑：实际上，您的代码应该可以工作。 让我再研究一下。

@mlarcher我无法重现这个。 我在 0.14.2 中使用相同的导入语句在我的项目中导入date-picker没有问题。 文档也以相同的方式导入date-picker 。

最大的区别是我（或文档）不使用 browserify。 您能否在 github 上某个我可以克隆和尝试的地方放一个可重现的示例示例？

@newoga ：这是一个显示错误的精简版本：
测试.zip

@mlarcher我建议创建一个项目，其中您的app.jsx就是这样的：

import React from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'material-ui/lib/date-picker/date-picker';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

ReactDOM.render(
  <DatePicker />,
  document.getElementById('mainContainer')
);

我在你的项目中这样做了，但仍然有你的问题。 更具体地说，组件呈现，当您单击组件并出现对话框时，此错误会记录到控制台：

Uncaught 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

我没有确定根本原因，但我无法在基于 webpack 的项目中重现这一点。 我也无法在这个项目的 browserify示例中重现这一点。 我可能会非常仔细地查看您的构建过程，以确保您没有做任何可能意外多次捆绑 React 的事情。 您可以通过 browserify 找到 StackOverflow 的一些帮助，因为我对它不太熟悉。

注意：如果您按照示例进行操作，我刚刚创建了 #2857，因此请确保在运行之前包含这些内容。

嗨，大家好。 我自己的项目遇到了这个问题，但我解决了。

问题是 "material-ui" 0.14.2 想要 React "^0.14.6" 但我的项目使用的是 React 0.14.3，所以npm安装了一个额外的 React 副本，仅用于material-ui 。

当我将我的项目升级到 React 0.14.6，然后重新安装material-ui ， npm使用顶级 React 作为“peerDependency”。 现在 React 只加载一次——问题解决了！

@crantila这真的很奇怪。 为什么 npm 为 material-ui 安装了一个副本？ React 是 material-ui 的对等依赖。 npm 不会自动安装对等依赖项。 你用的是什么版本的 npm？

@newoga我生成 libs.js 包的方式确实存在问题。 可能是因为bundle.js中的文件是从我的package.json的依赖中列出的，即使'material-ui'是一个显式依赖，'material-ui/lib/date-picker/date -picker' 不是。 或者，这可能是我的代码中 ES6 导入所需的反应和材料用户界面中的 require() 调用的问题。 无论如何，我必须找到更好的方法来处理这种情况。

尽管如此，当我停止从捆绑任务中排除库并从同一个捆绑中加载所有 js 时，我不再有不变错误，但现在日历打开但没有任何内容：

不过，我想这是另一个问题，所以我会检查它是否已经被引用，如果没有，则打开一张新票。

编辑：实际上，这个问题只是由于打开 chrome 开发工具时日期选择器调整大小的方式。 没什么大不了的，即使它可以改进。 问题已为我解决，感谢您的帮助@newoga

@alitaheri我正在使用npm 2.14.12，它与“稳定”节点版本一起提供。 有一个关于不会自动安装对等依赖项的警告，但它仍然会安装它们。

似乎有几种不同的方法可以导致加载多个 React 版本，它们都会导致material-ui无法正常工作。 material-ui是否有可能检测到这种情况何时发生，并在控制台中打印一条消息，其中包含指向（wiki？）页面的链接，其中包含有关可能导致问题的更多信息？

请从库的依赖项中删除 React。

检查这个反应路由器的优秀例子

React 被用作 devDependency。

为你们所做的出色工作干杯！

聚苯乙烯
如果你想避免与通过材料的UI使用的反应版本依赖的问题，然后用“peerDependencies”属性这样

React 应该从 lib 的依赖项中删除。

你的意思是？

@oliviertassinari我不得不从 material-ui 中删除 react 以摆脱“......或者你加载了多个 React 副本”

*在我本地的 dep 树中

使用 npm v3+ 我从未遇到过这个问题。 您可以更新您的 npm 并重试吗？

React 也只是 material-ui 中的一个 devDependency，但这会导致
如果您使用的是旧版本的 npm，则会发生冲突，因为它会安装
无论如何都要复制两个副本，而不会试图避免重复。 我相信这个
在 npm 3 中更改。

https://github.com/npm/npm/blob/master/CHANGELOG.md
http://blog.npmjs.org/post/91303926460/npm-cli-roadmap-a-periodic-update

2016 年 1 月 12 日，星期二，上午 11:23，Ali Taheri Moghaddar <
[email protected]> 写道：

使用 npm v3+ 我从未遇到过这个问题。 你能更新你的 npm 吗？
再试一次？

—
直接回复此邮件或在 GitHub 上查看
https://github.com/callemall/material-ui/issues/2818#issuecomment -170805616
.

尼娜

直到最近我才使用 npm 2，我没有问题。 我们在 package.json 的两个地方将 react 声明为“依赖项”。
曾经作为peerDependency 。 这使得 npm 2 安装在根 node_modules 上做出反应，所以这应该不是问题。
我们还将其声明为devDependency ，在您的项目目录中进行 npm 安装期间，它会被忽略。
我们如何重现这个问题？

我删除了 node_modules 并重新安装，现在一切正常。
不过我会考虑升级到 npm3。

@oliviertassinari
我用relay-starter-kit 开始了我的项目。 当时它使用react和react-dom精确版本 0.14.3。 当我将模块material-ui到我的项目时，React Dev Tools（chrome 扩展）抱怨加载了多个 React 版本。 这是我检查时发现的：

$ npm list react
├─┬ [email protected]
│ └── [email protected] 
└── [email protected] 

$ node -v
v4.2.4
$ npm -v
2.14.12

当我升级到 npm v3 时，npm 本身通过保留react的单一版本解决了这个问题。 但是，据我所知， relay目前绑定到 npm v2。 因此，在material-ui使用 npm v2 的解决方案会很好！

我在 Meteor 1.3.beta4 和 npm 2.14.14 中遇到了类似的问题。

我也尝试过 NPM3，但是当我启动应用程序时，控制台告诉我无法找到“react”，即使它包含在meteor add react

我有一个名为 ui 的项目，它使用 material-ui 作为基础，然后我将 ui 导入到另一个项目中。 当我将某些组件导入我的 ui 项目时，错误发生在我身上：

当包的大小像这样增加时，就会发生这个错误。

与此组件相同：ListItem、MenuItem、IconButton...

通过删除 material-ui 中的 node_modules/react 来尝试上述解决方案，然后重新启动我的应用程序，它起作用了！ 非常感谢！

现在，如果我的同事 git clone 我的应用程序并运行 npm install，他们的 material-ui 副本将有反应。 告诉他们“嘿，现在删除这个目录”不是一个好主意。 我应该如何更新我的项目，以便在安装 material-ui 时，它不会有 react 节点模块？

同样的问题：npm 3.7.1，react ^0.14.0，material-ui ^0.14.4，webpack ^1.12.9
没有node_modules中的./material-ui可以删除，即使作为临时解决方法也是如此。

npm list react产生-- [email protected] 。

代码调用：

import RaisedButton = require('material-ui/lib/raised-button');
import Dialog = require('material-ui/lib/dialog');
import FlatButton = require('material-ui/lib/flat-button');

以下webpack.config.js方法失败：
1.

  externals: {
    "react": "react",
  }

2.

plugins: [
    new webpack.optimize.CommonsChunkPlugin("react", "react.bundle.js")
]

3.

resolve: {
        alias: {
            "react": __dirname + '/node_modules/react',
        }
    }

症状：在构建时，会创建一个包含react的膨胀包文件； 在运行时，我收到一条错误消息： "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)."

有任何想法吗？ 现在我会采取任何解决方法。

升级到 npm 3.7.1 为我解决了这个问题。 我同意，由于 npm 与 peerDependencies 的问题，react 不应成为该项目的依赖项或 peerDependency。

有人正在处理这个问题吗？
material-ui 坚持安装 react 0.14.7 即使我的项目 package.json 中已经有 react 0.14.6，所以我们最终在控制台中出现了两个版本和错误。

@mlarcher不幸的是，唯一的“修复”是修复依赖项的完成方式。
您可能正在使用安装 peer 的 npm 版本（少于 3 个）
依赖关系。 如果您升级到最新版本，则可以解决此问题
因为 material-ui 的 react 版本不会安装 bc 更新
npm 的版本不安装 peer deps。

我相信反应应该只是一个开发依赖。 对等依赖是一个
用户的噩梦，几乎不应该使用 IMO。
2016 年 2 月 11 日星期四上午 1 点 13 分 mlarcher [email protected]写道：

有人正在处理这个问题吗？
material-ui 坚持安装 react 0.14.7 即使我已经有了
在我的项目 package.json 中反应 0.14.6，所以我们最终有两个版本和
控制台中的错误。

—
直接回复此邮件或在 GitHub 上查看
https://github.com/callemall/material-ui/issues/2818#issuecomment -182775790
.

我相信反应应该只是一个开发依赖。

我不相信https://github.com/rackt/react-redux/blob/master/package.json#L98。
我不明白npm@2发生了什么

@ajsharp让我

RKS 的节点引擎（在 yeoman 生成器中）是：
"engines": { "node": ">=5.0 <6", "npm": ">=3.3 <4" }

我用：
"material-ui": "0.14.4", "react": "0.14.7",
并且工作正常。

@oliviertassinari @newoga @alitaheri
我今天遇到了同样的问题，我从来没有在 material-ui 包中安装过 React。 所以我发现这是另一个可能导致这个问题的东西，它是 material-ui 无法解决的（并且不是它的错误）。 许多人通常将 bundle 与他们的应用程序代码在与 bundle 不同的文件中进行反应。 问题是某些 react add-ons 和 react utils 只是这样的代码：

module.exports = require('react/lib/ReactTransitionGroup');

如果我们查看上面所需模块的代码，我们会发现如下语句：

var React = require('./React');

事实证明 _./React_ 实际上是 react 包的入口点。 换句话说，一些 React 模块从内部再次导入 React。 因此，如果您不将具有此类声明的附加组件声明为应用程序包中的外部组件，并将它们与包含 React 的包放在一起，browserify（可能还有 webpack）将再次导入 React 代码，因此您最终得到多个副本。

我会尽量说清楚，因为很难解释：
使用b.external('react')在浏览器中使用externals: {'react': 'react'}使 React 成为外部资源不会对以下导入产生任何影响： var React = require('./React');

演示

:scream: :scream: 天哪，这是一个伟大的发现！

@felipethome您认为我们应该将其添加到我们的文档中吗？ 或者 webpack/browserify 应该这样做吗？ 这确实是一个很难追查的问题！

有同样的问题。 升级反应到 0.14.7 解决了它。

@alitaheri我相信我们应该将它添加到 MUI 文档中，你呢？
（实际上，我也认为 React 应该将其添加到他们的中，就像提示说一些附加组件会导入 React，但我认为他们不会）

你呢？

添加那个..给我？ ：笑：

我认为这是 browserify 和 webpack 的设计问题。 我的意思是如果require('react')是外部的，那么require('react/lib/...') ！

添加那个..给我？

好吧，你已经吃、睡和呼吸了 React 了，为什么不呢？ :laughing: 我建议纹身，但这会让更新很痛苦（字面意思！）

好吧，你已经吃、睡和呼吸了 React 了，为什么不呢？

:laughing: :laughing: :laughing:

我建议纹身，但这会使更新变得痛苦（字面意思！）

我可以纹身一个链接回到 mui 文档，链接不需要更新:laughing:: :laughing:

@felipethome将纹身*cough*问题放在 webpack 存储库上有意义吗？ 我不认为这对他们来说很难解决，但我相信这是一个关键的问题。

我建议纹身，但这会让更新变得痛苦

:笑: :笑:

@alitaheri我当然可以添加，但我不知道您希望我在自述文件中的何处添加该信息？

将纹身 _cough_ 问题放在 webpack repo 上有意义吗？

也许第一个设计缺陷来自 React，为什么他们的附加组件共享 React 项目的相同存储库？

我查看了 browserify 代码，他们可以将 require.resolve() 与用户声明的外部对象一起使用，这将外部化模块名称及其主文件，但随后我们开始在其他部分遇到问题。 我仍然不确定它是否容易解决，或者他们（webpack/browserify）是否会认为这是一个问题，但我们可以尝试。

是的……也许先从反应开始？ 我的意思是你是对的，这是一个缺陷！

我实际上是在 3 天前做的，但他们似乎并不担心这个问题

不能保证它会有所帮助，但您可以尝试跟进 PR……通常比问题更少，因此它们会引起更多关注。

我无法发送正确的 PR，因为这是一个项目级别的问题，但我可以发送一个有意义的 PR，这样我就可以了解他们的想法，以及他们是否认为我错了。 但是想一想，您正在开发项目 X，而为了开发 X，您正在导入 X。

您的材料 ui 依赖项可能与您的反应版本具有不同的反应版本。 这样 npm 就会让 material-ui 加载不同的版本。

卸载并执行新的npm install对我有用。

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

{
  "name": "react-app",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "axios": "^0.9.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.0.14",
    "formsy-material-ui": "^0.3.8",
    "formsy-react": "^0.17.0",
    "history": "^1.17.0",
    "material-ui": "^0.14.4",
    "react-router": "^1.0.3",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.0"
  },
  "peerDependencies": {
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-tap-event-plugin": "^0.2.0"
  },
  "devDependencies": {},
  "scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot --host localhost --port 4444",
    "prod": "webpack --env=production"
  },
  "author": "",
  "license": "ISC"
}

或者，如果您使用 webdev 然后添加打击代码，将解决该问题。

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

对我们来说，问题是我们收缩包装了 0.14.7，而 material-ui 0.15-alpha-2 没有收缩包装，所以它拉动了反应 0.14.8。

如果 deps 是收缩包装的或更具体的版本，那就太好了。

@mlarcher @ahmadferdous
也许这会有所帮助。
https://github.com/npm/npm/pull/12290

@haradakunihiko ：这个问题与 npm-

简单说一下，我们的情况如下：
我们的 package.json 中有一个 0.14 版本的 React，并且npm@2在 node_modules/material-ui 中安装了相同次要的更新版本，而不是知道已经存在满足 material-ui 要求的对等依赖项。

@mlarcher实际上，我肯定处于相同的情况，但是使用 react-bootstrap。 React-bootstrap 对 react 有对等依赖，它在 react-bootstrap 模块中安装了较新版本的 react。
这很可能是因为收缩包装（https://github.com/npm/npm/issues/5135#issuecomment-207684987）。 这也可能发生在 material-ui 上。
我认为这种问题不是由单个问题引起的，但使用npm@2收缩包装将是原因之一。
无论如何，将 npm 更新到 ver.3 将是最好的解决方案（遗憾的是，由于某种原因我无法更新......）。

我们在开发使用 Material UI 的通用 React 组件库时也遇到了同样的问题。 在尝试了许多建议的不同解决方案后，以下对我们有用：

在我们的 webpack 配置中添加以下内容：

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

感谢@mdarif的提示！

制作别名解决了我的问题@cody-lettau @mdarif无论如何谢谢

@felipethome我遇到了同样的问题，将 react 指定为./React的导入。 你是怎么解决的？ 仅供参考，我正在使用 grunt 和 browserify。

@arzavj我不使用 grunt，但看看这个seed的 gulpfile.js 。 也许它可以帮助你。

知道了！ 谢谢！

@cody-lettau 您是否将其添加到库或使用该库的项目的 webpack 配置中？

@sunny-g 它已添加到我们正在构建的库中。 这个库使用了 material-ui。

感谢您的及时回复！ 我最终在库的 webpack.config.js 中使用了externals并修复了错误。

felipethome 于 2 月 23 日发表评论
感谢@felipethome的评论和 github 示例，您解决了我的问题！ 这是“react-addons-transition-group”没有列在浏览器的外部依赖项（在 React 旁边等）中。 在没有明确指出问题所在的情况下，某些事情可能会出现如此可怕的错误，这有点可怕。 再次感谢！

我的问题有点不同。 我有 2 个不同的 Webpack 包，并且都在使用 React。 我在第二个包中的一个 NPM 模块做了一个require('react')和require('react-dom') 。

我通过将以下内容添加到我的第二个包的 Webpack 配置中来修复它

externals: {
  // Don't bundle react or react-dom
  'react': 'React',
  'react-dom': 'ReactDOM',
}

我遇到了同样的问题，我通过删除所有节点模块并使用 yarn 再次安装所有依赖项来解决它。