Могу подтвердить, что я тоже видел это предупреждение. Мне также удалось воспроизвести это предупреждение с помощью gatsby-starter-default.

Вероятно, нам не хватает https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack -plugin

Это не имеет большого значения, потому что функция response fire: fire: еще не является официальной.

Webpack.config находится здесь:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js

@wardpeet Я заменяю react-dom на @ hot-loader / react-dom, чтобы удалить это предупреждение.

это тоже работает! 💪

@achmadk @wardpeet где вы заменили
@ hot-loader / react-dom?
Я не вижу этого в моей кодовой базе, это должно быть где-то внутри кода Гэтсби

@ 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 дней с момента последнего обновления здесь.

Если мы пропустили эту проблему или вы хотите оставить ее открытой, ответьте здесь. Вы также можете добавить ярлык «не устаревший», чтобы эта проблема оставалась открытой!

Спасибо, что присоединились к сообществу Гэтсби! 💪💜

не несвежий!

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

Чтобы было ясно, чего нам следует ожидать от применения обходного пути? Удалит ли это горячую перезагрузку, как заметил

Позвольте мне исправить это как можно скорее

Я создал новый PR https://github.com/gatsbyjs/gatsby/pull/13713. Было бы весело, если бы это можно было протестировать на нескольких репозиториях.

Похоже, это было исправлено в # 13713

Нужен ли нам еще патч exports.onCreateWebpackConfig для удаления предупреждения в последних версиях gatsby? Или мы можем просто игнорировать предупреждение?

Использование React 16.9.0

Кажется, он снова возвращается

Я также вижу это в новых стартовых проектах.

вам нужно добавить согласованную версию для response-hot-dom в свой файл пакета

"@ hot-loader / react-dom": "^ 16.8.6",

и в конфигурации вашего веб-пакета вам нужно добавить

псевдоним: {'response-dom': '@ hot-loader / react-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 .

Исправление @TheAadithyan работает. Хотя немного раздражает ...

Следуя 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 вы читали эту

Следуя 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 Это написано прямо на странице, которую я связал ...

Использование: Реализуйте любой из этих API, экспортируя их из файла с именем gatsby-node.js в корне вашего проекта.

Я также получал это предупреждение в Windows 10, но не в Ubuntu Linux или macOS. Мне интересно, относится ли это предупреждение к пользователям Windows.

@kimbaudi У меня тоже есть эта ошибка в системе Windows, знаете ли вы, будет ли это нормально в производственной среде в Linux ??

Я попробовал это решение для стартового пакета Gatsby, но оно не сработало. Что-нибудь изменилось за последнее время?

Это внезапно начало появляться в проекте, над которым я работал, почему это происходит. я что-то сломал, могу я проигнорировать предупреждение?

+1

Также вижу эту проблему на компьютере с Windows 10 через Chrome (если это актуально)

+1 то же самое и здесь. И обходной путь с @hot-loader/react-dom не работает (пробовал обе версии) - dev не работает с Error: Cannot find module 'react-dom/server'

Также получаю это на моем ящике WIndows на работе. Позже проверю это на моем личном Macbook, чтобы увидеть, получу ли я другие результаты.

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

running: yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom решил проблему для меня.
From: react-dom - hot-loader edition Rewire - (Пряжа) Любая другая система

running: yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom решил проблему для меня.
From: react-dom - hot-loader edition Rewire - (Пряжа) Любая другая система

или 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, чтобы обеспечить более плавный процесс разработки. В противном случае горячая перезагрузка действительно периодически дает сбой в среде разработки localhost.

Я использую yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom но в проекте yarn workspaces с lerna есть неприятные проблемы, которые я не мог исправить. Пробовал nohoist, но он не работает, как я думал изначально.

Вроде кто-нибудь решил? Я думаю, что этот метод (пакеты с псевдонимом) может вызвать эту проблему, но я не уверен на 100%.

Является ли установка `@ hot-loader / react-dom" и добавление конфигурации webpack в gatsby-node.js обходным путем или постоянным решением? Если это навсегда, разве это не должно быть встроено в Gatsby? Если это обходной путь, что будет быть спусковым крючком для нас, чтобы удалить это?

Я также хотел бы добавить, что я сталкивался с некоторыми страницами, которые просто не отображались после обновления Ant Design 4.1.5 до v4.2.0. Они реорганизовали компонент List.Item для использования хуков, и я получал ошибку React о том, что функциональный компонент пытается вернуть компонент класса. Применение патча полностью решило эту проблему. Мораль истории: предупреждение "response-🔥-dom patch не обнаружено" действительно может вызвать проблемы!

@wardpeet Я заменяю react-dom на @ hot-loader / react-dom, чтобы удалить это предупреждение.

спасибо за свою работу

Любые новости?
Должны ли мы пойти дальше и вручную исправить это в наших проектах, как предложил @wardpeet ?

Я должен сказать, что это симптом такого большого количества веб-разработок в наши дни. Случайная ошибка, вызванная случайным изменением без очевидного решения, которое не включает в себя запуск некоторых исправлений удачи и надежды, которые вы пробуете на случай, если они сработают, и не совсем понимаете, почему они работают или нет. Да, я должен больше участвовать в репозиториях, но я даже не могу заставить Гэтсби работать без кучи случайных предупреждений, поэтому я был бы бесполезен. Мои 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 / react-dom": "^ 16.8.6",

и в конфигурации вашего веб-пакета вам нужно добавить

псевдоним: {'response-dom': '@ hot-loader / react-dom'}

Поможет ли это узнать, что вам нужно сделать https://github.com/gatsbyjs/gatsby/pull/26927 ?

@wardpeet - Я только что

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

Добавление шагов для решения проблемы в консоли с указанием необходимой версии для установки - это совершенство 🎉

Я попробовал предложенное решение:

• установлен "@ hot-loader / react-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,60 ГГц
Двоичные файлы:
Узел: 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)
npmPackages:
Гэтсби: ^ 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
Гэтсби-тема-кодебуши: 1.0.0 => 1.0.0

ОБНОВИТЬ:
Я откатил предыдущие шаги, и это решение, наконец, удалило предупреждение:

работает: yarn add react-dom<strong i="37">@npm</strong>:@hot-loader/react-dom решил проблему для меня.
From: react-dom - hot-loader edition Rewire - (Пряжа) Любая другая система

Шаг 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, потому что он автоматически сливается с конфигурацией по умолчанию»

Мне не удалось установить, мне нужно добавить свою текущую версию реакции.

Сообщение от @zaktwist сработало (https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-597560317)
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
Например, npm add @hot-loader/[email protected]