يمكنني أن أؤكد أنني رأيت هذا التحذير أيضًا. تمكنت أيضًا من إعادة إنتاج هذا التحذير باستخدام gatsby-starter-default.

ربما نفتقد https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack -plugin

إنها ليست صفقة كبيرة على أجهزة الصراف الآلي لأن رد فعل النيران: النار: ليس رسميًا بعد.

Webpack.config موجود هنا:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js

wardpeet استبدل react-dom بـ @ hot-loader / رد فعل dom لإزالة هذا التحذير.

هذا يعمل كذلك! 💪

achmadkwardpeet أين يمكنك استبدال تتفاعل مع دوم
@ هوت لودر / رد فعل دوم؟
لا أرى أنه في قاعدة بياناتي ، يجب أن يكون في مكان ما داخل كود غاتسبي

@ JustFly1984 على سبيل المثال ، أستخدم مصدر البرنامج من kripod . في ملف package.json ، يحتوي الملف على react-dom بداخل dependencies . ثم استبدل react-dom بـ @hot-loader/react-dom .

أقوم بإعادة إنتاج هذا التحذير باستخدام gatsby-starter-default.

اذا ماذا يجب ان نفعل؟

انتظر حتى يتم إطلاق "رد فعل النار"؟ أو استبدال react-dom بـ @hot-loader/react-dom ؟

هذا لا علاقة له مطلقًا بـ "رد فعل النار" والرموز التعبيرية محيرة.

الحل البديل الذي يمكن إجراؤه محليًا هو تثبيت @hot-loader/react-dom كـ devDependency وإضافة هذا الخطاف إلى gatsby-node.js :

exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
  const config = getConfig()
  if (stage.startsWith('develop') && config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }
  }
}

يزيل الحل البديل التحذير ولكن ..
لا يوجد إعادة تحميل ساخنة في الوقت الحالي؟ (سيؤدي حفظ ملف إلى تحديث الصفحة على تطبيقي)

مرحبا!

لقد ساد الهدوء هذه القضية. الهدوء المخيف. 👻

نتلقى الكثير من المشكلات ، لذلك نقوم حاليًا بإغلاق المشكلات بعد 30 يومًا من عدم النشاط. لقد مر 20 يومًا على الأقل منذ آخر تحديث هنا.

إذا فاتنا هذه المشكلة أو إذا كنت تريد إبقائها مفتوحة ، فيرجى الرد هنا. يمكنك أيضًا إضافة التصنيف "ليس قديمًا" للإبقاء على هذه المشكلة مفتوحة!

شكرًا لكونك جزءًا من مجتمع Gatsby! 💪💜

ليس بالية!

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

فقط للتوضيح ، ما الذي يجب أن نتوقعه من تطبيق الحل البديل؟ هل سيؤدي ذلك إلى إزالة إعادة التحميل الساخنة مثل

اسمحوا لي أن أصلح هذا في أسرع وقت ممكن

لقد أنشأت علاقات عامة جديدة https://github.com/gatsbyjs/gatsby/pull/13713 ستكون ممتعة إذا كان من الممكن اختبار ذلك على عدد قليل من المستودعات.

يبدو أن هذا تم إصلاحه في # 13713

هل ما زلنا بحاجة إلى التصحيح exports.onCreateWebpackConfig لإزالة التحذير في إصدارات Gatsby الأخيرة؟ أم يمكننا فقط تجاهل التحذير؟

باستخدام React 16.9.0

يبدو أنه يعود مرة أخرى

أرى هذا أيضًا في مشاريع البداية الجديدة.

تحتاج إلى إضافة الإصدار المطابق لـ response-hot-dom في ملف الحزمة الخاص بك

"@ hot-loader / reaction-dom": "^ 16.8.6"،

وفي تهيئة حزمة الويب الخاصة بك ، تحتاج إلى إضافة

الاسم المستعار: {'رد فعل دوم': '@ hot-loader / رد فعل dom'}

نظرًا لأنه لا يكسر أي شيء حقًا ، فمن الآمن عادةً إخفاء التحذير كما هو مذكور في سؤال تجاوز سعة المكدس الذي أجبته:

https://stackoverflow.com/questions/54770535/react-hot-loader-react-dom-patch-is-not-detected/54816859#54816859

سأكون مستعدًا لتقديم PR إذا كان بإمكان شخص ما تأكيد أن الأسطر التالية هي المكان المناسب لإجراء التغيير:

https://github.com/gatsbyjs/gatsby/blob/561d33e2e491d3971cb2a404eec9705a5a493602/packages/gatsby/src/bootstrap/requires-writer.js#L50 -L63

أنا جديد إلى حد ما على Gatsby ، لكنني أعتقد أن هذا سيكون تغييرًا مباشرًا إلى حد ما لا يتطلب من المستخدمين الانتقال بعيدًا عن الحزمة الأساسية react-dom .

الإصلاح من خلال @ أعمال

بعد Gatsby API ، من الأفضل استخدام actions.setWebpackConfig ، على سبيل المثال

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith("develop")) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          "react-dom": "@hot-loader/react-dom",
        },
      },
    })
  }
}

يتم دمجه تلقائيًا مع التكوين الافتراضي.

antoinerousseau و ooloth : هذا التصحيح هو تأثير جانبي مؤسف لأنه يتسبب في فشل المشاريع في التجميع عند تثبيت حزمة باستخدام react-modal من نظام الملفات المحلي باستخدام file:[path to project] . الأمر الغريب حقًا هو أن نفس الشفرة تعمل بشكل جيد عند تثبيتها من أداة Azure DevOps الخاصة بنا.

لا تحدث المشكلة عند إزالة التصحيح. لقد اختبرت هذا مع مشروعين مختلفين لهما react-modal كتبعية وفشل كلاهما مع الخطأ نفسه. تبعية react-modal لـ react-dom لكنها غير قادرة على حلها عند تطبيق التصحيح أعلاه.

مثال الريبو

للحصول على مثال الريبو ، راجع https://github.com/collector-bank/collector-portal-framework.

كيف تتكاثر

1. قم بتثبيت حزمة محلية مع الاعتماد على react-modal باستخدام file:.. .
2. تشغيل npm run start .
3. مشاهدة التجميع فشل مع خطأ مشابه كما هو موضح أدناه:

» npm run start                                                                                                                    [removed for privacy reasons]@Eriks-MBP

> [email protected] start /Users/[removed for privacy reasons]/Projects/[removed for privacy reasons]/FooProject
> npm run develop


> [email protected] develop /Users/[removed for privacy reasons]/Projects/[removed for privacy reasons]/FooProject
> gatsby develop

success open and validate gatsby-configs - 0.029 s
success load plugins - 0.247 s
success onPreInit - 0.015 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache - 0.031 s
success copy gatsby files - 0.049 s
success onPreBootstrap - 0.020 s
success source and transform nodes - 0.098 s
success Add explicit types - 0.018 s
success Add inferred types - 0.099 s
success Processing types - 0.075 s
success building schema - 0.250 s
success createPages - 0.014 s
success createPagesStatefully - 0.055 s
success onPreExtractQueries - 0.016 s
success update schema - 0.032 s
success extract queries from components - 0.231 s
success write out requires - 0.027 s
success write out redirect data - 0.013 s
success Build manifest and related icons - 0.104 s
success onPostBootstrap - 0.127 s
⠀
info bootstrap finished - 3.117 s
⠀
success run static queries - 0.058 s — 3/3 67.58 queries/second
success run page queries - 0.028 s — 5/5 365.36 queries/second
success start webpack server - 1.300 s — 1/1 7.17 pages/second
 ERROR  Failed to compile with 2 errors                                                                                                          09:36:39
⠀
This dependency was not found:
⠀
* react-dom in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js, /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js
⠀
To install it, you can run: npm install --save react-dom

 ERROR 

✖ ｢wdm｣:
ERROR in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components'
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js 16:16-36
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/Modal/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/index.js
 @ ./src/components/layout.tsx
 @ ./src/pages/page-2.tsx
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist'
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js 2:0-40 199:15-26
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-datepicker/dist/react-datepicker.min.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/common/components/DatePicker/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/common/components/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/index.js
 @ ./src/components/layout.tsx
 @ ./src/pages/page-2.tsx
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

info ℹ ｢wdm｣: Failed to compile.

هذا لا علاقة له مطلقًا بـ "رد فعل النار" والرموز التعبيرية محيرة.

الحل البديل الذي يمكن إجراؤه محليًا هو تثبيت @hot-loader/react-dom كـ devDependency وإضافة هذا الخطاف إلى gatsby-node.js :

exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
  const config = getConfig()
  if (stage.startsWith('develop') && config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }
  }
}

اضطررت إلى إعادة التحويل بعد ذلك لكنها نجحت!

prevolorio هل قرأت هذا الموضوع؟ ...

بعد Gatsby API ، من الأفضل استخدام actions.setWebpackConfig ، على سبيل المثال

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith("develop")) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          "react-dom": "@hot-loader/react-dom",
        },
      },
    })
  }
}

يتم دمجه تلقائيًا مع التكوين الافتراضي.

نوب هنا. أين أضع هذا الرمز؟ gatsby-node.js؟

TriStarGod نعم ، هذا هو المكان الذي يعيش فيه خطاف API. يجب إدخال مقتطف الشفرة هذا في gatsby-node.js

TriStarGod تقول مباشرة على الصفحة التي ربطتها ...

الاستخدام: قم بتنفيذ أي من واجهات برمجة التطبيقات هذه عن طريق تصديرها من ملف يسمى gatsby-node.js في جذر مشروعك.

لقد تلقيت هذا التحذير أيضًا على نظام التشغيل Windows 10 ، ولكن ليس على Ubuntu Linux أو macOS. أتساءل عما إذا كان هذا التحذير خاصًا بمستخدمي Windows.

kimbaudi لدي هذا الخطأ في نظام windows أيضًا ، هل تعرف ما إذا كان سيكون على ما يرام في بيئة الإنتاج في لينكس ؟؟

لقد جربت هذا الحل لحزمة Gatsby للمبتدئين ولم ينجح. هل تغير أي شيء مؤخرًا؟

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

+1

رؤية هذه المشكلة أيضًا ، على جهاز يعمل بنظام Windows 10 عبر Chrome (إذا كان ذلك مناسبًا)

+1 نفسه هنا. والحل مع @hot-loader/react-dom لا يعمل (جرب كلا الإصدارين) - فشل dev مع Error: Cannot find module 'react-dom/server'

الحصول على هذا أيضًا في صندوق WIndows الخاص بي في العمل. سوف أتحقق من ذلك في صندوق Macbook الشخصي الخاص بي لاحقًا لمعرفة ما إذا كنت أحصل على نتائج مختلفة.

بدأت في رؤية هذا مرة أخرى منذ تحديث رد الفعل إلى أحدث إصدار.

الجري: yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom حل المشكلة بالنسبة لي.
من: React-dom - hot-loader edition Rewire - (Yarn) أي نظام آخر

الجري: yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom حل المشكلة بالنسبة لي.
من: React-dom - hot-loader edition Rewire - (Yarn) أي نظام آخر

أو npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
es .: npm add @hot-loader/[email protected]
وأضف إلى gatsby-node.js:
exports.onCreateWebpackConfig = ({ getConfig, stage }) => { const config = getConfig() if (stage.startsWith('develop') && config.resolve) { config.resolve.alias = { ...config.resolve.alias, 'react-dom': '@hot-loader/react-dom' } } }
تشغيل gatsby develop
حل المشكلة بالنسبة لي.

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

أنا أستخدم yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom ولكن في مشروع مساحات عمل الغزل مع lerna ، هناك مشكلات سيئة لم أتمكن من إصلاحها. حاولت nohoist لكنها لا تعمل كما اعتقدت في البداية.

مثل هل حلها أحد؟ أعتقد أن هذه الطريقة (تسمية الحزم) يمكن أن تسبب هذه المشكلة ولكني لست متأكدًا بنسبة 100٪.

هل يعد تثبيت "@ hot-loader / رد فعل dom" وإضافة تهيئة webpack إلى gatsby-node.js حلاً أو حلًا دائمًا؟ إذا كان دائمًا ، ألا يجب أن يتم تضمينه في Gatsby؟ يكون الدافع لنا لإزالته؟

أود أيضًا أن أضيف أنني واجهت صفحات معينة لن يتم عرضها بعد التحديث من Ant Design 4.1.5 إلى v4.2.0. قاموا بإعادة بناء المكوِّن List.Item لاستخدام الخطافات ، وكنت أتلقى خطأ React حول مكون وظيفي يحاول إرجاع مكون فئة. أدى تطبيق التصحيح إلى حل هذه المشكلة تمامًا. أخلاق القصة: تحذير "رد فعل التصحيح لم يتم اكتشافه" يمكن أن يسبب مشاكل!

wardpeet استبدل react-dom بـ @ hot-loader / رد فعل dom لإزالة هذا التحذير.

شكرا على عملها

أى اخبار؟
هل يجب أن نمضي قدمًا ونصلحها يدويًا في مشاريعنا ، كما اقترح

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

آتي إلى هنا في كل مرة أبدأ فيها مشروعًا بـ:
https://github.com/gatsbyjs/gatsby-starter-default

لذلك أنا أكتب هذه الملاحظة لنفسي ولأي شخص آخر ينتقل إلى هذا الحد 👋 (يا مستقبلي)

الخطوة 1

قم بتشغيل هذا الأمر - لكن تشغيل هذا بمفرده لن يحل المشكلة:

npm install -D @hot-loader/react-dom

الخطوة 2

قم بتعديل gatsby.node.js لإضافة ما يلي:

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith("develop")) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          "react-dom": "@hot-loader/react-dom",
        },
      },
    })
  }
}

استخدم الكود أعلاه على الآخرين المذكورين هنا للأسباب التالية:
https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment -538662592

"من الأفضل استخدام Actions.setWebpackConfig لأنه يندمج تلقائيًا مع التكوين الافتراضي"

يمكنك أيضًا استخدام GATSBY_HOT_LOADER=fast-refresh . يسعدنا قبول PR لجعل @ hot-loader الخيار الافتراضي للتطوير

تحتاج إلى إضافة الإصدار المطابق لـ response-hot-dom في ملف الحزمة الخاص بك

"@ hot-loader / reaction-dom": "^ 16.8.6"،

وفي تهيئة حزمة الويب الخاصة بك ، تحتاج إلى إضافة

الاسم المستعار: {'رد فعل دوم': '@ hot-loader / رد فعل dom'}

هل سيساعدك هذا في اكتشاف ما عليك القيام به https://github.com/gatsbyjs/gatsby/pull/26927 ؟

wardpeet - لقد مررت للتو بهذا الأمر ، ونعم ، واضح جدًا. شكرا لك.

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

تعد إضافة الخطوات لحل المشكلة داخل وحدة التحكم عن طريق تحديد الإصدار المطلوب للتثبيت أمرًا مثاليًا 🎉

جربت الحل المقترح:

• تثبيت "@ hot-loader / reaction-dom": "^ 16.8.6"
• أضاف هذا القسم بـ gatsby-config.js :

exports.onCreateWebpackConfig = ({ stage, actions }) => { if (stage.startsWith('develop')) { actions.setWebpackConfig({ resolve: { alias: { 'react-dom': '@hot-loader/react-dom' } } }); } };

لكنها لا تعمل بالنسبة لي.

أي اقتراح؟

λ معلومات غاتسبي

نظام:
نظام التشغيل: Windows 10 10.0.16299
وحدة المعالجة المركزية: (8) x64 Intel (R) Core (TM) i7-6700HQ CPU @ 2.60GHz
الثنائيات:
العقدة: 14.6.0 - C: \ Program Filesnodejsnode.EXE
الغزل: 1.22.4 - C: \ Program Files (x86) \ Yarn \ binyarn.CMD
npm: 6.14.6 - C: \ Program Filesnodejs \ npm.CMD
اللغات:
Python: 3.8.1 - / c / Users / ccordero / AppData / Local / Programs / Python / Python38 / python
المتصفحات:
الحافة: المتقشف (41.16299.1004.0)
الحزم:
غاتسبي: ^ 2.18.18 => 2.24.33
gatsby-plugin-manifest: ^ 2.4.22 => 2.4.22
gatsby-plugin-offline: ^ 3.2.22 => 3.2.22
gatsby-source-graphql: ^ 2.7.0 => 2.7.0
gatsby-theme-codebushi: 1.0.0 => 1.0.0

تحديث:
لقد تراجعت عن الخطوات السابقة ، وأزال هذا الحل أخيرًا التحذير:

الجري: حل yarn add react-dom<strong i="37">@npm</strong>:@hot-loader/react-dom المشكلة بالنسبة لي.
من: React-dom - hot-loader edition Rewire - (Yarn) أي نظام آخر

الخطوة 1

قم بتشغيل هذا الأمر - لكن تشغيل هذا بمفرده لن يحل المشكلة:

npm install -D @hot-loader/react-dom

الخطوة 2

قم بتعديل gatsby.node.js لإضافة ما يلي:

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith("develop")) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          "react-dom": "@hot-loader/react-dom",
        },
      },
    })
  }
}

استخدم الكود أعلاه على الآخرين المذكورين هنا للأسباب التالية:
# 11934 (تعليق)

"من الأفضل استخدام Actions.setWebpackConfig لأنه يندمج تلقائيًا مع التكوين الافتراضي"

فشل التثبيت بالنسبة لي ، لا بد لي من إضافة إصدار رد الفعل الحالي الخاص بي.

عمل منشور من
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
على سبيل المثال npm add @hot-loader/[email protected]