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 и подключаю его. к моей задаче просмотра пакета, похоже, не помогло.
Я построил, что в настоящее время находится в основной ветке material-ui, и у меня такая же проблема.
Пожалуйста, дайте мне знать, если я могу предоставить дополнительную информацию, чтобы помочь в расследовании.

@mlarcher Я попытался написать тест DatePicker на 0.14.2 и похоже, что он работает на моей стороне. Вы получаете сообщение об ошибке при импорте? Или на рендере? Не могли бы вы показать мне ваше заявление об импорте?

Также вам не нужно babel-plugin-add-module-exports в вашем проекте (или, точнее, он вам не понадобится для компонентов material-ui). Мы уже включаем его как часть сборки material-ui в 0.14.2.

Может быть, попробуйте удалить свой 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 Я не могу это воспроизвести. У меня нет проблем с импортом date-picker в мои проекты в 0.14.2 с тем же оператором импорта. Документы также импортируют date-picker .

Самая большая разница в том, что я (или документация) не использую browserify. Не могли бы вы разместить где-нибудь на github образец воспроизводимого примера, который я могу клонировать и попробовать?

@newoga : вот урезанная версия, которая показывает ошибку:
test.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

Я не определил основную причину, но я не могу воспроизвести это в своих проектах на основе веб-пакетов. Я также не могу воспроизвести это в примере просмотра этого проекта. Я бы, вероятно, очень внимательно посмотрел на ваш процесс сборки, чтобы убедиться, что вы не делаете ничего, что могло бы случайно связать React несколько раз. Возможно, вам удастся найти помощь StackOverflow с помощью browserify, поскольку я не слишком знаком с ним.

Примечание: если вы следуете примеру, я только что создал # 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 () в meterial-ui. В любом случае, мне нужно будет найти лучший способ справиться с подобными сценариями.

Тем не менее, когда я перестаю исключать библиотеки из задачи объединения и загружаю все js из одного пакета, у меня больше нет инвариантной ошибки, но теперь календарь открывается, но не имеет содержимого:

Я предполагаю, что это еще одна проблема, поэтому я проверю, есть ли ссылка на нее, и открою новую заявку, если это не так.

Изменить: на самом деле эта проблема связана только с тем, как изменяется размер datepicker при открытии инструментов chrome dev. Ничего особенного, даже если это можно улучшить. Проблема решена для меня, спасибо за помощь @newoga

@alitaheri Я использую npm 2.14.12, который поставляется со "стабильной" версией Node. Есть предупреждение о том, что одноранговые зависимости не будут установлены автоматически, но они все равно их устанавливают.

Похоже, есть несколько разных способов вызвать загрузку нескольких версий React, и все они приводят к тому, что material-ui не работает. Может ли material-ui определить, когда это происходит, и распечатать в консоли сообщение, содержащее ссылку на (вики?) Страницу с дополнительной информацией о том, что может вызвать проблему?

Пожалуйста, удалите React из зависимостей библиотеки.

Проверьте этот отличный пример реактивного маршрутизатора

Вместо этого React используется как devDependency.

Приветствую вас, ребята, за хорошую работу!

PS
Если вы хотите избежать проблем с зависимостями, связанных с версией реакции, используемой material-ui, используйте свойство peerDependencies как таковое.

React следует удалить из зависимостей библиотеки lib.

Что ты имеешь в виду?

@oliviertassinari Мне пришлось удалить

* в моем локальном дереве деп

С npm v3 + я никогда не сталкивался с этой проблемой. Не могли бы вы обновить свой npm и попробовать еще раз?

React - это только devDependency в material-ui, но это вызывает
конфликт, если вы используете старую версию npm, потому что она установит
в любом случае две копии, не пытаясь избежать дублирования. Я верю в это
изменено в npm 3.

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

Во вторник, 12 января 2016 г., в 11:23, Али Тахери Могхаддар <
[email protected]> написал:

С npm v3 + я никогда не сталкивался с этой проблемой. Не могли бы вы обновить свой npm и
Попробуйте снова?

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/callemall/material-ui/issues/2818#issuecomment -170805616
.

Нина

До недавнего времени я использовал npm 2, и у меня не было проблем. Мы объявляем реакцию как «зависимость» в двух местах нашего package.json.
Один раз как peerDependency . Это заставляет установку npm 2 реагировать на корневой node_modules, так что это не должно быть проблемой.
Мы также объявляем его как devDependency , который просто игнорируется во время установки npm из каталога вашего проекта.
Как мы можем воспроизвести эту проблему?

Я удалил node_modules и переустановил, теперь все в порядке .
Тем не менее, я подумаю о переходе на npm3.

@oliviertassinari
Свой проект я начал с релейно-стартового комплекта. В то время использовалась точная версия 0.14.3 react и react-dom . Когда я добавил в свой проект модуль material-ui , React Dev Tools (расширение chrome) пожаловался на загрузку нескольких версий реакции. Вот что я обнаружил, когда проверил:

$ 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, но когда я запускаю приложение, консоль сообщает мне, что 'response' не может быть найден, даже если он включен с meteor add react

У меня есть проект под названием ui, который использует material-ui в качестве основы, затем я импортирую ui в другой проект. Ошибка возникает у меня, когда я импортирую определенные компоненты в свой проект пользовательского интерфейса:

Эта ошибка возникает при таком увеличении размера пакета.

То же самое и с этими компонентами: ListItem, MenuItem, IconButton ...

Попробовал решение выше, удалив node_modules / react внутри material-ui, а затем перезапустил мое приложение, оно сработало! Большое спасибо!

Теперь, если мои товарищи по офису git клонируют мое приложение и запускают npm install, их копия material-ui отреагирует. Не рекомендуется говорить им: «Эй, а пока удалите этот каталог». Как мне обновить мой проект, чтобы при установке material-ui в нем не было модуля реагирующего узла?

Такая же проблема здесь: 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 устранило проблему для меня. Я согласен, реакция не должна быть зависимостью или peerDependencies этого проекта из-за проблем, которые npm имеет с peerDependencies.

Кто-нибудь работает над проблемой?
material-ui настаивает на установке react 0.14.7, хотя у меня уже есть response 0.14.6 в моем проекте package.json, поэтому мы получаем две версии и две ошибки в консоли.

@mlarcher, к сожалению, единственное «исправление» - это исправление зависимостей.
Вероятно, вы используете версию npm (менее 3), которая устанавливает одноранговую
зависимости. Если вы обновитесь до последней версии, вы можете обойти эту проблему.
потому что версия реакции material-ui не будет установлена ​​bc новее
версии npm не устанавливают peer deps.

Я считаю, что реакция должна быть только зависимостью разработчиков. Одноранговые зависимости - это
кошмар для пользователей и практически никогда не должен использоваться ИМО.
11 февраля 2016 г. в 01:13 mlarcher [email protected] написал:

Кто-нибудь работает над проблемой?
material-ui настаивает на установке React 0.14.7, хотя у меня уже есть
React 0.14.6 в моем проекте package.json, поэтому мы получаем две версии и
ошибки в консоли.

-
Ответьте на это письмо напрямую или просмотрите его на 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 wht меня озадачивает, так это то, что

Узловой двигатель для 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. Итак, я обнаружил, что это еще одна вещь, которая может вызвать эту проблему, и это то, что material-ui не может решить (и не является его неисправностью). Многие люди обычно связывают реакцию в файле, отличном от пакета, со своим кодом приложения. Проблема в том, что некоторые надстройки реакции и утилиты реакции представляют собой просто такой код:

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

И если мы посмотрим на код необходимого модуля выше, мы найдем такую ​​инструкцию:

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

Оказывается, _./React_ на самом деле является точкой входа в пакет react. Другими словами, некоторые модули React снова импортируют React изнутри. Поэтому, если вы также не объявляете надстройки, которые имеют такое объявление, как внешние элементы из пакета приложения и не объединяете их с пакетом, содержащим React, browserify (и, возможно, также webpack) снова импортирует код React, поэтому вы получить несколько копий.

Я постараюсь прояснить это, потому что это сложно объяснить:
Сделать React внешним ресурсом в браузере с помощью b.external('react') или в webpack с externals: {'react': 'react'} не будет иметь никакого эффекта при импорте, например: var React = require('./React');

Демо

: scream:: scream: Боже мой, это отличная находка!

@felipethome Думаете, нам стоит добавить это в нашу документацию? или webpack / browserify должен это делать? эту проблему действительно очень сложно отследить!

Была такая же проблема. Обновление React до 0.14.7 решило эту проблему.

@alitaheri Я считаю, что мы должны добавить это в документацию MUI, а вы?
(и на самом деле, я также думаю, что React должен добавить это к своим, как подсказка о том, что некоторые надстройки импортируют React, но я не думаю, что они это сделают)

а вы?

добавить это .. ко мне? :смеющийся:

Я думаю, что это проблема дизайна с браузером и веб-пакетом. Я имею в виду, что если require('react') является внешним, то require('react/lib/...') тоже!

добавить это .. ко мне?

Что ж, вы уже едите, спите и дышите, уже реагируйте, так почему бы и нет? : смеясь: Я бы предложил татуировку, но это сделало бы обновления болезненными (буквально!)

Что ж, вы уже едите, спите и дышите, уже реагируйте, так почему бы и нет?

: смех:: смех:: смех:

Я бы предложил татуировку, но это сделало бы обновления болезненными (буквально!)

Я мог бы татуировать ссылку на mui docs, ссылка не требует обновлений: смеется:: смеется:

@felipethome Имеет ли смысл поместить проблему татуировки *cough* в репозиторий webpack? Я не думаю, что для них это сложно исправить, но я считаю, что это очень важно.

Я бы предложил татуировку, но это сделало бы обновления болезненными

: смеясь:: смеясь:

@alitaheri Я, конечно, могу добавить, но я точно не знаю, куда вы хотите, чтобы я добавил эту информацию в README?

Имеет ли смысл поместить проблему с татуировкой _cough_ в репозиторий webpack?

Может быть, первый недостаток дизайна связан с React, почему их надстройки используют тот же репозиторий, что и проект React?

Я посмотрел на код просмотра, они могли использовать require.resolve () с внешними объектами, объявленными пользователем, которые будут экстернализировать имена модулей и их основные файлы, но затем у нас начинаются проблемы в других частях. Я все еще не уверен, легко ли это решить или они (webpack / browserify) сочтут это проблемой, но мы можем попробовать.

Ага ... Может, сначала начнем с реакции? Я имею в виду, что вы правы, что ЕСТЬ недостаток!

На самом деле я сделал это 3 дня назад, но они, похоже, не особо обеспокоены этой проблемой

Нет гарантии, что это поможет, но вы можете попробовать продолжить с PR ... обычно их меньше, чем проблем, поэтому они привлекают немного больше внимания.

Я не могу отправить правильный PR, потому что это проблема на уровне проекта, но я могу отправить такой, который имеет смысл, чтобы я мог видеть, что они думают, и считают ли они, что я ошибаюсь. Но подумайте, вы разрабатываете проект X, а для разработки X вы импортируете X.

Вероятно, ваша материальная зависимость пользовательского интерфейса имеет другую версию реакции, чем ваша версия реакции. Так что npm позволит материалу-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 не была упакована в термоусадочную пленку, поэтому она вытащила React 0.14.8.

Было бы неплохо, если бы описания были упакованы в термоусадочную пленку или более конкретно о версиях.

@mlarcher @ahmadferdous
может это поможет.
https://github.com/npm/npm/pull/12290

@haradakunihiko : эта проблема связана с npm-shrinkwrap, который не задействован в проблемном сценарии, поэтому мне интересно, может ли это сработать в нашем случае. Я должен попробовать, но пока мы перешли на npm3, чтобы избежать этой проблемы.

Чтобы было понятно, наша ситуация следующая:
У нас есть версия React 0.14 в нашем package.json, а npm @ 2 устанавливает более новую версию того же второстепенного в node_modules / material-ui вместо того, чтобы знать, что одноранговая зависимость, удовлетворяющая требованиям material-ui, уже присутствует.

@mlarcher На самом деле, я точно в той же ситуации, но с реакцией-бутстрапом. React-bootstrap имеет одноранговые зависимости для реакции и устанавливает более новую версию реакции внутри модуля response-bootstrap.
И, скорее всего, из-за термоусадочной пленки (https://github.com/npm/npm/issues/5135#issuecomment-207684987). То же самое могло произойти и с material-ui.
Я думаю, что проблема такого рода не вызвана какой-то одной проблемой, но одной из причин было бы использование термоусадочной пленки с npm @ 2 .
В любом случае, обновление npm до версии 3 было бы лучшим решением (и, к сожалению, я не могу выполнить обновление по какой-то причине ...).

Мы наблюдали эти же проблемы при разработке общей библиотеки компонентов реакции, в которой использовался UI материала. После того, как мы попробовали многие из предложенных решений, у нас сработало следующее:

Добавляем ниже в конфигурацию нашего веб-пакета:

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

Спасибо @mdarif за подсказку!

Создание псевдонима решает мою проблему @ cody-lettau @mdarif в любом случае спасибо

@felipethome У меня та же проблема, указание реакции как внешнего ресурса для просмотра не исправило импорт ./React . Как вы это обошли? К вашему сведению, я использую ворчание и просмотр.

@arzavj я не использую ворчание, но дают взглянуть на gulpfile.js этого семени . Может тебе это поможет.

Понятно! Спасибо!

@ cody-lettau вы добавили это в конфигурацию webpack для библиотеки или для проекта, который использует эту библиотеку?

@ sunny-g Он был добавлен в создаваемую нами библиотеку. В этой библиотеке используется material-ui.

Спасибо за оперативный ответ! В итоге я использовал externals в библиотеке webpack.config.js, и это устранило ошибку.

felipethome прокомментировал 23 февр.
Спасибо @felipethome за ваш комментарий и пример на github, вы решили мою проблему! Это была группа «response-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 для повторной установки всех зависимостей.