Material-ui: لديك نسخ متعددة من React محملة

يحدث أثناء استخدام القائمة المنسدلة أيضًا. تساعد إزالة node_modules_material-ui / node_modules / رد فعل على تجنب الخطأ أيضًا.

iceafishneenaoffline هل تواجه هذه المشكلة فقط على 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-export لمهمة حزمة المتصفح الخاصة بي لا يبدو أنها تساعد.
لقد بنيت كان حاليًا في الفرع الرئيسي لواجهة المستخدم وحصلت على نفس المشكلة.
يُرجى إعلامي إذا كان بإمكاني تقديم مزيد من المعلومات للمساعدة في التحقيق.

mlarcher حاولت كتابة اختبار DatePicker على 0.14.2 ويبدو أنه يعمل بجانبي. هل تلقيت خطأ عند الاستيراد؟ أو على تصيير؟ هل يمكن أن تريني بيان الاستيراد الخاص بك؟

كما يجب ألا تحتاج إلى babel-plugin-add-module-exports في مشروعك (أو بشكل أكثر تحديدًا لا يجب أن تحتاجه لمكونات واجهة المستخدم المادية). لقد قمنا بالفعل بتضمينه كجزء من بناء واجهة المستخدم المادية في 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 بنفس الطريقة أيضًا.

الاختلاف الأكبر هو أنني (أو المستندات) لا أستخدم المتصفح. هل ستكون قادرًا على وضع مثال قابل للتكرار على جيثب في مكان ما يمكنني استنساخه وتجربته؟

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

لم أحدد السبب الجذري ، لكنني غير قادر على إعادة إنتاج هذا في مشاريعي القائمة على webpack. أنا أيضًا غير قادر على إعادة إنتاج هذا في مثال المتصفح الخاص بهذا المشروع. من المحتمل أن ألقي نظرة فاحصة على عملية الإنشاء الخاصة بك للتأكد من عدم قيامك بأي شيء قد يؤدي بطريق الخطأ إلى تجميع 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 مرة واحدة فقط - تم حل المشكلة!

@ كرانتيلا هذا غريب حقًا. لماذا قامت npm بتثبيت نسخة لـ material-ui؟ React هو تبعية نظير لـ Material-ui. لا يقوم npm تلقائيًا بتثبيت تبعيات الأقران. ما هو إصدار npm الذي تستخدمه؟

newoga هناك بالفعل مشكلة في طريقة إنشاء حزمة libs.js. قد يرجع ذلك إلى حقيقة أن الملفات الموجودة في bundle.js مُدرجة من تبعيات package.json الخاصة بي ، وعلى الرغم من أن "material-ui" هي تبعية صريحة ، فإن "material-ui / lib / date-picker / date" -المنتقي ليس كذلك. أو ربما تكون هناك مشكلة في الاستجابة المطلوبة من خلال واردات ES6 في الكود الخاص بي وتتطلب () مكالمات في metial-ui. على أي حال ، سأجد طريقة أفضل للتعامل مع هذا النوع من السيناريوهات.

ومع ذلك ، عندما أتوقف عن استبعاد libs من مهمة التجميع وتحميل جميع js من نفس الحزمة ، لم يعد لدي خطأ ثابت بعد الآن ، ولكن الآن يفتح التقويم ولكن لا يحتوي على أي محتوى:

أعتقد أنها مشكلة أخرى ، لذا سأتحقق مما إذا كان قد تمت الإشارة إليها بالفعل وافتح تذكرة جديدة إذا لم تكن كذلك.

تحرير: في الواقع ، ترجع هذه المشكلة فقط إلى الطريقة التي يغير بها منتقي البيانات حجمها عند فتح أدوات chrome dev. لا توجد أشياء كبيرة ، على الرغم من أنه يمكن تحسينها. تم إصلاح المشكلة بالنسبة لي ، شكرًا على مساعدتك @ newoga

alitaheri أنا أستخدم 2.14.12 npm أمريكيًا ، والذي يأتي مع إصدار العقدة "المستقرة". هناك تحذير حول كيفية عدم تثبيت تبعيات الأقران تلقائيًا ، لكنه لا يزال يقوم بتثبيتها.

يبدو أن هناك عدة طرق مختلفة لتحميل إصدارات متعددة من React ، وكلها تؤدي إلى عدم عمل material-ui . هل يمكن لـ material-ui اكتشاف وقت حدوث ذلك ، وطباعة رسالة في وحدة التحكم تحتوي على ارتباط إلى صفحة (wiki؟) تحتوي على مزيد من المعلومات حول سبب المشكلة؟

من فضلك ، يجب إزالة React من تبعيات lib.

تحقق من هذا المثال الممتاز لجهاز التوجيه التفاعلي

يتم استخدام React على أنها devDependency بدلاً من ذلك.

تحياتي للعمل الجيد الذي تقومون به يا رفاق!

ملاحظة
إذا كنت تريد تجنب مشكلات التبعية المتعلقة بإصدار التفاعل المستخدم بواسطة material-ui ، فاستخدم خاصية "peerDependencies" على هذا النحو

يجب إزالة React من تبعيات lib.

ماذا تقصد بذلك؟

oliviertassinari اضطررت إلى إزالة التفاعل من داخل واجهة المستخدم المادية للتخلص من "... أو لديك نسخ متعددة من React تم تحميلها"

* في بلدي الشجرة المحلية

مع npm v3 + لم أواجه هذه المشكلة مطلقًا. هل يمكنك تحديث npm الخاص بك والمحاولة مرة أخرى؟

React ليست سوى تبعية 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

يوم الثلاثاء 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 بالرغم من ذلك.

تضمين التغريدة
لقد بدأت مشروعي باستخدام مجموعة أدوات الترحيل. في ذلك الوقت ، استخدم الإصدار 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 ولكن عندما أقوم بتشغيل التطبيق ، أخبرتني وحدة التحكم أنه لا يمكن العثور على "رد فعل" حتى لو تم تضمينه مع meteor add react

لدي مشروع يسمى ui يستخدم واجهة المستخدم المادية كقاعدة ، ثم أقوم باستيراد واجهة المستخدم إلى مشروع آخر. حدث الخطأ لي عندما أقوم باستيراد مكونات شهادات لمشروع واجهة المستخدم الخاصة بي:

عندما يزيد حجم الحزمة بهذه الطريقة ، يحدث هذا الخطأ.

نفس هذه المكونات: ListItem ، MenuItem ، IconButton ...

جربت الحل أعلاه عن طريق إزالة node_modules / رد فعل داخل واجهة المستخدم المادية ثم أعد تشغيل تطبيقي ، لقد نجح! شكرا جزيلا!

الآن ، إذا قام زملائي في المكتب باستنساخ تطبيقي وتشغيل تثبيت npm ، فسيكون لنسختهم من واجهة المستخدم المادية رد فعل. ليس من الجيد أن تخبرهم "مرحبًا ، الآن قم بإزالة هذا الدليل". كيف يمكنني تحديث مشروعي بحيث لا يحتوي على وحدة عقدة التفاعل عند تثبيت واجهة المستخدم المادية؟

نفس المشكلة هنا: npm 3.7.1 ، رد فعل ^ 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 تقديم method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner)."

أيه أفكار؟ في الوقت الحالي سآخذ أي حل بديل.

أدت الترقية إلى npm 3.7.1 إلى إصلاح المشكلة بالنسبة لي. أوافق ، لا ينبغي أن يكون رد الفعل تبعية أو تبعية نظير لهذا المشروع بسبب المشكلات التي تواجهها npm مع peerDependencies.

أي شخص يعمل على هذه القضية؟
تصر مادة واجهة المستخدم على تثبيت رد فعل 0.14.7 على الرغم من أن لدي بالفعل رد فعل 0.14.6 في حزمة مشروعي. json ، لذلك انتهى بنا الأمر مع إصدارين وأخطاء في وحدة التحكم.

mlarcher للأسف ، فإن "الإصلاح" الوحيد هو إصلاح كيفية عمل التبعيات.
من المحتمل أنك تستخدم إصدارًا من npm (أقل من 3) يقوم بتثبيت نظير
التبعيات. إذا قمت بالترقية إلى الأحدث يمكنك حل هذه المشكلة
لأن إصدار رد فعل المواد لن يتم تثبيته قبل الميلاد بشكل أحدث
لا تقم إصدارات npm بتثبيت أقسام النظراء.

أعتقد أن رد الفعل يجب أن يكون فقط تبعية لـ Dev. تبعيات الأقران هي أ
كابوس للمستخدمين ويجب ألا تستخدم IMO إلى حد كبير.
في الخميس ، 11 فبراير 2016 الساعة 1:13 صباحًا ، كتب mlarcher [email protected] :

أي شخص يعمل على هذه القضية؟
تصر واجهة المستخدم المادية على تثبيت رد فعل 0.14.7 على الرغم من أن لدي بالفعل
رد فعل 0.14.6 في package.json مشروعي ، لذلك انتهى بنا المطاف بإصدارين و
أخطاء في وحدة التحكم.

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub
https://github.com/callemall/material-ui/issues/2818#issuecomment -182775790
.

أعتقد أن رد الفعل يجب أن يكون فقط تبعية لـ Dev.

لست مقتنعًا https://github.com/rackt/react-redux/blob/master/package.json#L98.
لا أفهم ما الذي يحدث مع npm @ 2. كان ذلك يعمل لدي.

ajsharp wht يحيرني هو أن التفاعل موجود بالفعل على نفس مستوى واجهة المستخدم المادية (لذلك ، كنظير) ، لكن npm لا يزال يقوم بتثبيته (داخل مجلد material-ui). اي فكرة لماذا؟

محرك العقدة لـ RKS (في مولد yeoman) هو:
"engines": { "node": ">=5.0 <6", "npm": ">=3.3 <4" }

أنا أستعمل:
"material-ui": "0.14.4", "react": "0.14.7",
وتعمل بشكل جيد.

oliviertassinarinewogaalitaheri
واجهت نفس المشكلة اليوم ولم أقم مطلقًا بتثبيت رد فعل داخل حزمة واجهة المستخدم المادية. لذلك اكتشفت أن هذا شيء آخر يمكن أن يسبب هذه المشكلة وهو شيء لا يمكن لواجهة المستخدم المادية حله (وليس عيبه). يتفاعل الكثير من الأشخاص عادةً في ملف مختلف عن الحزمة مع رمز التطبيق الخاص بهم. تكمن المشكلة في أن بعض الوظائف الإضافية للتفاعل وأدوات التفاعل ما هي إلا رمز مثل هذا:

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

وإذا نظرنا إلى رمز الوحدة المطلوبة أعلاه ، فسنجد بيانًا مثل هذا:

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

اتضح أن _./React_ هو في الواقع نقطة دخول حزمة التفاعل. بعبارة أخرى ، تقوم بعض وحدات React باستيراد React مرة أخرى من الداخل. لذلك إذا لم تعلن أيضًا عن الوظائف الإضافية التي تحتوي على هذا النوع من التصريح كإعلانات خارجية من حزمة التطبيق الخاصة بك وقمت بتجميعها مع الحزمة التي تحتوي على React ، فسيقوم المتصفح (وربما حزمة الويب أيضًا) باستيراد رمز React مرة أخرى ، لذلك أنت في نهاية المطاف بنسخ متعددة.

سأحاول توضيح الأمر لأنه من الصعب شرح ذلك:
اجعل React موردًا خارجيًا في المتصفح باستخدام b.external('react') أو في حزمة الويب باستخدام externals: {'react': 'react'} لن يكون لها أي تأثير على استيراد مثل: var React = require('./React');

تجريبي

: scream:: scream: يا إلهي ، هذا اكتشاف رائع!

felipethome هل تعتقد أننا يجب أن نضيف ذلك إلى وثائقنا؟ أو يجب أن تقوم حزمة الويب / browserify بذلك؟ هذه في الواقع مشكلة صعبة للغاية لتعقب!

كان لديه نفس المشكلة. ترقية رد الفعل إلى 0.14.7 حلها.

alitaheri أعتقد أنه يجب علينا إضافة ذلك إلى وثائق MUI وأنت؟
(وفي الواقع ، أعتقد أيضًا أن React يجب أن تضيف ذلك إلى إضافاتهم ، مثل نصيحة تقول أن بعض الوظائف الإضافية تستورد React ، لكنني لا أعتقد أنها ستفعل ذلك)

وأنت؟

أضف ذلك .. إلي؟ : يضحك:

أعتقد أن هذه مشكلة في التصميم مع browserify و webpack. أعني أنه إذا كان require('react') خارجيًا ، فحينئذٍ يكون require('react/lib/...') !

أضف ذلك .. إلي؟

حسنًا ، أنت تأكل بالفعل وتنام وتتنفس بالفعل ، فلماذا لا؟ : يضحك: أود أن أقترح وشمًا ، لكن هذا سيجعل التحديثات مؤلمة (حرفيًا!)

حسنًا ، أنت تأكل بالفعل وتنام وتتنفس بالفعل ، فلماذا لا؟

: يضحك:: يضحك:: يضحك:

أود أن أقترح وشمًا ، لكن هذا سيجعل التحديثات مؤلمة (حرفيًا!)

يمكنني رسم رابط يعود إلى مستندات mui ، ولن يحتاج الرابط إلى تحديثات: يضحك: يضحك:

felipethome هل من المنطقي وضع قضية الوشم *cough* على الريبو webpack؟ لا أعتقد أنه من الصعب إصلاح هذا بالنسبة لهم ، لكنني أعتقد أنه أمر بالغ الأهمية.

أود أن أقترح وشمًا ، لكن هذا سيجعل التحديثات مؤلمة

: يضحك:: يضحك:

alitaheri يمكنني أن أضيف بالطبع ، لكنني لا أعرف بالضبط أين تريد مني إضافة هذه المعلومات ، في README؟

هل سيكون من المنطقي وضع قضية الوشم السعال على webpack repo؟

ربما يكون الخلل الأول في التصميم ناتجًا عن React ، فلماذا تشترك إضافاتهم في نفس مستودع مشروع React؟

لقد ألقيت نظرة على كود browserify ، ويمكنهم استخدام request.resolve () مع العناصر الخارجية التي أعلنها المستخدم ، والتي من شأنها إخراج أسماء الوحدات النمطية وملفاتها الرئيسية ، ولكن بعد ذلك بدأنا نواجه مشاكل في أجزاء أخرى. ما زلت غير متأكد مما إذا كان من السهل حلها أو إذا كانوا (webpack / browserify) سيعتبرون هذه المشكلة ، لكن يمكننا المحاولة.

نعم ... ربما تبدأ بالرد أولاً؟ أعني أنك محق في أن هذا عيب!

لقد فعلت ذلك بالفعل منذ 3 أيام ، لكن لا يبدو أنهم قلقون حقًا بشأن هذه المشكلة

لا يوجد ضمان بأن ذلك سيساعدك ، ولكن يمكنك محاولة المتابعة مع العلاقات العامة ... عادة ما يكون هناك عدد أقل من هذه المشكلات ، لذا فهي تثير اهتمامًا أكبر قليلاً.

لا يمكنني إرسال العلاقات العامة الصحيحة لأنها مشكلة على مستوى المشروع ، لكن يمكنني إرسال واحدة منطقية حتى أتمكن من رؤية ما يفكرون به وإذا اعتبروا أنني مخطئ. لكن فكر في الأمر ، فأنت تقوم بتطوير المشروع X ولتطوير X تقوم باستيراد X.

من المحتمل أن يكون للاعتماد على واجهة المستخدم المادية إصدار تفاعل مختلف عن إصدار رد الفعل الخاص بك. لذا فإن npm سيسمح لـ material-ui بتحميل إصدار مختلف.

إلغاء التثبيت والقيام بعمل npm install يعمل بالنسبة لي.

هذه الحزمة الخاصة بي. تبدو 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 وأن مادة واجهة المستخدم 0.15-alpha-2 لم تتقلص ، لذا فقد سحب التفاعل 0.14.8.

سيكون لطيفًا إذا تم تقليص الأجزاء أو أكثر تحديدًا حول الإصدارات.

تضمين التغريدة
ربما هذا سوف يساعد.
https://github.com/npm/npm/pull/12290

haradakunihiko : هذه المشكلة مرتبطة بـ npm-shrinkwrap ، والتي لا تدخل في السيناريو الإشكالي ، لذلك أتساءل عما إذا كان يمكن أن ينجح في حالتنا. يجب أن أجربها ، لكن في الوقت الحالي انتقلنا إلى npm3 لتجنب المشكلة.

فقط للتوضيح ، وضعنا هو كما يلي:
لدينا إصدار 0.14 من React في package.json لدينا و

mlarcher في الواقع ، أنا بالتأكيد في نفس الموقف ، ولكن مع رد فعل التمهيد. يحتوي React-bootstrap على تبعيات نظير للتفاعل ويقوم بتثبيت إصدار أحدث من رد الفعل داخل وحدة رد فعل التمهيد.
ومن المحتمل جدًا بسبب التفاف الانكماش (https://github.com/npm/npm/issues/5135#issuecomment-207684987). يمكن أن يحدث هذا أيضًا مع واجهة المستخدم المادية.
أعتقد أن هذا النوع من المشكلات لا ينتج عن مشكلة واحدة ، لكن التفاف الانكماش مع npm @ 2 سيكون أحد الأسباب.
على أي حال ، سيكون تحديث npm إلى الإصدار 3 هو الحل الأفضل (وللأسف ، لا يمكنني التحديث لسبب ما ...).

كنا نشهد نفس هذه المشكلات أثناء تطوير مكتبة مكونات تفاعل مشتركة تستخدم واجهة المستخدم المادية. بعد تجربة العديد من الحلول المختلفة التي تم اقتراحها ، نجحنا فيما يلي:

الإضافة أدناه إلى تهيئة حزمة الويب الخاصة بنا:

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

بفضل mdarif للنصيحة !

صنع اسم مستعار يحل مشكلتي @ cody- lettaumdarif شكرًا على أي حال

felipethome أواجه نفس المشكلة ، لم يؤد تحديد رد الفعل كمورد خارجي للتصفح إلى إصلاح استيراد ./React . كيف تمكنت من الالتفاف حوله؟ لمعلوماتك أنا أستخدم grunt و browserify.

arzavj أنا لا أستخدم grunt ، لكن ألق نظرة على ملف gulpfile.js لهذه البذرة . ربما يساعدك.

فهمتك! شكرا!

@ cody-lettau هل أضفت ذلك إلى تهيئة webpack للمكتبة ، أو للمشروع الذي يستخدم تلك المكتبة؟

@ sunny-g تمت إضافته إلى المكتبة التي كنا نبنيها. استخدمت هذه المكتبة واجهة المستخدم المادية.

شكرا لك على الاستجابة السريعة! انتهى بي الأمر باستخدام externals في webpack.config.js الخاص بالمكتبة وهذا أصلح الخطأ.

felipethome علق في 23 فبراير
شكرًا felipethome على تعليقك ومثال جيثب ، لقد حللت

كانت مشكلتي مختلفة بعض الشيء. كان لدي حزمتان مختلفتان من حزم Webpack وكلاهما كان يسحب React. حققت إحدى وحدات NPM في الحزمة الثانية require('react') و require('react-dom') .

لقد أصلحته عن طريق إضافة ما يلي إلى تهيئة Webpack للحزمة الثانية

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

واجهت نفس المشكلة وقمت بحلها عن طريق إزالة جميع وحدات العقدة واستخدام الغزل لتثبيت جميع التبعيات مرة أخرى.