Gatsby: React-Hot-Loader: patch react-🔥-dom tidak terdeteksi. Fitur React 16.6+ mungkin tidak berfungsi.

Dibuat pada 20 Feb 2019  ·  52Komentar  ·  Sumber: gatsbyjs/gatsby

Keterangan

Setelah memperbarui semua dependensi proyek pemula saya, saya melihat pesan berikut di konsol browser setelah menjalankan gatsby develop :

React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.

Langkah-langkah untuk mereproduksi

  1. Klon gatsby-starter-strict@6c06471
  2. yarn && yarn develop

Hasil yang diharapkan

Tidak ada peringatan yang harus dilemparkan.

Hasil sebenarnya

Peringatan dilemparkan bahkan dengan proyek awal.

Lingkungan

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-2500 CPU @ 3.30GHz
  Binaries:
    Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    gatsby: ^2.1.10 => 2.1.10
    gatsby-plugin-manifest: ^2.0.18 => 2.0.18
    gatsby-plugin-offline: ^2.0.24 => 2.0.24
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
    gatsby-plugin-styled-components: ^3.0.6 => 3.0.6
    gatsby-plugin-typescript: ^2.0.8 => 2.0.8
not stale maintenance
Sumber
picture kripod
👍108

Komentar yang paling membantu

Itu sama sekali tidak terkait dengan "reaksi api" dan emoji itu membingungkan.

Solusi yang dapat dilakukan secara lokal adalah menginstal @hot-loader/react-dom sebagai devDependency dan menambahkan kait ini ke 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'
    }
  }
}
picture Jessidhia pada 3 Mar 2019
👍90 ❤28 🎉17 👎1

Semua 52 komentar

Saya dapat mengonfirmasi bahwa saya juga telah melihat peringatan ini. Saya juga dapat mereproduksi peringatan ini dengan gatsby-starter-default.

t2ca picture t2ca pada 20 Feb 2019
👍34 😕2 😄2

Kami mungkin kehilangan https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack -plugin

Ini bukan masalah besar karena reaksi api :api: belum resmi.

Webpack.config ada di sini:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js

wardpeet picture wardpeet pada 20 Feb 2019

@wardpeet Saya mengganti react-dom dengan @hot-loader/react-dom untuk menghapus peringatan ini.

achmadk picture achmadk pada 25 Feb 2019
👍12 👎4

yang bekerja juga! 💪

wardpeet picture wardpeet pada 25 Feb 2019
👎9

@achmadk @wardpeet di mana Anda mengganti react-dom dengan
@hot-loader/react-dom ?
Saya tidak melihat bahwa di basis kode saya, itu harus berada di suatu tempat di dalam kode gatsby

JustFly1984 picture JustFly1984 pada 1 Mar 2019

@JustFly1984 misalnya, saya menggunakan basis kode dari @kripod . Dalam file package.json , Ini memiliki react-dom di dalam dependencies . Dan kemudian ganti react-dom dengan @hot-loader/react-dom .

achmadk picture achmadk pada 1 Mar 2019
😕3 👎3 👍2

Saya mereproduksi peringatan ini dengan gatsby-starter-default.

Jadi apa yang harus kita lakukan?

Tunggu "react fire" dirilis? Atau ganti react-dom dengan @hot-loader/react-dom ?

asilgag picture asilgag pada 2 Mar 2019

Itu sama sekali tidak terkait dengan "reaksi api" dan emoji itu membingungkan.

Solusi yang dapat dilakukan secara lokal adalah menginstal @hot-loader/react-dom sebagai devDependency dan menambahkan kait ini ke 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'
    }
  }
}
Jessidhia picture Jessidhia pada 3 Mar 2019
👍90 ❤28 🎉17 👎1

Solusinya menghilangkan peringatan tetapi ..
Tidak ada reload panas untuk saat ini? (Menyimpan file akan menyegarkan halaman di aplikasi saya)

misterbridge picture misterbridge pada 5 Mar 2019
👍7 😕1

Hai!

Masalah ini sudah sepi. Sepi sepi. 👻

Kami mendapatkan banyak masalah, jadi saat ini kami menutup masalah setelah 30 hari tidak aktif. Sudah setidaknya 20 hari sejak pembaruan terakhir di sini.

Jika kami melewatkan masalah ini atau jika Anda ingin tetap membukanya, balas di sini. Anda juga dapat menambahkan label "tidak basi" agar masalah ini tetap terbuka!

Terima kasih telah menjadi bagian dari komunitas Gatsby! 💪💜

gatsbot[bot] picture gatsbot[bot] pada 26 Mar 2019
👎12

tidak basi!

JustFly1984 picture JustFly1984 pada 26 Mar 2019
👍20 😄3

Saya telah menambahkannya ke peta jalan kami karena itu mungkin melempar orang baru yang mungkin memberi mereka kesan bahwa mereka telah melakukan kesalahan.

wardpeet picture wardpeet pada 27 Mar 2019
👍18

Untuk memperjelas, apa yang harus kita harapkan dari penerapan solusi? Apakah itu akan menghapus pemuatan ulang panas seperti yang diperhatikan @misterbridge ? Adakah yang menemukan solusi yang membuat pemuatan ulang tetap berfungsi?

joefiorini picture joefiorini pada 12 Apr 2019

Biarkan saya memperbaiki ini secepatnya

wardpeet picture wardpeet pada 15 Apr 2019
👍36

Saya membuat PR baru https://github.com/gatsbyjs/gatsby/pull/13713 akan menyenangkan jika ini bisa diuji pada beberapa repo.

wardpeet picture wardpeet pada 30 Apr 2019
👍2

Sepertinya ini sudah diperbaiki di #13713

m-allanson picture m-allanson pada 20 Mei 2019

Apakah kita masih membutuhkan patch exports.onCreateWebpackConfig untuk menghapus peringatan di versi gatsby terakhir? Atau bisakah kita mengabaikan peringatan itu?

Menggunakan Bereaksi 16.9.0

antoinerousseau picture antoinerousseau pada 11 Agu 2019
👍3

Sepertinya akan kembali lagi

vasilenka picture vasilenka pada 11 Agu 2019
👍19

Saya juga melihat ini di proyek pemula baru.

rileyjshaw picture rileyjshaw pada 13 Agu 2019

anda perlu menambahkan versi yang cocok untuk react-hot-dom di file paket Anda

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

dan di konfigurasi webpack Anda, Anda perlu menambahkan

alias: { 'react-dom': '@hot-loader/react-dom' }

TheAadithyan picture TheAadithyan pada 15 Agu 2019
👍2

Karena tidak benar-benar merusak apa pun, biasanya aman untuk menyembunyikan peringatan seperti yang disebutkan dalam pertanyaan stack overflow yang saya jawab:

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

Saya siap mengirimkan PR jika seseorang dapat mengonfirmasi bahwa baris berikut adalah tempat yang tepat untuk melakukan perubahan:

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

Saya agak baru di Gatsby tetapi saya pikir ini akan menjadi perubahan yang cukup mudah yang tidak mengharuskan pengguna untuk bermigrasi dari paket inti react-dom .

skipjack picture skipjack pada 22 Agu 2019

Perbaikan oleh @TheAadithyan berfungsi. Agak mengganggu sih...

GooBall picture GooBall pada 2 Okt 2019

Mengikuti API Gatsby , lebih baik gunakan actions.setWebpackConfig , mis

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

Secara otomatis bergabung dengan konfigurasi default.

antoinerousseau picture antoinerousseau pada 5 Okt 2019
👍14

@antoinerousseau dan @ooloth : Patch itu sebagai efek samping yang tidak menguntungkan karena menyebabkan proyek gagal dikompilasi ketika sebuah paket menggunakan react-modal telah diinstal dari sistem file lokal dengan file:[path to project] . Yang benar-benar aneh adalah kode yang sama berfungsi dengan baik saat menginstalnya dari artefak Azure DevOps kami.

Masalah tidak terjadi saat melepas tambalan. Saya telah menguji ini dengan dua proyek berbeda yang memiliki react-modal sebagai ketergantungan dan keduanya gagal dengan kesalahan yang sama. react-modal memiliki ketergantungan pada react-dom tetapi tidak dapat menyelesaikannya ketika patch di atas diterapkan.

Contoh repo

Untuk contoh repo, lihat https://github.com/collector-bank/collector-portal-framework.

Cara memperbanyak

  1. Instal paket lokal dengan ketergantungan ke react-modal menggunakan file:.. .
  2. Jalankan npm run start .
  3. Tonton kompilasi gagal dengan kesalahan serupa seperti yang ditunjukkan di bawah ini:
» 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.
eriktoyra picture eriktoyra pada 8 Okt 2019

Itu sama sekali tidak terkait dengan "reaksi api" dan emoji itu membingungkan.

Solusi yang dapat dilakukan secara lokal adalah menginstal @hot-loader/react-dom sebagai devDependency dan menambahkan kait ini ke 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'
    }
  }
}

Saya harus mengkompilasi ulang setelahnya tetapi berhasil!

prevolorio picture prevolorio pada 12 Okt 2019
👎3

@prevolorio apakah Anda membaca utas ini?...

antoinerousseau picture antoinerousseau pada 12 Okt 2019

Mengikuti API Gatsby , lebih baik gunakan actions.setWebpackConfig , mis

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

Secara otomatis bergabung dengan konfigurasi default.

Baru disini. Di mana saya meletakkan kode ini? gatsby-node.js?

TriStarGod picture TriStarGod pada 29 Okt 2019
👍1

@TriStarGod ya, di situlah kait api "hidup". Cuplikan kode itu harus dimasukkan ke dalam gatsby-node.js

jonniebigodes picture jonniebigodes pada 29 Okt 2019

@TriStarGod Dikatakan tepat di halaman yang saya

Penggunaan: Terapkan salah satu API ini dengan mengekspornya dari file bernama gatsby-node.js di root proyek Anda.

antoinerousseau picture antoinerousseau pada 29 Okt 2019

Saya juga mendapatkan peringatan ini di Windows 10, tetapi tidak di Ubuntu Linux atau macOS. Saya ingin tahu apakah peringatan ini khusus untuk pengguna windows.

kimbaudi picture kimbaudi pada 5 Des 2019

@kimbaudi Saya memiliki kesalahan ini di sistem windows juga, apakah Anda tahu apakah itu akan baik-baik saja di lingkungan produksi di linux??

ChanclaYCod picture ChanclaYCod pada 22 Des 2019

Saya mencoba solusi ini untuk paket starter Gatsby dan tidak berhasil. Apakah ada yang berubah baru-baru ini?

MatthewJRoybal picture MatthewJRoybal pada 8 Jan 2020
👍2

Ini tiba-tiba mulai muncul di proyek yang sedang saya kerjakan, mengapa ini terjadi. apakah saya melanggar sesuatu, bisakah saya mengabaikan peringatan itu?

Thebohemiangeek picture Thebohemiangeek pada 11 Jan 2020

+1

Melihat masalah ini juga, pada mesin windows 10 melalui Chrome (jika itu relevan)

miller-productions picture miller-productions pada 1 Feb 2020

+1 sama di sini. Dan solusi dengan @hot-loader/react-dom tidak berfungsi (mencoba kedua versi) - dev gagal dengan Error: Cannot find module 'react-dom/server'

ovsw picture ovsw pada 17 Feb 2020
👍5

Juga mendapatkan ini di kotak WIndows saya di tempat kerja. Akan memeriksanya di kotak Macbook pribadi saya nanti untuk melihat apakah saya mendapatkan hasil yang berbeda.

MatthewCushing picture MatthewCushing pada 28 Feb 2020

Saya mulai melihat ini lagi sejak memperbarui bereaksi ke versi terbaru.

t2ca picture t2ca pada 28 Feb 2020
👍9

berjalan: yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom memecahkan masalah untuk saya.
Dari: react-dom - edisi hot-loader Rewire - (Benang) Sistem lainnya

beelee picture beelee pada 7 Mar 2020
👍7 🚀3 ❤2 🎉1

berjalan: yarn add react-dom<strong i="6">@npm</strong>:@hot-loader/react-dom memecahkan masalah untuk saya.
Dari: react-dom - edisi hot-loader Rewire - (Benang) Sistem lainnya

atau npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
misalnya: npm add @hot-loader/[email protected]
dan tambahkan ke 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' } } }
jalankan gatsby develop
memecahkan masalah bagi saya.

zaktwist picture zaktwist pada 11 Mar 2020
❤7

Masih merupakan perbaikan yang relevan yang perlu saya lakukan di semua situs gatsby saya untuk memastikan proses pengembangan yang lebih lancar. Jika tidak, pemuatan ulang panas memang kadang-kadang gagal di lingkungan pengembangan localhost.

apolopena picture apolopena pada 28 Mar 2020

Saya menggunakan yarn add react-dom<strong i="5">@npm</strong>:@hot-loader/react-dom tetapi dalam proyek ruang kerja benang dengan lerna ada masalah buruk yang tidak dapat saya perbaiki. Mencoba nohoist tetapi tidak berfungsi seperti yang saya pikirkan pada awalnya.

Seperti apakah ada yang memecahkannya? Saya pikir metode ini (paket alias) dapat menyebabkan masalah ini tetapi saya tidak 100% yakin.

barthicus picture barthicus pada 28 Mar 2020

Apakah menginstal `@hot-loader/react-dom" dan menambahkan konfigurasi webpack ke gatsby-node.js merupakan solusi atau solusi permanen? Jika permanen, bukankah ini harus dibangun ke dalam Gatsby? Jika ini solusi, apa yang akan menjadi pemicu bagi kita untuk menghapusnya?

Saya juga ingin menambahkan bahwa saya mengalami halaman tertentu yang tidak bisa dirender setelah memperbarui dari Ant Design 4.1.5 ke v4.2.0. Mereka memfaktorkan ulang komponen List.Item untuk menggunakan kait, dan saya mendapatkan kesalahan React tentang komponen fungsional yang mencoba mengembalikan komponen kelas. Menerapkan tambalan benar-benar menyelesaikan masalah ini. Moral dari cerita: peringatan "react-🔥-dom patch tidak terdeteksi" benar-benar dapat menyebabkan masalah!

devuxer picture devuxer pada 11 Mei 2020
👍1

@wardpeet Saya mengganti react-dom dengan @hot-loader/react-dom untuk menghapus peringatan ini.

terima kasih karyanya

azware picture azware pada 20 Mei 2020

Ada berita?
Haruskah kita melanjutkan dan memperbaikinya secara manual di proyek kita, seperti yang disarankan @wardpeet ?

Cry0nicS picture Cry0nicS pada 26 Mei 2020
👍1

Saya harus mengatakan bahwa ini adalah gejala dari begitu banyak pengembangan web akhir-akhir ini. Sebuah kesalahan acak yang disebabkan oleh perubahan acak tanpa solusi yang jelas yang tidak melibatkan memulai beberapa perbaikan hit dan harapan yang Anda coba kalau-kalau mereka bekerja dan tidak benar-benar memahami mengapa mereka melakukannya atau tidak. Ya, saya harus lebih terlibat dalam repo tapi hei, saya bahkan tidak bisa menjalankan Gatsby tanpa banyak peringatan acak jadi saya tidak akan berguna. 2 sen saya.

Tony221268 picture Tony221268 pada 28 Mei 2020
👍5 👎1

Saya datang ke sini setiap kali saya memulai proyek dengan:
https://github.com/gatsbyjs/gatsby-starter-default

Jadi saya menulis catatan ini untuk diri saya sendiri, dan siapa pun yang menggulir sejauh ini (Hai masa depan saya)

Langkah 1

Jalankan perintah ini - Tetapi menjalankan ini saja tidak akan memperbaiki masalah:

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

Langkah 2

Ubah gatsby.node.js untuk menambahkan yang berikut:

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

Gunakan kode di atas di atas yang lain yang disebutkan di sini karena:
https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment -538662592

"Lebih baik menggunakan actions.setWebpackConfig karena otomatis menyatu dengan konfigurasi default"

birksy89 picture birksy89 pada 20 Jun 2020
👍36 ❤4 👀3 🎉2

anda juga dapat menggunakan GATSBY_HOT_LOADER=fast-refresh . Kami senang menerima PR untuk menjadikan @hot-loader sebagai default untuk pengembangan

wardpeet picture wardpeet pada 20 Jun 2020
👀1 ❤1

anda perlu menambahkan versi yang cocok untuk react-hot-dom di file paket Anda

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

dan di konfigurasi webpack Anda, Anda perlu menambahkan

alias: { 'react-dom': '@hot-loader/react-dom' }

harshalimatte picture harshalimatte pada 25 Jun 2020

Apakah ini akan membantu menemukan apa yang perlu Anda lakukan https://github.com/gatsbyjs/gatsby/pull/26927 ?

wardpeet picture wardpeet pada 17 Sep 2020

@wardpeet - Saya baru saja mengalami ini, dan ya, sangat jelas. Terima kasih.

Tidak yakin tentang yang lain, tetapi saya menemukannya melalui peringatan konsol... Daripada mengalami kegagalan fungsi apa pun.

Menambahkan langkah-langkah untuk menyelesaikan masalah di dalam konsol dengan menentukan versi yang diperlukan untuk menginstal adalah kesempurnaan

birksy89 picture birksy89 pada 18 Sep 2020

Saya mencoba solusi yang disarankan:

  • menginstal "@hot-loader/react-dom": "^16.8.6"
  • menambahkan bagian ini di gatsby-config.js :

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

tapi itu tidak bekerja untuk saya.

Ada saran?

info gatsby

Sistem:
OS: Windows 10 10.0.16299
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Biner:
Node: 14.6.0 - C:\Program Filesnodejsnode.EXE
Benang: 1.22.4 - C:\Program Files (x86)\Yarn\binyarn.CMD
npm: 6.14.6 - C:\Program Filesnodejs\npm.CMD
Bahasa:
Python: 3.8.1 - /c/Users/ccordero/AppData/Local/Programs/Python/Python38/python
Browser:
Tepi: Spartan (41.16299.1004.0)
npmPaket:
gatsby: ^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

MEMPERBARUI:
Saya memutar kembali langkah-langkah sebelumnya, dan solusi ini akhirnya menghapus peringatan:

berjalan: yarn add react-dom<strong i="37">@npm</strong>:@hot-loader/react-dom memecahkan masalah untuk saya.
Dari: react-dom - edisi hot-loader Rewire - (Benang) Sistem lainnya

ccalvarez picture ccalvarez pada 5 Okt 2020
👍4 ❤1 🎉1

Langkah 1

Jalankan perintah ini - Tetapi menjalankan ini saja tidak akan memperbaiki masalah:

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

Langkah 2

Ubah gatsby.node.js untuk menambahkan yang berikut:

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

Gunakan kode di atas di atas yang lain yang disebutkan di sini karena:
#11934 (komentar)

"Lebih baik menggunakan actions.setWebpackConfig karena otomatis menyatu dengan konfigurasi default"

Instal gagal untuk saya, saya harus menambahkan versi reaksi saya saat ini.

Posting dari @zaktwist berhasil (https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-597560317)
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
Misalnya npm add @hot-loader/[email protected]

Xairoo picture Xairoo pada 27 Nov 2020
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

ghost picture ghost  ·  3Komentar
timbrandin picture timbrandin  ·  3Komentar
Oppenheimer1 picture Oppenheimer1  ·  3Komentar
andykais picture andykais  ·  3Komentar
dustinhorton picture dustinhorton  ·  3Komentar