Jadi hanya untuk klarifikasi: Anda mengimpor kait (katakanlah useState ) dari modul react yang berbeda dari yang digunakan untuk merender komponen?

Saya setuju bahwa ini membingungkan. Saya tidak yakin apakah kita memiliki cara untuk mengetahui apakah ada modul React lain yang sedang dirender. AFAIK kami mencoba menjalankan React dalam isolasi sebanyak mungkin sehingga beberapa instance React dapat bekerja dalam konteks global yang sama tanpa masalah.

Jika tidak, kami mungkin dapat memperbarui pesan kesalahan dan menyebutkan kasus ini juga jika tidak terlalu membingungkan.

Ya, saya membandingkan React1 === React2 dan itu adalah false (React1 dari index.js dan React2 dari file menggunakan hook). Ketika ini terjadi, kait gagal dengan pesan kesalahan umum di atas.

Masalah ini adalah untuk meningkatkan kesadaran akan kasus ini dan mungkin memperbaiki pesan kesalahan dalam beberapa cara untuk membantu orang yang menghadapi ini. Ini mungkin sangat tepi sekalipun.

Yup, saya mencoba npm menautkan paket yang saya buat. Itu melempar kesalahan yang sama karena paket lain juga menggunakan kait tetapi dengan React-nya sendiri. Saya harus mempublikasikan paket saya ke NPM dan kemudian mengimpornya langsung dari NPM. Dengan begitu kesalahannya hilang, tetapi saya harap ini diperbaiki karena menerbitkan paket tanpa mengujinya buruk, jelas

Lerna monorepos juga mengalami hal ini ketika kait khusus didefinisikan dalam satu paket dan digunakan oleh yang lain karena dependensi yang disinkronkan menggunakan salinan reaksi mereka sendiri.

Saya memiliki solusi (retas) saat ini menggunakan npm-link-shared dan skrip prestart npm untuk pada dasarnya mengganti ketergantungan react satu paket dengan symlink ke yang lain, jadi mereka menggunakan contoh yang sama.

"prestart": "npm-link-shared ./node_modules/<other package>/node_modules . react"

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan menambahkan:

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

ke properti resolve di konfigurasi webpack aplikasi utama saya.

Jelas kesalahan saya menggunakan dua salinan React tetapi saya setuju bahwa akan lebih bagus jika pesan kesalahannya lebih baik. Saya pikir ini mungkin mirip dengan: https://github.com/facebook/react/issues/2402

@mpeyper Berhasil . Terima kasih

@apieceofbart Itu berhasil untuk saya. Terima kasih untuk sarannya. 👍

Seperti yang saya pahami, masalah ini muncul ketika ada banyak salinan React dalam bundel yang sama.

Apakah ini juga menjadi masalah jika dua bundel terpisah dengan salinan React mereka sendiri mem-bootstrap aplikasi React mereka sendiri pada elemen dom yang terpisah, seperti yang dijelaskan di sini: https://medium.jonasbandi.net/hosting-multiple-react-applications-on- dokumen yang sama-c887df1a1fcd

Saya pikir yang terakhir adalah pola "integrasi" umum yang digunakan misalnya dalam kerangka meta spa tunggal ( https://github.com/CanopyTax/single-spa ).

Saya juga mengalami masalah ini bahkan dengan versi reaksi yang sama persis, mengembangkan kait yang akan diterbitkan sendiri rusak saat menggunakan npm-link . Mendapatkan pesan hooks can only be called inside the body of a function component tidak membantu yang sama. Solusi alias @apieceofbart memecahkan ini untuk saya. Terima kasih banyak!

Masalah yang sama di sini ketika saya npm link sebuah paket ke aplikasi utama saya. Saya tidak bisa membuat babel-plugin-module-resolver bekerja.
Ia mengatakan:
Could not find module './node_module/react'
Ini menjengkelkan karena mencegah saya menguji komponen saya secara lokal sebelum menerbitkannya.

Saya memperbaiki masalah saya dengan menghapus tanda sisipan di "react": "^16.7.0-alpha.2"
Ini komentar lengkapnya: https://github.com/facebook/react/issues/14454#issuecomment -449585005

Saya menggunakan Benang, dan memperbaikinya dengan memaksa resolusi di package.json saya:

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

Sama disini!!

Hanya ingin meninggalkan catatan di sini untuk siapa saja yang mungkin memiliki masalah ini dengan cara yang sama seperti yang saya lakukan.

Kami menjalankan React dan Rails dengan permata react-rails dan merender komponen langsung ke tampilan Rails. Saya menerima kesalahan ini setiap kali versi baru aplikasi didorong, karena Turbolinks mengambil bundel JS baru dari <head> yang memuat instance tambahan dari React. Solusinya adalah meminta Turbolinks melakukan pemuatan ulang halaman penuh ketika mendeteksi bundel telah berubah: https://github.com/turbolinks/turbolinks#reloading -when-assets-change

Ini tampaknya telah menyelesaikannya untuk kami.

Saya sangat bersemangat untuk akhirnya menempatkan Hooks ke dalam produksi, dan kita semua berutang banyak terima kasih kepada semua orang yang memungkinkan. Mereka _ ton _ menyenangkan untuk dikerjakan dan telah membuat kode saya lebih pendek dan lebih deklaratif.

Sebagai peringatan, masalah ini masih relevan dalam versi yang dirilis dengan pesan kesalahan tidak membantu yang sama dari "Kait hanya dapat dipanggil di dalam isi komponen fungsi."

Apakah ini sesuatu yang bisa diperbaiki? Saya membayangkan itu mungkin menjadi semakin umum karena semakin banyak pengembang mulai mengimplementasikan fitur-fitur baru, dan pesan kesalahan yang lebih jelas akan sangat membantu sebagai pengganti "perbaikan" langsung.

Sekali lagi terima kasih atas semua kerja keras dan selamat atas rilisnya! Ini benar-benar serangkaian fitur yang luar biasa.

Sunting : Seharusnya melihat lebih dekat pada PR terbuka, baru saja menemukan #14690 yang membahas ini. Terima kasih @threepointone!

@taylorham Tautan di komit belum mengarah ke apa pun. Saya akan menunggunya, tetapi ini adalah masalah yang saya alami sejak menggunakan kait dalam paket _(mulai npm link )_ yang ditautkan dan tidak mungkin untuk bekerja dengannya secara lokal tanpa penerbitan.
Setelah melihat beberapa masalah, saya pikir ini adalah masalah dengan react-hot-loader yang mengkompilasi komponen ke kelas, tetapi bahkan setelah mereka merilis versi dengan dukungan Hook , itu masih gagal dengan cara yang sama.
Saya sudah mencoba banyak peretasan yang berbeda tetapi tidak berhasil. Saya tidak tahu mengapa semua orang belum terkena masalah ini

@dotlouis Ya, sejauh ini hanya pesan kesalahan yang diperbarui dan masalahnya sendiri masih menyakitkan.

Satu-satunya hal yang berhasil bagi saya adalah membuat aplikasi apa pun yang saya kembangkan bergantung pada instance perpustakaan React dengan menggunakan "react": "link:../my-library/node_modules/react" .

• tidak ada resolusi yang diusulkan yang berhasil untuk saya, dan saya sudah mencoba semuanya
• mencoba menginstal pada konteks implementasi proyek dan banyak HOC
• mulai dari proyek kosong berhasil
• saya terus mencari penyebabnya

[ok] bagi saya, koreksi bukan tentang package.json atau reaksi ganda lainnya karena: saya memiliki themeProvider global di atas aplikasi saya, yang berasal dari konteks. Menggantinya dengan "useContext Hook" (sambil menulis ulang sebagai comp fungsional) tampaknya menjadi satu-satunya solusi
Mungkin ada masalah ketika

<GoodOldContext iam={a class component}>
    <BrandNewHook>
             errors : Hooks can only be called inside the body of a function component #35
     </BrandnewHook>
</GooOldContext>
export withGoodOldContext.consumer(here component)

Saya sedang mengembangkan komponen di mana ada folder example yang menggunakan create-react-app .

Melakukan ini di package.json menyelesaikan masalah ini untuk saya:

{
    ...
    "dependencies": {
        "my-component": "link:..",
        "react": "link:../node_modules/react",
        "react-dom": "link:../node_modules/react-dom",
        "react-scripts": "2.1.3"
    },
    ...
}

@taylorham @DylanVann Terima kasih atas masukannya kawan. Sayangnya, itu masih tidak berhasil untuk saya.
Dan saya tidak dapat menemukan dokumentasi apa pun tentang protokol link: yang Anda gunakan ini.
Pada dasarnya, dikatakan bahwa "react-spring" (dep lain yang juga menggunakan react sebagai dependensi) tidak dapat menemukan react-dom . Bisakah Anda mengarahkan saya ke beberapa dokumentasi tentang "react": "link:../some/path" ?

Saya menggunakan paket UI yang ditautkan juga dan saya dapat memperbaiki masalah ini.
Anda perlu mengekspor react renderToString dari UI (paket tertaut).
Saya membuat fungsi render dalam paket tertaut.

Hanya untuk konteks yang lebih baik - https://github.com/facebook/react/issues/14257

Terima kasih @theKashey. @gaearon tampaknya berpikir bahwa itu adalah perilaku normal. Saya mendapatkan bahwa Bereaksi tidak boleh dimuat dua kali, tetapi apa cara yang disarankan untuk bekerja dengan paket lokal yang ditautkan?

Saya juga memiliki masalah dengan ruang kerja Lerna yang disinkronkan dengan benar. Ini adalah trik yang saya gunakan untuk membuatnya bekerja. Pastikan untuk menjalankan npm install setelahnya.

"dependencies": {
    "react-dom": "file:../common/node_modules/react-dom",
    "react": "file:../common/node_modules/react"
}

Ada banyak cara untuk menyelesaikannya, dan resolusi benang biasanya tidak membantu - ini lebih terkait dengan "alat pembangun"

• untuk webpack gunakan aliases - hanya "keras" alias semuanya bebek seperti react ke satu file

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
     react: path.resolve(path.join(__dirname, './node_modules/react')),
   }

• untuk paket gunakan alias yang sama, tetapi tentukan di package.json - https://parceljs.org/module_resolution.html#aliases
• untuk nodejs (non lelucon) Anda dapat menggunakan memerlukan kontrol

import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});

• untuk bercanda gunakan moduleNameMapper

"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

@theKashey terima kasih atas wawasan Anda, ini masuk akal ketika kami mempertimbangkan bagaimana resolusi modul dilakukan (bawah, lalu ke atas pohon), tetapi dari sudut pandang pengguna saya tidak menemukan ini sangat praktis. Ketika saya npm link sebuah paket, saya berharap itu berfungsi tanpa harus menghubungkan ulang dependensi secara eksplisit. Ini membuat pengembangan paket secara lokal cukup menyakitkan.

Ini adalah landasan, ini adalah bagaimana node_modules dirancang untuk bekerja, inilah mengapa Anda mungkin memiliki dua versi Button dalam dua versi utama yang berbeda, dan modul dependen akan dengan mudah menemukan yang "benar" versi paket.
Ini adalah bagaimana seharusnya bekerja sepanjang waktu.

Node.js internal cukup mudah - coba buka file dengan menambahkan semua awalan yang diketahui (seperti node_modules ) atau ekstensi (seperti js , ts , json ); jika tidak ada yang ditemukan, naik satu direktori ke atas. Satu-satunya cara untuk "memperbaikinya" - ganti sistem resolusi modul nodejs.

yarn pnp akan melakukan itu, dan mungkin menyelesaikan masalah. yarn workspaces , yang mungkin _hoist_ membagikan paket ke atas - juga akan menyelesaikan masalah tanpa melibatkan "keajaiban".

npm workspaces ? Tidak ada sekarang.

Saya benar-benar akhirnya mengalihkan proyek saya untuk menggunakan ruang kerja. Ini menyelesaikan ini tanpa harus menggunakan resolusi, dan pengangkatan/struktur bermanfaat.

Yang satu ini adalah penggaruk kepala. Saya mencoba pengaturan webpack resolve.alias tetapi tidak berhasil, mencoba banyak pengaturan juga tetapi sayangnya tidak pernah benar-benar berhasil membuatnya berfungsi, tetapi inilah cara saya akhirnya berhasil membuatnya berfungsi:

Inilah struktur folder saya:

Proyek
|
+-- node_modules
|
+-- membangun
| |
| +-- index.js
|
+-- contoh (buat-reaksi-aplikasi)
| |
| +-- package.json

Saya harus memodifikasi package.json saya di dalam folder contoh, pada dasarnya menarik reaksi dari node_modules 'utama' proyek berdasarkan saran @jmlivingston , beginilah akhirnya:

  "dependencies": {
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "2.1.5"
  },

Sekarang setelah itu saya menjalankan npm install dan kemudian saya menjalankan npm link , itu berhasil.

Semoga ini bisa membantu orang lain dan menghemat waktu.

Jadi ada perbaikan untuk masalah ini? Saya sudah mencoba sebanyak mungkin rekomendasi di sini dan tidak berhasil. Saya menggunakan create-react-app dan TypeScript. Menggunakan React/React-dom 16.8.3. Ini adalah proyek baru yang saya buat 2 hari yang lalu sangat sederhana. Saya menggunakan useSpring() dan animasi.div. Terima kasih

@guru-florida apakah Anda menggunakan router reaksi?

Saya menggunakan tumpukan yang sama seperti Anda (typescript & create-react-app) dan masalah saya dengan atribut render . Mengubahnya menjadi component berhasil.

Sebelum:

<Route path="/signup" render={SignUp} />

Setelah:

<Route path="/signup" component={SignUp} />

Semoga membantu..!

@mikeyyyyyy Tidak, tidak menggunakan React Router yang satu ini. Terima kasih atas tipnya karena saya berada di proyek terakhir saya mencoba menggunakan pegas dan memiliki masalah yang sama.

Saya mengalami masalah ini dengan tautan npm (dalam aplikasi parsel), npm link .../whatever/node_modules/react tampaknya tidak menyelesaikannya, berfungsi dengan baik dengan komponen non-hook

@tj Saya kira Anda memiliki masalah dengan ssr. Solusi cepat adalah mengekspor fungsi reaksi atau keseluruhan reaksi dari paket tertaut dan mengimpornya ke paket server Anda

@seeden ahh saya tidak menggunakan SSR, hanya SPA w/ Parcel. Saya memiliki ui pkg secara internal untuk barang-barang saya sendiri dan aplikasi yang sedang saya kerjakan, keduanya memiliki versi react yang sama, tampaknya aneh bahwa ada duplikat tapi mungkin itu masalah Parcel

@tj oh, begitu. Maka semoga berhasil dengan masalah yang sangat aneh ini. Saya menghabiskan satu minggu dengan ini

Jadi ada perbaikan untuk masalah ini?

Tidak ada masalah di sini sendiri. Seperti yang dijelaskan di halaman ini , React membutuhkan panggilan useState() untuk berada pada objek react yang sama dengan objek react sebagai "dilihat" dari dalam react-dom . Jika bukan itu yang terjadi pada Anda, itu berarti Anda menggabungkan dua salinan React pada halaman — yang buruk dengan sendirinya dan juga merusak beberapa fitur lain sebelum Hooks. Jadi, Anda tetap ingin memperbaikinya. Halaman ini berisi cara umum untuk mendiagnosis untuk memperbaikinya.

Kami membiarkan diskusi ini terbuka untuk berbagi solusi tertentu ketika orang mengalami masalah ini. Tapi itu bukan masalah yang bisa "diperbaiki" oleh siapa pun kecuali Anda.

Saya mengalami masalah ini dengan tautan npm (dalam aplikasi parsel), tautan npm .../whatever/node_modules/react tampaknya tidak menyelesaikannya, berfungsi dengan baik dengan komponen non-hook

Apakah Anda keberatan membuat kasus repro kecil?

@gaearon akan melakukannya, harus punya waktu untuk menggali lebih banyak minggu depan

Untungnya, require-control telah memperbaiki masalah kami dengan konteks statis yarn link + SSR + styled-components 4. Terima kasih @theKashey 👍

Saya mencoba semuanya di sini dan gagal. Itu sebenarnya sesuatu yang berbeda yang tidak didokumentasikan di sini. Hal itu berkaitan dengan sensitivitas kasus dari reaksi impor . Dalam beberapa kasus kami memiliki:

import React from 'react'

Dan di lainnya:

import React from 'React'

Pada beberapa sistem file (unix, osx) ini menyebabkan Webpack membuat dua salinan React.

Ini menyebabkan kebingungan yang luar biasa karena saya dapat dengan jelas melihat bahwa kami hanya memiliki satu salinan React; tapi itu bukan cara kami mengimpornya.

Tes pada dokumentasi reaksi juga berjalan dengan baik karena jelas hanya menggunakan huruf kecil.

Kedengarannya seperti itu layak disebutkan dalam dokumen?

Bagi saya alasan beberapa contoh React adalah Webpack DllPlugin. Untuk DLL vendor saya, saya tidak menyertakan react dan react-dom ke daftar entri saya, namun, saya memiliki perpustakaan lain yang memerlukan react atau react-dom jadi DLL saya berisi react dan react-dom (pemeriksaan cepat file json manifes dapat mengungkapkannya). Jadi, ketika saya menjalankan kode, dan mengimpor React ke dalam aplikasi itu memuatnya dari node_modules , tetapi dalam kode vendor React diperlukan dari file DLL mereka.

Keseluruhan : hati-hati dengan file DLL dan pastikan modul yang Anda sertakan tidak menyertakan dependensi tambahan yang tidak Anda perlukan jika tidak, Anda akan mengimpornya dua kali lipat.

Saya dapat memperbaikinya dengan memperbarui react-hot-loader ke 4.6.0

ini melakukan trik untuk barang npm link di Parcel:

"alias": {
        "react": "../ui/node_modules/react",
        "react-dom": "../ui/node_modules/react-dom"
    }

tidak yakin apakah itu yang akan coba digunakan untuk pembuatan produksi, tampaknya agak rumit tetapi setidaknya berfungsi untuk pengembangan

@theKashey OMG man, berhasil! Saya telah mencoba banyak solusi berbeda yang disarankan orang terkait dengan masalah ini: mengotak-atik package.json deps, melacak "dua reaksi" di seluruh proyek, memeriksa apakah saya melanggar *aturan kait` (yang saya tidak), tetapi saya pikir opsi Anda dengan:

alias: {
      react: path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
    }

memungkinkan kami untuk memindahkan proyek kami ke lvl berikutnya, menggunakan kait di app-as-a-lib kami.

Ini adalah hasil webpack.config.js

npm ls react

kembali

[email protected] D:\code\project
`-- (empty)

untuk saya

console.log(window.React1 === window.React2) mengembalikan nilai true
pada titik ini saya pikir itu SSR yang menyebabkan masalah

Memperbarui. Itu memang disebabkan oleh perilaku SSR React-apollo (https://github.com/apollographql/react-apollo/issues/2541)
Meningkatkan ke 2.3.1 memperbaikinya

Hai teman-teman, tim kami menghadapi masalah ini dan membutuhkan beberapa hari untuk menyelesaikannya.

solusi kerja untuk kami

Solusi A: tentukan posisi paket yang akan dicari, seperti yang disebutkan di atas

  alias: {
      react: path.resolve(path.join(__dirname, './node_modules/react')),
      'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
    }

Solusi B: gunakan webpack resolve.modules untuk memprioritaskan folder node_modules yang tepat untuk mencari modul

latar belakang kasus dan mengapa itu terjadi

Hal pertama yang pertama, itu bukan kesalahan reaksi, itu bahkan bukan kesalahan lerna, tetapi reaksi, webpack, dan npm-link mungkin perlu mengambil beberapa tanggung jawab.

Persyaratan kasus:

-Non monorepo:

• memiliki paket yang disinkronkan
• paket symlinked telah mengekspor komponen menggunakan kait
• membuat halaman sisi klien reaksi
  
  
  
  • Jika mengerjakan monorepo
  
  
• paket disinkronkan
• paket mendapat versi dependensi yang berbeda (bahkan perbedaan versi tambalan), sehingga bahkan ruang kerja akan terpecahkan saat 2 reaksi diinstal
• paket masuk mengimpor paket symlink yang menggunakan kait

Contoh

Struktur

- mono repo root
  - packages
    - ComponentWithHooks (peerDependency: react@^16.8.1)
    - ProductA (dependency: ComponentWithHooks, dependency: react@^16.8.4)
    - ProductB (dependency: react@^16.8.1)

Setelah bootstrap dengan ruang kerja, itu akan memutuskan untuk

- mono repo root
  - node_modules
    - react(16.8.1)
  - packages
    - ComponentWithHooks
      - node_modules (empty)
    - ProductA
      - node_modules
        - react(16.8.4)
    - ProductB
      - node_modules (empty)

Dan setelah Anda melayani ProductA dengan webpack atau mungkin yang lain, itu akan berisi 2 instance reaksi.

Kode di ProductA, akan mencari ProductA/node_modules/react .

Tetapi ComponentWithHooks yang diimpor akan mencari mono repo root/node_modules/react .

Mengapa? Ingat aturan pencarian npm? Jika tidak dapat menemukan modul di folder node_modulesnya sendiri, ia akan mencari node_modules induknya...

Jadi alat seperti webpack menerapkan aturan ini secara default dengan sempurna.
Tidak ada salahnya solusi util mono repo menjadi populer.
Dan paket normal tidak akan memperhatikan ini karena kebanyakan dari mereka tidak memerlukan instance tunggal sebagai reaksi dan redux.

Saya mengalami masalah yang sama menggunakan reproduksi yang sangat mendasar menggunakan contoh ruang kerja benang - https://github.com/mwarger/yarn-workspace-hooks-repro

Saya memiliki component-library yang ditulis dalam TypeScript dan dibundel dengan parsel. example-demo adalah yang akan menampilkan component-library ini dan merupakan aplikasi CRA yang baru dibuat. Semua paket umum direkatkan dengan benang, jadi secara teori seharusnya hanya ada satu versi reaksi yang tersedia. Namun, panggilan React.useEffect yang saya lakukan di index.tsx menyebabkan kesalahan yang membawa saya ke masalah GitHub ini.

Semuanya bekerja sampai hook ditambahkan. Untuk mereproduksi kesalahan, batalkan komentar pada baris 7-9 di component-library/src/index.tsx

Semoga saya melakukan sesuatu yang konyol yang saya abaikan. Mohon saran untuk setiap langkah yang dapat saya gunakan untuk mencoba dan memperbaiki ini. Terima kasih!

Sunting Tindak lanjut: Output skrip debug yang disarankan di bawah ini mencetak true untuk saya. Tampaknya saya tidak memiliki dua Reacts.

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

Butuh beberapa jam bagi saya sehingga mungkin layak untuk dicatat di sini.

Dalam kasus saya, saya meletakkan baris <script defer src="./dist/bundle.js" /> di kepala templat HTML, yang berfungsi seperti biasa saat tidak menggunakan kait React. Semua solusi tidak bekerja dan cek window.React1 == window.React2 mengembalikan true dalam kasus ini.

Karena webpack akan menyuntikkan tag skrip sesudahnya, templat tidak boleh memiliki tag skrip sendiri. Hapus tag skrip dari templat, buat React berfungsi dengan kait (pun intended) lagi.

Dalam kasus saya, saya memiliki aplikasi React yang npm ditautkan ke dependensi yang sedang saya kerjakan. Ini akan melakukan trik sampai saya dapat memperbaiki beberapa dependensi yang perlu memindahkan react dan react-dom ke dev dan peer deps.

1. Dari aplikasi: cd node_modules/react && npm link
2. Dari aplikasi: cd node_modules/react-dom && npm link react
3. Dari paket tertaut: npm link react

Mengapa itu berhasil? Halaman peringatan kesalahan menyebutkan bahwa "agar Hooks berfungsi, impor reaksi dari kode aplikasi Anda harus diselesaikan ke modul yang sama dengan impor reaksi dari dalam paket react-dom".

Saya masih mengalami masalah ini, meskipun mencoba semua hal di atas. Konfigurasi webpack4/babel standar, dengan plugin preset-env dan preset-react . Versi react/react-dom saya disematkan ke 16.8.4 menggunakan resolusi benang (di mana juga window.React1 === window.React2 cek dari atas mengembalikan true ).

Ini adalah penggunaan paling dasar:

import React, { useState } from "react";

function MyComp() {
  const [hello] = useState(0);

  return <div>HELLO {hello}</div>;
}
export default MyComp;

Apakah ada yang punya ide lain?

EDIT: Untuk memperjelas, kesalahan ditampilkan sebagai react.development.js:88 Uncaught Invariant Violation: Hooks can only be called inside the body of a function component. sesuai OP

Dalam kasus saya, saya memiliki aplikasi React yang npm ditautkan ke dependensi yang sedang saya kerjakan. Ini akan melakukan trik sampai saya dapat memperbaiki beberapa dependensi yang perlu memindahkan react dan react-dom ke dev dan peer deps.

1. Dari aplikasi: cd node_modules/react && npm link
2. Dari aplikasi: cd node_modules/react-dom && npm link react
3. Dari paket tertaut: npm link react

Mengapa itu berhasil? Halaman peringatan kesalahan menyebutkan bahwa "agar Hooks berfungsi, impor reaksi dari kode aplikasi Anda harus diselesaikan ke modul yang sama dengan impor reaksi dari dalam paket react-dom".

Terima kasih! Ini bekerja sangat baik untuk saya. (bahkan ketika saya menggunakan tautan npm dan situasi campuran symlink)

Saya telah mencoba semua yang disarankan di atas dan masih mengalami kesalahan.

Dengan sedikit bantuan dari @inverherive, kami menemukan bahwa enzyme-adapter-react-16 masih menyebabkan masalah.

Sementara kami memperbarui react-test-renderer ke versi terbaru (16.8.4) karena baru-baru ini menambahkan dukungan kait, kami menemukan melalui npm ls react-test-renderer bahwa versi terbaru dari enzyme-adapter-react-16 (1.11.2 ) memiliki ketergantungan internal [email protected] , yang tidak mendukung kait.

├─┬ [email protected]
│ └── [email protected] 
└── [email protected]

Untuk memperbaiki masalah ini , serta mengikuti perbaikan @chulanovskyi , karena kami menggunakan yarn, kami menambahkan resolusi react-test-renderer ke package.json kami. Ini memaksa semua referensi react-test-renderer untuk menggunakan "16.8.4".

  "resolutions": {
    "react-test-renderer": "16.8.4"
  },

Ini sangat membuat frustrasi, semoga ini bisa membantu orang lain. Terima kasih kepada @chulanovskyi dan @theKashey atas saran mereka juga.

Ini akan melakukan trik sampai saya dapat memperbaiki beberapa dependensi yang perlu dipindahkan react dan react-dom ke dev dan peer deps.

@ajcrews (saya mungkin melewatkan sesuatu tetapi) saya npm link perpustakaan internal dan perpustakaan itu memiliki react di peerDependencies dan devDependencies dan saya masih membutuhkan Anda perbaiki terlepas untuk menyelesaikan kesalahan. Temuan yang bagus!

Saya akan memposting tetapi menemukan solusi

Saya memiliki perpustakaan komponen, dengan contoh aplikasi CRA di dalamnya untuk pengembangan

Di package.json aplikasi CRA saya harus memodifikasi react dan react-dom untuk "meminjam" dari package.json komponen root

"dependencies": {
  "react": "link:../node_modules/react",
  "react-dom": "link:../node_modules/reac-dom",
}

Ini sangat membuat frustrasi, semoga ini bisa membantu orang lain. Terima kasih kepada @chulanovskyi dan @theKashey atas saran mereka juga.

@Paddy-Hamilton Selalu periksa file kunci Anda setelah instalasi. Saya mengalami masalah yang sama di mana yarn menduplikasi react-test-renderer . Dengan sedikit operasi di lockfile Anda, Anda dapat memperbaikinya:

yarn add -D react-test-renderer

-react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.1:
+react-test-renderer@^16.0.0-0:
  version "16.8.4"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
  dependencies:
    object-assign "^4.1.1"
    prop-types "^15.6.2"
    react-is "^16.8.4"
    scheduler "^0.13.4"

+react-test-renderer@^16.8.5:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.5.tgz#4cba7a8aad73f7e8a0bc4379a0fe21632886a563"
+  integrity sha512-/pFpHYQH4f35OqOae/DgOCXJDxBqD3K3akVfDhLgR0qYHoHjnICI/XS9QDwIhbrOFHWL7okVW9kKMaHuKvt2ng==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.5"
+    scheduler "^0.13.5"

yarn check sudah akan memperingatkan Anda

$ yarn check
warning "enzyme-adapter-react-16#react-test-renderer@^16.0.0-0" could be deduped from "16.8.5" to "[email protected]"

kemudian dedupe secara manual dengan menerapkan tambalan berikut:

-react-test-renderer@^16.0.0-0:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.4.tgz#abee4c2c3bf967a8892a7b37f77370c5570d5329"
-  integrity sha512-jQ9Tf/ilIGSr55Cz23AZ/7H3ABEdo9oy2zF9nDHZyhLHDSLKuoILxw2ifpBfuuwQvj4LCoqdru9iZf7gwFH28A==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.4"
-    scheduler "^0.13.4"
-
-react-test-renderer@^16.8.5:
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.8.5:

Sekarang Anda memiliki satu versi react-test-renderer tanpa resolutions atau webpack alias shenanigans.

Untuk masalah apa pun yang terkait dengan paket tertaut dan create-react-app ikuti facebook/create-react-app#6207

Ada banyak cara untuk menyelesaikannya, dan resolusi benang biasanya tidak membantu - ini lebih terkait dengan "alat pembangun"

• untuk webpack gunakan aliases - hanya "keras" alias semuanya bebek seperti react ke satu file

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
     react: path.resolve(path.join(__dirname, './node_modules/react')),
   }

• untuk paket gunakan alias yang sama, tetapi tentukan di package.json - https://parceljs.org/module_resolution.html#aliases
• untuk nodejs (non lelucon) Anda dapat menggunakan memerlukan kontrol

import {setAliases} from 'require-control';
setAliases({
  'react': path.resolve(path.join(__dirname, './node_modules/react'))
});

• untuk bercanda gunakan moduleNameMapper

"jest": {
    "moduleNameMapper": {
      "^react$": "<rootDir>/node_modules/$1",
    },

Ini melakukannya untuk saya.

@ajcrews
Terima kasih! Bekerja dengan cemerlang bagi saya!

Saya membuat kasus uji kecil dengan pengaturan minimal menggunakan react 16.8.6, electron-webpack dan RHL. Khususnya, ketika kesalahan ini terjadi, seluruh browser (dalam pengaturan ini, elektron) baru saja mulai menggunakan banyak waktu CPU)

https://github.com/PerfectionCSGO/reeee

Saya telah memukul kepala saya atas masalah ini selama 3 hari sekarang. Awalnya saya pikir RHL adalah masalahnya tetapi menghapusnya sepenuhnya dari proyek ini tidak akan menyelesaikan masalah.

npm ls react hanya mengembalikan satu hasil. Saya memastikan bahwa perbaikan di atas diterapkan dengan versi terbaru + alias webpack.

Kode akan bekerja di kotak pasir.

Dalam paket web/situs web sederhana, kode akan berfungsi tanpa masalah. Namun, dengan electron-webpack masalah ini tetap ada.

  "dependencies": {
    "i18next": "^15.0.9",
    "i18next-browser-languagedetector": "^3.0.1",
    "react": "^16.8.6",
    "react-dom": "npm:@hot-loader/react-dom",
    "react-hot-loader": "^4.8.2",
    "react-i18next": "^10.6.1",
    "source-map-support": "^0.5.11",
    "tslint": "^5.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react": "^16.8.12",
    "@types/react-dom": "^16.8.3",
    "electron": "^4.1.3",
    "electron-builder": "20.39.0",
    "electron-webpack": "^2.6.2",
    "electron-webpack-ts": "^3.1.1",
    "typescript": "^3.4.1",
    "webpack": "^4.29.6"
  }

Saya harap seseorang dapat memberi saya petunjuk ...

Ketika saya mengganti react-l18next dengan mobx-react-lite dan menggunakan pengamat, itu akan menyebabkan efek yang sama.

Sehubungan dengan masalah saya, saya telah menyelesaikannya dengan menyikut webpack elektron dan menggunakan solusi elektron yang lebih 'murni'. Dugaan saya adalah bahwa itu adalah rantai alat yang digunakan di webpack atau babel yang tidak kompatibel.

Saya mengalami masalah ini hanya dalam produksi. Tidak ada solusi yang diusulkan di sini yang membantu.
Kasus penggunaan saya adalah aplikasi pihak ketiga yang dimuat sebagai widget di situs web lain.
Ketika situs pertama kali dimuat dengan widget semuanya bekerja dengan baik, tetapi ketika pengguna menavigasi ke halaman yang berbeda dan kembali ke halaman dengan widget, saya mendapatkan kesalahan kait.

Perhatikan bahwa kesalahan hanya terjadi ketika navigasi tidak menyebabkan halaman dimuat ulang.

Saya menghabiskan berjam-jam mencoba mencari tahu apa masalahnya. Akhirnya masalahnya adalah dengan cuplikan kode yang memuat bundel aplikasi. Pada halaman ubah bundel dapat memuat beberapa kali, yang menyebabkan saya kira beberapa instance Bereaksi dalam ruang nama yang sama.

Saya memperbaikinya dengan memeriksa apakah skrip sudah dimuat.
Pertama saya mengekspor perpustakaan saya ke namespace global dengan menggunakan konfigurasi 'perpustakaan' Webpack:

output: {
    library: 'myLib',
    ...
}

Dan kemudian di skrip pemuatan saya memeriksa apakah perpustakaan ada atau tidak:

if(!window.myLib){
    var bz = document.createElement('script');
    bz.type = 'text/javascript'; 
    bz.async = true;
    bz.src = 'https://path/to/bundle.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(bz, s);
}

Ini mungkin kasus penggunaan yang sangat spesifik tetapi saya harap ini dapat membantu orang lain.

Jadi kami memiliki aplikasi React utama yang memanfaatkan webpack.
Kami mencoba membuat pustaka React kecil yang menggunakan kait, kami mencoba menukar bundler (parcel, pure babel, webpack).
Saat mencoba implementasi webpack kami, kami menandai react dan react-dom sebagai eksternal, jadi kami tidak akan menyertakannya dalam bundel kami.
Kami masih mendapatkan pengecualian kait yang sama saat menggunakan tautan npm.

Membuat symlink ke reaksi aplikasi utama memang berhasil, tetapi itu bukan alur kerja dev yang bagus.

Saya mengalami kesulitan mencari tahu penyebab mendasar dari masalah ini. Apa yang menghasilkan duplikat React instance?

Hai @adriene-orange , Anda mungkin menemukan posting saya https://github.com/facebook/react/issues/13991#issuecomment -472740798 untuk penjelasan lebih lanjut.

Multi-instance yang disebabkan oleh tautan npm adalah karena node secara default akan mencari di node_modules folder induk untuk modul jika tidak dapat ditemukan di package.json Anda.

Solusi paling sederhana dan terbaik yang kami temukan untuk ini adalah dalam konfigurasi webpack (atau alat lain) paket masuk Anda, ada sesuatu seperti resolve.modules untuk secara manual mengatur jalur dan memesan jalur yang akan dicari modul webpack. Ex., resolve: { modules: [path.resolve(PACKAGE_ROOT, 'node_modules'), 'node_modules'] } , akan memaksa webpack untuk menemukan modul di node_module root paket masuk Anda terlebih dahulu. Jika tidak dapat menemukan modul di root, cari di folder node_modules relatif...

Jadi kami memiliki aplikasi React utama yang memanfaatkan webpack.
Kami mencoba membuat pustaka React kecil yang menggunakan kait, kami mencoba menukar bundler (parcel, pure babel, webpack).
Saat mencoba implementasi webpack kami, kami menandai react dan react-dom sebagai eksternal, jadi kami tidak akan menyertakannya dalam bundel kami.
Kami masih mendapatkan pengecualian kait yang sama saat menggunakan tautan npm.

Membuat symlink ke reaksi aplikasi utama memang berhasil, tetapi itu bukan alur kerja dev yang bagus.

Saya mengalami kesulitan mencari tahu penyebab mendasar dari masalah ini. Apa yang menghasilkan duplikat React instance?

Hai saya mendapatkan kesalahan ini

Pelanggaran Invarian: Panggilan hook tidak valid. Kait hanya dapat dipanggil di dalam tubuh komponen fungsi. Hal ini dapat terjadi karena salah satu alasan berikut:
1. Anda mungkin memiliki versi React dan renderer yang tidak cocok (seperti React DOM)
2. Anda mungkin melanggar Aturan Kait
3. Anda mungkin memiliki lebih dari satu salinan React di aplikasi yang sama
Lihat https://fb.me/react-invalid-hook-call untuk tips tentang cara men-debug dan memperbaiki masalah ini.

   5 | 
   6 | const useApiHelper = (url, reducer) => {
>  7 |     const [state, dispatch] = useReducer(reducer, {});
     |                                                  ^
   8 | 
   9 |     useEffect(() => {
  10 |         fetch(url).then(res => res.json())

Contoh kode https://stackblitz.com/edit/react-mbze9q

Ketika saya mencoba mengakses fungsi ini di dalam kasus uji, saya mendapatkan kesalahan di atas

@abhishekguru Anda memanggil Hook di luar komponen di sini dalam pengujian Anda:

test('API test', async () => {
  const newState = useAPIHelper( // <- Called outside of a component
    'https://jsonplaceholder.typicode.com/posts',
    reducer
  )
  console.log(newState, 'new');
  // expect(newState[samUrl].loading).toEqual(true);
});

Seperti yang dinyatakan kesalahan, kait hanya dapat dipanggil dari kait lain, atau dari dalam komponen. Dalam kasus Anda, Anda dapat membuat komponen untuk pengujian Anda dan merender komponen tersebut yang menggunakan pengait jika Anda mau.

Steker tak tahu malu

@abhishekguru jika Anda memiliki pengait umum yang digunakan di antara beberapa komponen dan Anda ingin mengujinya secara independen dari komponen tertentu, Anda dapat mempertimbangkan untuk menggunakan react-hooks-testing-library .

import { renderHook } from 'react-hooks-testing-library'

test('API test', async () => {
  const { result } = renderHook(() => useAPIHelper( // <- now called within a component
    'https://jsonplaceholder.typicode.com/posts',
    reducer
  ))

  console.log(result.current, 'new');
  // expect(result.current[samUrl].loading).toEqual(true);
});

Saya ingin bergabung di sini karena kami hanya memiliki masalah dengan RSK. Kami menghapus require.cache node pada perubahan file. Ini secara efektif memberikan reload panas di server. Menghapus require.cache node akan menyebabkan masalah dengan perpustakaan yang perlu memiliki satu salinan. Inilah solusi kami:

Object.keys(require.cache)
  .filter(key => !isSingleton(key)) // This is needed here because react cannot be deleted without causing errors
  .forEach(key => {
    delete require.cache[key]
  })

Fungsi isSingleton kami berisi daftar pustaka yang harus memiliki satu salinan. Aturan praktis yang baik adalah perpustakaan apa pun yang perlu didefinisikan di peerDependencies

https://yarnpkg.com/lang/en/docs/dependency-types/#toc -peerdependencies

Juga memiliki masalah yang sama dan untuk saya

window.React1 = require('react');
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2); // true

juga mengembalikan true , mencoba semua saran yang diberikan tetapi tidak ada yang berhasil. Akhirnya ternyata:

Webpack menambahkan tag skrip dengan bundle.js ke dalam index.html secara otomatis. Masalah saya adalah karena saya menambahkan bundle.js ke index.html secara eksplisit , yang dulu berfungsi dengan baik sebelum kait.

Bagi saya masalah adalah setelah babel 7 memutakhirkan, tidak ada versi terpisah dengan npm ls react. Menghapus
"react-hot-loader/babel" dari .babelrc memperbaiki masalah untuk sementara.

Saya mencoba semua solusi di atas, tetapi masih mendapatkan kesalahan.
Akhirnya, saya menemukan itu disebabkan oleh paket why-did-you-update , dan ada masalah terkait untuk itu. Sekedar petunjuk bagi siapa saja yang menggunakan paket serupa yang memodifikasi Bereaksi.

Saya dapat memperbaiki ini dalam skenario react-native + Yarn Workspaces .

Di root package.json

{
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/react-native",
      "**/react-native/!(react)/**"
    ]
  }
}

Ini mencegah kode react-native diangkat (seperti yang diperlukan untuk reaksi asli), sementara masih mengangkat react , sehingga semua modul bersama menggunakan reaksi yang sama.

Di metro.config.js

module.exports = {
  watchFolders: [
    path.resolve(__dirname, '../', 'shared-module'), 
    // ...more modules
    path.resolve(__dirname, '../', '../') // to make sure the root `react` is also part of the haste module map
  ]
}

Konfigurasi metro memungkinkan bundler mengetahui di mana semuanya berada.

Saya menemukan cara untuk memecahkan masalah bagi orang-orang yang secara lokal mengembangkan paket npm misalnya, dan mereka mencoba mengujinya secara lokal dengan memuat paket mereka menggunakan tautan npm di semacam aplikasi contoh.

Saya beralih dari aplikasi contoh (cara asli menguji komponen) ke Storybook . Saat menggunakan buku cerita dalam proyek, React tidak akan dimuat dua kali karena akan menggunakan yang sama dengan yang digunakan komponen. Saat menggunakan tautan npm, saya memiliki masalah dengan kait dan Bereaksi dimuat dua kali, juga saya tidak dapat membuat solusi di atas berfungsi. Jadi Storybook memecahkan masalah saya, dan sekarang saya memiliki cara untuk menguji komponen saya melalui beberapa skenario dan pada saat yang sama membuat beberapa dokumentasi interaktif untuk itu.

Berbagi pengalaman saya dengan ini, menyelesaikannya untuk proyek kami dengan menggunakan eksternal webpack untuk pustaka komponen untuk mengecualikan react dan react-dom dari build.

Kami baru saja mulai dengan React. Dalam kasus saya, kita mulai dengan Lerna monorepo dengan paket pustaka komponen Neutrino dan paket klien webapp Neutrino. Aplikasi web menggunakan produk build dari pustaka komponen tertaut. Setelah beberapa percobaan dan mendapatkan true untuk instance React yang sama, saya telah mencari cara untuk mengecualikan react dan react-dom dari build library komponen sama sekali.

Tampaknya solusi pola desain umum untuk pustaka komponen webpack jadi di pustaka komponen saya telah menambahkan ke konfigurasi webpack:

"externals": {
  "react": "react",
  "react-dom": "react-dom"
}

Saya tidak perlu meletakkan tag skrip global dalam paket webapp untuk react dan react-dom . Saya menduga Webpack menyediakannya ke pustaka komponen dalam implementasi require sama seperti yang diberikannya ke webapp.

penyebab lain dari kesalahan ini adalah salah mengonfigurasi Route React Router,

Ini gagal :

<Route render={MyHookedComponent}/>

, tapi ini berhasil :

<Route component={MyHookedComponent}/>

Misalnya. anda perlu menggunakan component bukan render . Ini adalah kesalahan yang mudah dibuat karena render umumnya bekerja dengan baik dengan komponen berbasis kelas.

Saya sedang mengerjakan biolerplate dan ingin mempublikasikannya ke npm, dan mengembangkannya dengan bantuan tautan npm Itu berfungsi dengan baik tetapi setelah beberapa waktu mulai memberikan kesalahan Invalid Hook call warning .
Saya mencoba menggunakan tautan npm ../myapp/node_modules/react tetapi tidak menyelesaikan masalah saya,
Dan dibandingkan React1 === React2 itu benar serta npm ls react juga selesai, itu hanya menunjukkan satu paket.

Dan saya tidak menggunakan webpack juga, saya hanya menambahkan beberapa lapisan di luar create-react-app jadi saya tidak bisa memaksa aplikasi saya untuk menggunakan modul reaksi yang diinstal secara lokal.
Terjebak dengan itu dari 3 hari terakhir._

Sama seperti @hnagarkoti .

Saya mengalami peringatan ini selama rendering sisi server (SSR) karena saya menggunakan versi lama react-apollo jadi hanya ingin meninggalkan tautan ini di sini untuk membantu jiwa malang berikutnya yang mengalami masalah ini:

https://github.com/apollographql/react-apollo/issues/2541

Singkatnya, getDataFromTree tidak mendukung kait reaksi hingga versi [email protected] .

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan menambahkan:

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

ke properti resolve di konfigurasi webpack aplikasi utama saya.

Jelas kesalahan saya menggunakan dua salinan React tetapi saya setuju bahwa akan lebih bagus jika pesan kesalahannya lebih baik. Saya pikir ini mungkin mirip dengan: #2402

Adakah saran untuk melakukan ini dengan create-react-app?

^ Oke, solusi yang saya gunakan untuk menyelesaikan ini untuk create-react-app adalah dengan menggunakan react-app-rewired dan customize-cra.

Ini config-overrides.js saya:

const {
    override,
    addWebpackAlias,
  } = require("customize-cra");

const path = require('path'); 

module.exports = override( 
    addWebpackAlias({
        react: path.resolve('./node_modules/react')
    })
)

Contoh proyek: https://github.com/dwjohnston/material-ui-hooks-issue/tree/master

Di tim kami, kami memiliki komponen navigasi universal yang bekerja di puluhan aplikasi, semua aplikasi ini berasal dari reaksi 15.0.0 hingga reaksi 16.8.0, untuk mengaktifkan navigasi yang diterapkan di atas kait, kami harus menggabungkannya dengan reaksi terbaru

Dalam hal ini, memiliki beberapa contoh reaksi adalah persyaratan mendasar bagi kami, saya ingin tahu apakah tim resmi reaksi bersedia menyelesaikan masalah ini di masa mendatang?

@dwjohnston solusi saya untuk create-react-app adalah membuat konfigurasi webpack untuk pengembangan. create-react-app secara internal menggunakan webpack, webpack-dev-server, dan babel-loader sehingga membuat konfigurasi webpack hanya untuk pengembangan tidak terlalu buruk karena dependensi sudah ada di sana tetapi masih banyak biaya yang harus diperoleh yang bekerja dengan benar.

Saya memiliki masalah pada create-react-app : https://github.com/facebook/create-react-app/issues/6953 untuk menambahkan dukungan webpack alias atau yang serupa.

Jika ada yang juga menggunakan create-react-app dan mengalami titik nyeri ini, dapatkah Anda memberikan jempol untuk masalah itu?

@ricokahler - Terima kasih telah menunjukkannya. Saya senang melihat bahwa saya bukan satu-satunya orang dengan masalah ini - saya juga mengalaminya dengan konteks.

Apakah ada sumber daya yang Anda ketahui yang membahas masalah ini lebih lanjut?

Jika Anda berada di kapal saya, Anda telah menambahkan paket komponen reaksi dari direktori lokal, dan sekarang secara otomatis membangun dan menginstalnya, bersama dengan salinan node_modules-nya sendiri (karena menggunakan tautan npm untuk melakukan ini), memberikan Anda app 2 salinan atau Bereaksi sekarang.

Saya telah mengatasinya dengan menghapus node_modules//node_modules sebelum menjalankan aplikasi. Untuk melakukan ini secara otomatis:

"prestart": "rimraf ./node_modules/<my_package>/node_modules"

Hal ini juga saya alami ketika melakukan RSK.
Jika Anda menggunakan Lerna untuk menguji pustaka React Anda secara lokal, Anda dapat menambahkan "react/react-dom/react-router" sebagai peerDependencies di pustaka Anda, tetapi Anda tidak boleh menambahkannya sebagai devDependencies. (ini membuatnya duplikat)
Anda dapat menggunakan node --preserve-symlinks sehingga dapat mencari ke repo induk yang menginstal peerDependencies.
Untuk lelucon, Anda perlu menambahkan jalur repo induk ke opsi "jest.moduleDirectories" sehingga Jest dapat menyelesaikannya

@apieceofbart berfungsi untuk saya, thx!

Saya mengalami kesalahan ini saat memuat komponen React eksternal, misalnya dengan modul JS. Mereka sepenuhnya berada di luar proyek, dimuat dengan dynamic import() (baik jsonp untuk dukungan lebih lanjut). Untuk mengatasi masalah ini, kami meneruskan/menyuntikkan React sebagai properti untuk setiap modul. Ini berfungsi, tetapi setiap modul bergantung pada aplikasi React yang berisi. Kami mencoba menghapus dependensi.

Seperti yang telah disebutkan orang lain, properti ini menghilangkan React karena dapat digunakan untuk semua jenis mikro front end. Masalahnya adalah ada efek samping dari pembuatan status global di runtime JS saat mengimpor React untuk digunakan sebagai perpustakaan.

Saya mengerti bahwa untuk kasus penggunaan sederhana, memiliki efek samping itu berarti React "lebih mudah digunakan." Tetapi ketika halaman web terdiri dari beberapa skrip dari beberapa langkah bundel, salah satunya harus dapat mengatur React (melakukan efek samping itu secara eksplisit) dan yang lain cukup memanggil fungsi perpustakaan.

Saya masih memiliki masalah dengan react-bootstrap: # https://github.com/react-bootstrap/react-bootstrap/issues/3965

Bagi siapa pun yang terjebak mencoba membuat lib untuk React, coba https://github.com/whitecolor/yalc ini berfungsi jauh lebih baik daripada symlink.

@mpeyper bekerja dengan baik. Terima kasih

@apieceofbart Itu berhasil untuk saya. Terima kasih untuk sarannya. 👍

Bagi saya masalah ini disebabkan ketika saya menavigasi ke direktori proyek saya di PowerShell dan tidak menggunakan huruf besar nama direktori di jalur. Saya membuat proyek di users/…/… bukannya Users/…/...
Masalah teratasi ketika saya memperbaiki kesalahan kapitalisasi dan membuat ulang proyek.

Bagi saya, melakukan:

    "react": "file:../my-library/node_modules/react",
    "react-dom": "file:../my-library/node_modules/react-dom",

Memperbaiki sebagian besar tetapi tidak cukup, saya terus mendapatkan kesalahan hooks can only be called inside the body of a function component .

Ternyata itu karena beberapa komponen perpustakaan saya yang diekspor seperti:

export default Radium(withTranslation()(MyComponent))

:x:

Dimana withTranslation adalah HOC dari react-i18next dan Radium adalah HOC dari Radium.

Dan mengekspornya seperti ini:

export default withTranslation()(Radium(MyComponent))

:heavy_check_mark:
Memperbaiki semuanya.

Perhatikan bahwa react-i18next ada di versi 10 yang menggunakan React Hooks

@mikeaustin Kami mengalami masalah yang sama. Apakah Anda memiliki contoh "melewati/menyuntikkan Bereaksi sebagai properti untuk setiap modul"?

Masih mendapatkan masalah ini, coba semua langkah:

• ruang kerja benang (melalui lerna)
• diperiksa jika ada satu reaksi dep, ya

Beberapa hal yang dapat berdampak:

• menggunakan webpack dengan libraryTarget
• menggunakan TypeScript

$ npm ls react-dom
/xxx
└── [email protected]

$ npm ls react
/xxx
└── [email protected]

paket root.json

{
  ...
  "workspaces": [
    "packages/*",
  ],
  "devDependencies": {
    ...
  },
  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6"
  },
  "resolutions": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "**/react": "16.8.6",
    "**/react-dom": "16.8.6"
  }
}

@JeremyGrieshop Saya memiliki masalah yang sama dan itu berhasil untuk saya, Terima kasih.

Tambahkan "prestart" di package.json Anda seperti di bawah ini:

"scripts": {
    "prestart": "rimraf ./node_modules/<my package>/node_modules",
    "start": "react-scripts start",
    "build": "react-scripts build",
  },

Saya mengalami masalah ini dan itu bukan karena beberapa versi reaksi/reaksi-dom
Dalam perkakas khusus yang saya gunakan, cache yang dibutuhkan sedang dihapus (untuk tujuan di luar diskusi ini), misalnya:

Object.keys(require.cache).forEach((key) => {
      delete require.cache[key];
    });

Jadi fyi kepada orang-orang di luar sana, jika Anda melakukan sesuatu seperti ini - itu akan mempengaruhi React Hooks, jadi hindari jika Anda bisa

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan menambahkan:

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

ke properti resolve di konfigurasi webpack aplikasi utama saya.

Jelas kesalahan saya menggunakan dua salinan React tetapi saya setuju bahwa akan lebih bagus jika pesan kesalahannya lebih baik. Saya pikir ini mungkin mirip dengan: #2402

Untuk siapa pun di luar sana yang menggunakan Parcel, jika dist adalah tempat file terkompilasi Anda, Anda harus menambahkan:

  "alias": {
    "react-mediator": "./dist"
  },

Untuk package.json Anda dan kemudian Anda masih dapat link (npm atau yarn) perpustakaan untuk pengembangan/pengujian lokal.

@mikeaustin Kami mengalami masalah yang sama. Apakah Anda memiliki contoh "melewati/menyuntikkan Bereaksi sebagai properti untuk setiap modul"?

Anda dapat menggunakan React Context untuk menyebarkan "React" itu sendiri, dan membuat HoC untuk menyuntikkan properti ke setiap komponen. Anda dapat melewatkan apa pun dalam api seperti api.React, tetapi ini menjadi sedikit rumit untuk membungkus HoC di sekitar komponen tersebut (karena sekarang mereka hanya tersedia di dalam komponen, tidak tersedia untuk diekspor.

const withReact = Component = props => (
  <ReactContext.Provider value={api => <Component api={api} {...props} /> } />
)

Saya menghabiskan beberapa jam untuk ini, jika mengubah kode sumber untuk mengubah pesan kesalahan dan menambahkan lebih banyak info ke dalamnya tidak mudah dan Anda membutuhkan lebih banyak waktu, setidaknya tambahkan catatan ini ke dalam doc ,

_p.s: react memiliki dokumentasi yang bagus, tetapi saya pikir halaman itu perlu ditinjau._

@OliverRadini

Saya dapat memperbaikinya dengan memperbarui react-hot-loader ke ^4.6.0

Maaan, itu memperbaikinya.
@gaearon @theKashey Bagaimana kalau menambahkan ini ke https://reactjs.org/warnings/invalid-hook-call-warning.html sehingga orang tidak membuang waktu mereka karena versi react-hot-loader yang lebih lama?

Saya pikir itu sudah cukup baik didokumentasikan di selusin masalah.

Hai, saya menggunakan Bereaksi di aplikasi dan perpustakaan . Saya menggunakan perpustakaan di dalam aplikasi. Saya berhasil memperbaiki dua masalah instans reaksi dengan menggunakan:

Dalam konfigurasi webpack aplikasi :

    alias: { react: path.resolve( '__dirname', '..',  'node_modules', 'react' ) // Adapt this to match your file tree

Dalam konfigurasi webpack perpustakaan

  externals: {
    react: 'react', // Case matters here
    'react-dom': 'react-dom' // Case matters here
  }

Jadi saya mengalami masalah dengan memanggil kait dari file yang tidak ditranskripsikan (*.js):

index.js :

import ReactDOM from 'react-dom';
import './index.css';
import App from './app';

ReactDOM.render(App(), document.getElementById('root'));

app.jsx

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const BaseContext = React.createContext();

const initialState = {
  woo: true
};

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const Home = () => <h1>You're at home.</h1>;

const App = () => {
  // eslint-disable-next-line
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return (
    <Router>
      <BaseContext.Provider value={initialState}>
        <BaseContext.Consumer>
          <div className="welcome">
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
              </ul>
            </nav>
            <header className="header">
              <h1>Welcome!</h1>
            </header>
            <Route path="/" exact component={Home} />
          </div>
        </BaseContext.Consumer>
      </BaseContext.Provider>
    </Router>
  );
};
export default App;

Adakah saran, dengan asumsi itu bukan "Pindahkan ke file JSX dan transpile"?

Sepertinya tidak ada yang berhasil untuk saya, saya menggunakan campuran stimulus dan reaksi, saya memiliki aplikasi hybrid, mulai menggunakan kait dan gagal segera setelah saya mulai menambahkan turbolink :(

Sunting: untuk saat ini saya memecahkan masalah saya dengan menambahkan data-turbolinks-track="reload" data-turbolinks-eval="false" ke tag skrip yang saya gunakan sehingga harus melakukannya untuk saat ini

saya punya pertanyaan yang sama, setelah 4 jam, saya menemukan bahwa jenkins util missing transform .babelrc files to server。。。

Mengapa ini membuat kesalahan?

$ npm ls react
[email protected] /mnt/g/development/javascript/pow-vehmain
└── [email protected]`

Invalid hook call...
ServiceVisitMaintenance
src/components/ServiceVisit/ServiceVisitMaintenance.js:6
  3 | import { ServiceVisitForm } from './ServiceVisitForm';
  4 | 
  5 | const data = [{ id: 1, description: 'Ford' }, { id: 10, description: 'Edsel' }];
> 6 | const ServiceVisitMaintenance = () => {
  7 |   const [vehicleList, setVehicleList] = useState([]);
  8 |   return (
  9 |     <div>

ServiceVisitMaintenance.js:

import React, { useState } from 'react';
import { ServiceVisitForm } from './ServiceVisitForm';
const data = [{ id: 1, description: 'Ford' }, { id: 10, description: 'Edsel' }];
const ServiceVisitMaintenance = () => {
  const [vehicleList, setVehicleList] = useState([]);
  return (
    <div>
      <ServiceVisitForm vehicleList={data} />
    </div>
  );
};

export { ServiceVisitMaintenance };

Silakan periksa apa versi react-dom Anda.

$npm ls reaksi-dom
[email protected] /mnt/g/development/javascript/pow-vehmain
[email protected]

Saya menghadapi ini ketika saya mengekspor connect(mapStateToProps)(MyComponent) dari perpustakaan dan menggunakan perpustakaan itu di aplikasi CRA saya.

Tidak, ini adalah kesalahan buruk saya. Rutin yang memanggil ini menggunakan react-router-dom dan menggunakan prop render daripada komponen.

Apakah ada di antara Anda yang memiliki masalah yang sama tetapi dengan gatsby?

Saya mendapatkan hasil berikut setelah saya 'npm ls react':

dan 'npm ls react-dom'

Pada awalnya, saya pikir saya tidak sengaja menginstal reaksi secara global, setelah mencopot pemasangan secara global, tidak ada yang berubah. Kemudian, saya mencoba membuat proyek yang sama sekali baru di direktori yang berbeda, 'gatsby new random-name' dan menambahkan fitur kecil (tambahkan komentar, ikuti terus https://www.youtube.com/watch?v=asrdFuAxPaU&feature=youtu .be) ke gatsby-starter-default untuk menguji apakah kesalahan akan mereproduksi dirinya sendiri. Nah, untuk kecewa saya, itu!

Setiap dan semua saran akan diterima dengan baik oleh orang yang frustrasi.

Saya masih menghadapi masalah ini di buku cerita. Apakah output dari npm ls ini benar atau tidak?

Dalam kasus saya, masalahnya disebabkan oleh modul why-did-you-update .

Pengguna ruang kerja dan lerna monorepo dan mengangkat paket. yang akan memecahkan masalah.

kami mengalami masalah yang sama dengan RSK. tampaknya berfungsi dengan mengatur externals: [“react”] di konfigurasi webpack kami kemudian memuat secara manual react/umd/react.development.js . ini adalah rasa sakit, namun dan akan senang untuk menemukan cara yang lebih sederhana.

Ok jadi semoga ini bisa membantu seseorang. Kami memuat webpack runtime.js beberapa kali secara tidak sengaja yang menyebabkan banyak salinan React ada. Pastikan Anda hanya memuat runtimeChunk (runtime.js) sekali.

Jika Anda memiliki masalah dengan tes Jest Anda seperti saya, inilah yang tampaknya memperbaikinya untuk saya.
Tambahkan ini di jest.config.js Anda

moduleNameMapper: {
    '^react$': '<rootDir>/node_modules/react/'
  }

Alangkah baiknya jika kesalahan ini setidaknya menunjuk ke file di mana itu terjadi. Saya tidak sengaja memanggil hook dalam fungsi normal dan sulit untuk di-debug.

Saya menemukan penyebab lain dari masalah dan solusi untuk itu.

Lingkungan saya adalah electron dan webpack tetapi ini mungkin membantu juga orang-orang non-elektron. Saya menghabiskan hari-hari yang menyakitkan untuk mencoba menyelesaikan mengapa saya mendapatkan pesan kesalahan ini setelah memutakhirkan ke React 16.9 (dan React DOM 16.9).

Dalam kasus saya sepertinya saya memiliki dua Reacts di aplikasi, tetapi saya tidak dapat menemukan dua perpustakaan fisik di node_modules, bahkan tidak menggunakan npm ls react . Saya bahkan menggunakan webpack-bundle-analyzer untuk melihat apa yang ada di dalam bundel.

Akhirnya, saya menemukan bahwa saya tidak memiliki dua reaksi secara fisik dalam proyek, tetapi React dan React DOM direferensikan/dimuat dua kali dalam file HTML . Ini dapat dengan mudah diperiksa dengan menambahkan misalnya console.log("React load") ke index.js dari perpustakaan React.

Sumber sebenarnya terhubung ke electron-webpack . react dan react-dom tidak ditandai sebagai eksternal oleh karena itu dimuat dalam bundel serta kemudian dari node_modules karena perlu digunakan dalam beberapa modul lain.

Solusi sesederhana menambahkan baris ini ke webpack.renderer.config.js :

module.exports = {
    externals: [
        "react",
        "react-dom"
    ],
};

Oke, jadi jika ada orang di sini yang menggunakan parcel.js, untuk beberapa alasan aneh saya bisa lolos dengan impor berikut: import React from 'React'; dan begitu saya mulai menggunakan kait reaksi, saya mendapatkan kesalahan pelanggaran invarian tanpa menyadarinya karena saya salah mengimpor menggunakan from 'React' bukannya from 'react' . Ups.

Apakah ada di antara Anda yang memiliki masalah yang sama tetapi dengan gatsby?

Saya mendapatkan hasil berikut setelah saya 'npm ls react':

dan 'npm ls react-dom'

Pada awalnya, saya pikir saya tidak sengaja menginstal reaksi secara global, setelah mencopot pemasangan secara global, tidak ada yang berubah. Kemudian, saya mencoba membuat proyek yang sama sekali baru di direktori yang berbeda, 'gatsby new random-name' dan menambahkan fitur kecil (tambahkan komentar, ikuti terus https://www.youtube.com/watch?v=asrdFuAxPaU&feature=youtu .be) ke gatsby-starter-default untuk menguji apakah kesalahan akan mereproduksi dirinya sendiri. Nah, untuk kecewa saya, itu!

Setiap dan semua saran akan diterima dengan baik oleh orang yang frustrasi.

Ya saya mengalami masalah yang sama seperti Anda. Saya telah mengikuti saran di sini ... ,

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

Saya menambahkan React2 ke file indeks di bawah halaman. Ini mengembalikan false.

Deduped berarti bahwa npm seharusnya menghilangkan ketergantungan dependensi lihat di sini ...

Paket yang sama tidak harus diinstal dua kali! Itu hanya dirujuk.

Juga, itu memindahkan paket "naik pohon" (meratakan pohon). Ini sangat masuk akal karena jika tidak, satu paket harus mencari di node_modules dari beberapa paket lain (yang akan agak berantakan) dan membantu menyederhanakan dependensi.

Anda dapat memvalidasi ini, karena setiap paket dalam grafik ketergantungan Anda yang mengatakan deduped, dapat ditemukan setidaknya sekali lagi dalam grafik, biasanya pada "tingkat yang lebih tinggi".

Meskipun ternyata dedupping tidak berhasil.

Apa yang sudah kamu coba?

Saya mendapatkan kesalahan ini ketika mencoba membangun dengan NextJS. Beberapa komponen menggunakan material-ui dan masalahnya hilang jika saya menghapusnya. Saya tidak menggunakan komponen gaya. Saya mencoba menghapus node_modules dll tanpa hasil. Saya mencoba menambahkan alias dan menyelesaikan react di file next.config.js dan package.json saya tanpa hasil. Saya menggunakan reaksi 16.8.6, reaksi-dom 16.8.6, dan selanjutnya 9.0.4. npm ls mengatakan hanya ada satu dari masing-masing. Saya tidak menggunakan tautan npm apa pun.

Repositori: https://github.com/dancancro/questions/tree/invalid-hook-call

Codesandbox ada di sini: https://codesandbox.io/s/github/dancancro/questions/tree/invalid-hook-call/?fontsize=14

Stackoverflow: https://stackoverflow.com/questions/57647040/nextjs-invalid-hook-call-hooks-can-only-be-call-inside-of-the-body-of-a-fun

Kesalahannya ada di sini: https://Gist.github.com/dancancro/2dfafb053aaaedfade406fd4f67eb68a
... render -> renderToString -> ReactDOMServerRenderer.read -> ReactDOMServerRenderer.render -> Object.WithStyles [sebagai render] ...

Hook yang menyinggung adalah panggilan useStyles() pada baris 17428 dari file berikut dalam fungsi withStyles . Cari "var class = useStyles(props)". Masalahnya adalah dengan kode yang dihasilkan nextjs. Kode yang saya tulis tidak menggunakan withStyles atau kait apa pun atau fungsi apa pun yang dimulai dengan "gunakan*"

https://raw.githubusercontent.com/dancancro/questions/invalid-hook-call/.next/static/development/pages/index.js

PEMBARUAN: menghapus ini dari next.config.js saya memecahkan masalah:

    webpack: config => {
        config.externals = [
            '/'
        ]
        return config
    },

Saya menemukan solusi dengan menghapus react dan react-dom dari folder node_modules paket tertaut saya.

Saya berada di kapal yang sama dengan banyak dari Anda. Saya memiliki paket perpustakaan yang sedang saya kerjakan secara lokal, dan saya tidak ingin repot menerbitkannya setiap kali saya perlu melihat perubahan dalam paket aplikasi saya. Saya menautkannya dan mulai mendapatkan kesalahan ini.

Inilah solusinya:

• Paket A: paket kode perpustakaan Anda, telah npm link 'd
• Paket B: paket kode aplikasi Anda. Memiliki symlink di folder node_modules Anda untuk paket A

1. Build package A. Mine mengeluarkan asetnya ke dist/ , termasuk node_modules
2. Dalam folder node_modules yang didistribusikan paket A, hapus react dan react-dom
3. ???
4. Laba!

Perhatikan bahwa saya telah menginstal versi React yang sama di kedua paket. Anda harus memulai ulang semua proses yang berjalan.

Hapus why-did-you-update yang tidak kompatibel berfungsi untuk saya. (https://github.com/maicki/why-did-you-update/issues/52)

tidak kompatibel mengapa-kamu-perbarui

@bertho-zero use dapat menggunakan devtools baru atau hook saya useWhyDidYouUpdate

@brunolemos Ini bagus tetapi lebih membatasi karena Anda harus meletakkannya di setiap komponen.

Solusi @ dmart914 memecahkan masalah bagi saya. Saya juga memiliki paket yang ditautkan sehingga saya dapat menguji perpustakaan saya tanpa menerbitkan perubahan ... adakah yang menemukan solusi untuk ini? Ini bukan pengalaman yang bagus untuk menerbitkan perpustakaan sumber terbuka dan harus mendokumentasikan penghapusan paket NPM tertentu agar kait mulai bekerja secara ajaib ...

Solusi untuk menghapus modul react paket tertaut tidak berfungsi jika paket tersebut memiliki pengujian yang memerlukan react (mis @testing-library/react atau @testing-library/react-hooks ), jadi sepertinya kita masih membutuhkan cara yang lebih baik untuk menangani ini.

Aplikasi saya terdiri dari dua bagian. Aplikasi web utama dan modul yang dimuat secara dinamis ke dalam aplikasi web. Aplikasi web dan modul menggunakan React 16.9.0.
Modul dimuat ke dalam aplikasi web menggunakan pernyataan React.lazy() dan dynamic import().
Saat modul dimuat, kesalahan "Panggilan kait tidak valid" muncul.

Dalam kasus saya karena aplikasi utama dan modul dibangun secara terpisah, mereka tidak mengetahui satu sama lain dan akan memiliki salinan reaksi mereka sendiri. Saya mencoba saran berikut yang ditemukan di utas tetapi tidak menyelesaikan masalah.

1. Menambahkan alias di webpack.config modul yang menunjuk ke reaksi aplikasi utama seperti yang disarankan oleh apieceofbart .
   alias: {
   bereaksi: path.resolve('../../node_modules/react')
   }

2. Mencoba mengarahkan dependensi reaksi dalam package.json modul ke aplikasi utama.
   "ketergantungan": {
   "react-dom": " file:../common/node_modules/react-dom ",
   "react": " file:../common/node_modules/react "
   }

Saya pikir reaksi harus mendukung menjalankan banyak salinan ketika datang ke modul yang dimuat secara dinamis.

Berdasarkan beberapa tanggapan di atas, inilah yang berhasil bagi saya:

1. Menambahkan yang berikut ke config/webpack.config.js

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}

1. Diedit package.json

"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}

"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}

1. Diedit public/index.html

<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
...

Setelah itu, saya dapat menjalankan kait di perpustakaan saya menggunakan React yang dimuat dari CDN, sementara Jest masih memuat salinan reaksi dari node_modules (diinstal dari devDependencies).

Semoga membantu

Saya menghadapi masalah ini ketika saya mencoba mengubah komponen saya dari komponen fungsional ke komponen classfull dan saya juga mendapatkan kesalahan ini, jadi inilah solusi saya mengenai kesalahan ini semoga membantu dalam kasus Anda juga.

coba gunakan komponen tingkat tinggi dalam kasus ini

impor Bereaksi dari 'bereaksi';
impor PropTypes dari 'prop-types';
impor { withStyles } dari '@material-ui/styles';
impor Tombol dari '@material-ui/core/Button';

gaya const = tema => ({
akar: {
latar belakang: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
batas: 0,
batasRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
warna putih',
tinggi: 48,
pengisi: '0 30px',
},
});

class HigherOrderComponent memperluas React.Component {

memberikan(){
const { kelas } = this.props;
kembali (
Komponen tingkat tinggi
);
}
}

HigherOrderComponent.propTypes = {
kelas: PropTypes.object.isRequired,
};

ekspor default withStyles(styles)(HigherOrderComponent);

Saya menggunakan Benang, dan memperbaikinya dengan memaksa resolusi di package.json saya:

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

Apakah Anda menambahkan paket Induk atau Anak?

Berdasarkan beberapa tanggapan di atas, inilah yang berhasil bagi saya:

1. Menambahkan yang berikut ke config/webpack.config.js

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom'
  }
}

1. Diedit package.json

"devDependencies" : {
  ...
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
}

"peerDependencies": {
  "react": "^16.9.0",
  "react-dom": "^16.9.0"
}

1. Diedit public/index.html

<head>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
...

Setelah itu, saya dapat menjalankan kait di perpustakaan saya menggunakan React yang dimuat dari CDN, sementara Jest masih memuat salinan reaksi dari node_modules (diinstal dari devDependencies).

Semoga membantu

Jangan tersinggung, tetapi itu mengganggu bahwa solusi seperti ini harus diikuti. Saya telah mencoba menyelesaikan bug ini selama beberapa hari terakhir tanpa bergantung pada peretasan semacam itu.

Saya sedang mengerjakan perpustakaan yang dapat digunakan kembali yang berisi komponen menggunakan kait. Saya perlu mengujinya dalam proyek aktual sebelum menerbitkannya. Satu-satunya solusi untuk ini adalah menggunakan yarn|npm link . Saya membundel perpustakaan menggunakan rollup, dan saya dapat memverifikasi bahwa bundel tersebut tidak berisi versi reaksi. Ketika saya membundel (webpack) aplikasi yang menggunakan perpustakaan, bug/masalah muncul. Ini terjadi untuk aplikasi create-react-app dan next.js telanjang juga. Kedua kerangka kerja menggunakan webpack di latar belakang.

Adakah yang sudah menemukan solusi berkelanjutan?

Dengan membuang npm|yarn link sepenuhnya, saya dapat menyelesaikan masalah tersebut. Sebagai gantinya, saya menggunakan perpustakaan yang indah ini , yang agnostik dari struktur proyek Anda. Ini juga memungkinkan Anda untuk tetap menggunakan webpack sebagai bundler Anda, jadi Anda tidak perlu mendeklarasikan _react_ dan _react-dom_ sebagai external atau alias . Sayangnya, ini memperkenalkan beberapa direktori baru dan mengunci file ke proyek, tapi hei itu berfungsi... secara lokal dan bahkan di dalam wadah buruh pelabuhan kami.

Mungkin ini akan sedikit membantu dalam daftar:

Tautan

@GabrielBB terima kasih, ini berhasil untuk saya

@dmart914 terima kasih! Sejauh ini satu-satunya solusi yang bekerja untuk saya :)

Saat ini mendapatkan peringatan React Invalid Hook Call saat menggunakan pengaturan minimal dan langsung.

Komponen fungsi ini:

1. Menggunakan versi yang sama untuk React dan ReactDOM.
2. Mengikuti Aturan Kait.
3. Hanya memiliki satu salinan React.

__Ketergantungan__
[email protected]
[email protected]
[email protected]
[email protected]

Dan menjalankan webpack test.js -o main.js untuk membangun.

Saya mengharapkan file ini untuk:

• Render kotaknya.
  
  
  
  • Jeda debugger sebelum memanggil React.useState .
  
  
  • Buat boolean test dan perbarui panggilan balik updateTest .
  
  
  • Melempar kesalahan React.
  
  
  • Saat render, lakukan callback React.useEffect .
  
  
  • Melempar kesalahan React.
  
  

Apakah saya melakukan sesuatu yang salah, atau ada hal lain yang terjadi?

// test.js
import React, { createElement as el } from 'react';
import ReactDOM from 'react-dom'; 

function Item() {
  debugger;
  const [test, updateTest] = React.useState(false); // Throws React error.

  React.useEffect(function checkTest() { // Throws React error.
    console.log("checking test", test);
  }, [test]);

  React.useEffect(function tester() { // Throws React error.
    if (!test) {
      setTimeout(() => {
        console.log("changing value for test");
        updateTest(true);
      }, 1000);
    }
  }, [test]);

  return el('div', {style: {width: '300px', height: '300px', 'background-color': 'green', border: '1px solid red'}});
}

function render() {
  let root = document.querySelector('#primary');
  if (!root) {
    root = document.createElement('div');
    document.body.appendChild(root);
  }

  ReactDOM.render(Item(), root);
}

render();

Anda lupa untuk benar-benar membuat elemen. Anda secara serempak memanggil Item() sebelum mencapai panggilan ReactDOM.render . Anda harus melewati el(Item) .

Benar! Terima kasih atas informasinya.

Saya berada dalam situasi yang sama dengan beberapa komentator lainnya. Saya menggunakan webpack untuk mengubah beberapa komponen reaksi (beberapa di antaranya menggunakan kait) dan menempatkan kode yang ditranspilasikan ke dalam folder lib . Saya menambahkan reaksi ke bidang externals dari konfigurasi webpack sehingga tidak dibundel dengan kode komponen. Saya ingin menggunakan komponen ini dalam dua proyek terpisah - komponen ini umum di antara mereka dan jadi kami ingin mengembangkannya di satu tempat dan pembaruan tercermin di kedua aplikasi.

Jika ketergantungan ditambahkan menggunakan common-components: file:../../common-components/lib di package.json maka komponen dimuat dengan sempurna, namun menjalankan webpack tidak segera memperbarui komponen - sebaliknya saya harus menjalankan yarn upgrade common-components dan kemudian restart server dev.

Jika ketergantungan ditambahkan menggunakan common-components: link:../../common-components/lib maka menjalankan kembali webpack akan memperbarui file di node_modules aplikasi utama (karena menggunakan symlink sekarang), tetapi saya mendapatkan kesalahan di atas dari beberapa contoh reaksi. Saya kira sekarang menggunakan versi reaksi di folder common-components/node_modules .

Apakah ada cara untuk menggunakan symlink (yaitu common-components: link:../../common-components/lib ), sementara juga memastikan komponen yang ditautkan menggunakan reaksi yang ditemukan di folder node_modules aplikasi utama? Karena saya berencana menggunakan komponen ini di kedua aplikasi, saya tidak dapat menautkan paket reaksi dari salah satunya ke pustaka komponen umum dan saya ingin menghindari menautkan reaksi kedua aplikasi utama dengan yang digunakan dalam paket komponen umum. Saya telah melihat beberapa komentar yang merujuk ke bidang webpack resolve yang terdengar menjanjikan tetapi saya tidak dapat membuatnya berfungsi. Bantuan apa pun akan sangat dihargai!

edit: untuk siapa pun yang tertarik dengan kasus penggunaan kami, kami akhirnya mengubah langkah pembuatan untuk hanya menyalin file ke dalam dua proyek di mana mereka diperlukan, dan menghindari transpiling sama sekali.

Satu solusi cepat adalah tidak menerbitkan paket, tetapi cukup Dorong ke github dan impor ke proyek Anda menggunakan yarn add <git-url> .

Satu solusi cepat adalah tidak menerbitkan paket, tetapi cukup Dorong ke github dan impor ke proyek Anda menggunakan yarn add <git-url> .

Alasan banyak dari kita menggunakan tautan npm dan jalur relatif paket npm adalah untuk mengembangkan dan menguji kode tanpa harus memublikasikan perubahan ke NPM atau GitHub sebelum kita tahu itu akan berfungsi.

Kami mengalami masalah ini terkait dengan https://github.com/facebook/react/issues/13972#issuecomment -447599035 karena menurut saya ini juga dapat disebabkan oleh server Node Webpack. Kasus penggunaan kami adalah pengujian integrasi yang berjalan di dalam Jest yang menjalankan webpack() secara terprogram untuk membangun server sebelum menjalankan pengujian. Masalahnya, saya percaya, terkait dengan bagaimana ESM dan CJS bisa ada pada saat yang bersamaan.

Ambil contoh ini misalnya:

// node express server, doing server-rendering
import React from 'react';
import { ApolloProvider } from '@apollo/react-common';
import { renderToStringWithData } from '@apollo/react-ssr';

res.send(await renderToStringWithData(<ApolloProvider><App /></ApolloProvider>)

Apa yang saya lihat saat dalam sesi debugger adalah bahwa kita bisa mendapatkan dua contoh berbeda dari React dalam versi kompilasi dari file ini:

_react: {Children, ...}
_react2: {default: {Children, ...}

Di mana
_react berasal dari ESM import React from 'react' dalam file ini
_react2 berasal dari CJS var _react = _interopRequireDefault(require("react")); dari dalam node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js

Saya percaya ini menyebabkan referensi ke React tidak sama di dua tempat (file server-render, dan di dalam bundel @apollo/react-ssr ) dan dengan demikian menyebabkan kesalahan dilemparkan.

Kami menemukan bahwa ini mungkin disebabkan oleh penggunaan program webpack() dari dalam pengujian, dan telah memfaktorkan ulang pengujian tersebut menjadi pengujian ujung-ke-ujung. Pelajaran bagi kami bahwa jika masalah hanya terjadi dalam kode pengujian, Anda mungkin memiliki pengujian yang terlalu rumit.

Saya berhasil menyelesaikannya dengan benang:

cd ke myApp/node_modules/react dan yarn link

lalu di perpustakaan Anda, jalankan yarn link react

Sekarang perpustakaan Anda menggunakan versi reaksi yang sama persis dengan aplikasi utama Anda

Saya mencoba mengatur reaksi sebagai Ketergantungan rekan di lib saya tetapi kemudian lib tidak mau membangun

Bagaimana cara memperbaikinya menggunakan create-react-app tanpa mengeluarkan atau beralih ke yarn ?

Anda bisa menggunakan teknik yang sama persis menggunakan tautan npm. Tidak perlu mengeluarkan.

Menautkan react bukanlah ide terbaik saat Anda mengerjakan banyak proyek dengan versi berbeda.

@woles Anda benar sekali, tetapi dalam kasus saya, ini memecahkan masalah 'kait' saya. Saya harap pengembang reaksi datang dengan solusi yang lebih baik

Hai,
Saya memperbaiki bug ini setelah berjam-jam menyadari bahwa saya tidak sengaja menggunakan komponen secara salah di dalam router reaksi.

Aplikasi saya berfungsi tetapi dalam satu komponen saya tidak dapat menambahkan useState sama sekali. alasannya adalah saya menggunakan komponen di dalam metode render router reaksi tanpa fungsi tingkat tinggi seperti ini:
<Route exact path="/path" render={ ComponentCausingTheErrorMesage }/>
beralih ke
<Route exact path="/path" component={ ComponentNowWorkingAgain }/>
memperbaikinya untuk saya

Saya menggunakan npm link antara aplikasi dan modul yang sedang saya kerjakan secara aktif, dan saya harus memperbaikinya dengan menautkan react dan react-dom aplikasi ke modul, lalu menautkan modul ke aplikasi:

dalam aplikasi:

1. cd node_modules/react && npm link
2. sama untuk react-dom

dalam modul:

1. npm link react && npm link react-dom
2. npm link

dalam aplikasi:

1. npm link [module-name]

Semoga ini bisa membantu seseorang

Kami memiliki kait yang berfungsi di sisi klien tetapi mengalami kesalahan ini di SSR. Rekan saya menyelesaikannya dengan yang berikut ini di konfigurasi webpack sisi server kami:

const nodeExternals = require('webpack-node-externals');

const serverConfig = () => {
  // lots of config, then:
  externals: [
    nodeExternals({
      modulesFromFile: true,
    }),
  ],
}

Saya berhasil menyelesaikannya dengan benang:

cd ke myApp/node_modules/react dan yarn link

lalu di perpustakaan Anda, jalankan yarn link react

Sekarang perpustakaan Anda menggunakan versi reaksi yang sama persis dengan aplikasi utama Anda

Saya mencoba mengatur reaksi sebagai Ketergantungan rekan di lib saya tetapi kemudian lib tidak mau membangun

Ini bekerja sangat indah

Baru saja mengalami masalah ini, saat menggunakan electron-webpack, react dan material-ui secara bersamaan. Ketika saya mencoba menggunakan sesuatu dari material-ui - saya mendapatkan kesalahan ini (mis., coba gunakan komponen atau gunakan).
Kesalahan terjadi pada komponen dari material-ui.
Adakah solusi untuk kasus saya?

Hai ZVER3D, coba baca komentar saya sebelumnya. Semoga membantu!

Saya menggunakan npm link antara aplikasi dan modul yang sedang saya kerjakan secara aktif, dan saya harus memperbaikinya dengan menautkan react dan react-dom aplikasi ke modul, lalu menautkan modul ke aplikasi:

dalam aplikasi:

1. `cd node_modules/react && npm link`

2. same for `react-dom`

dalam modul:

1. `npm link react && npm link react-dom`

2. `npm link`

dalam aplikasi:

1. `npm link [module-name]`

Semoga ini bisa membantu seseorang

Sweet baby moses, ini sangat membantu saya. Bahkan tidak menganggap masalahnya sebagai versi reaksi yang berbeda!! Saya sedang membangun komponen secara lokal untuk dipublikasikan ke NPM tetapi memiliki proyek terpisah untuk mengujinya secara lokal, menggunakan tautan npm. Jelas (sekarang) mereka berdua menggunakan versi reaksi yang berbeda. Oh!

Hai ZVER3D, coba baca komentar saya sebelumnya. Semoga membantu!

Terima kasih telah mengarahkan saya ke arah yang benar. Solusi lain adalah menambahkan perpustakaan ui, yang saya gunakan ke dalam "whiteListedModules". Satu-satunya masalah adalah Anda harus melakukannya untuk semua modul yang memerlukan reaksi untuk dikompilasi.
Jadi, di package.json saya menulis ini:

"electronWebpack": {
    "whiteListedModules": [
      "@material-ui/core",
      "@material-ui/icons"
    ]
  }

Saya sedang mengembangkan aplikasi React menggunakan pendekatan monorepo. Saya memiliki aplikasi utama ( brush ) dan komponen perpustakaan reaksi ( react-gbajs ).

Jadi ketika saya mencoba merender komponen react-gbajs saya, saya memiliki kesalahan ini tentang beberapa contoh React. Jika saya menyalin dan menempelkan kode yang sama pada brush saya tidak punya masalah.
Saya mengikuti banyak pendekatan untuk memperbaikinya, tetapi saya tidak satu pun dari mereka yang menyelesaikannya (ubah build di Webpack, ruang kerja Benang, tautan npm ...)

Saya mencoba men-debug untuk memeriksa apakah saya benar-benar memiliki dua salinan os React (menggunakan console.log(window.React1 === window.React2) dari dokumen React), tetapi dievaluasi sebagai true !
(solusi SANGAT BURUK yang saya gunakan sekarang adalah meneruskan kait sebagai penyangga: <GBAEmulator useEffect={useEffect} /> ... tapi saya benar-benar tidak ingin menggabungkannya)

Adakah yang punya ide untuk memperbaikinya?

Proyek saya adalah open source dan saya menambahkan komponen perpustakaan reaksi baru ini di cabang ini: https://github.com/macabeus/klo-gba.js/blob/ac18f4d42b122c333622f502947135c2de217ce2/react-gbajs/src/index.js#L251 -L274

Halo semua,

Saya memiliki aplikasi (myApp) yang menggunakan perpustakaan khusus sebagai ketergantungan (myDepPackage). Keduanya menggunakan webpack sebagai alat build dan tentu saja saya mengalami kesalahan yang sama. Tidak ada solusi di atas yang berhasil untuk saya. Apa yang dilakukannya, adalah memaksa webpack untuk TIDAK menyertakan reaksi ke dalam bundel terakhir perpustakaan khusus (myDepPackage). Satu-satunya baris konfigurasi yang harus saya tambahkan ke konfigurasi webpack (dari myDepPackage) adalah di bawah ini:

externals: {
  react: "react",
},

Anda dapat mempelajari lebih lanjut tentang opsi "eksternal" di sini: https://webpack.js.org/configuration/externals/#externals

@tsevdos Terima kasih banyak!!! ❤️
Itu memecahkan masalah saya yang saya katakan di komentar sebelumnya.

Bagi kami, masalahnya adalah kami memiliki aplikasi React yang dapat disematkan yang dimuat di halaman dari kode pendek WordPress dan dipasang pada div dengan ID acak. Pada beberapa halaman kami memiliki beberapa aplikasi yang disematkan dan itu berfungsi dengan baik sampai kami mulai menggunakan kait.

Itu hanya akan mengeluh pada halaman yang memiliki beberapa aplikasi yang disematkan, jadi solusinya adalah memperbarui kode pendek WP untuk memuat skrip dengan build hanya sekali.

Kedengarannya sederhana dan jelas, tetapi sulit untuk diketahui! Khususnya karena itu melakukan itu dan bekerja dengan baik sampai kami menambahkan kait.

Cukup menarik, pada beberapa halaman kami memiliki aplikasi lain - berbeda - yang kami sematkan yang juga menggunakan kait, dan mereka memuat skrip/build mereka sendiri dengan React juga,... tetapi kemudian berfungsi dengan baik! Masalahnya adalah ketika itu adalah bangunan yang sama persis dimuat lebih dari sekali dan mereka menggunakan kait .

Apa yang berhasil bagi saya adalah kombinasi dari dua saran dari utas masalah ini.

Konfigurasi webpack aplikasi utama ( saran @apieceofbart )

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

Konfigurasi webpack ketergantungan ( saran @tsevdos )

  externals:
    react: 'react'
  }

Saya mengalami masalah ini dengan html-webpack-plugin dan saya menggunakan index.html terlihat seperti ini sebagai pengaturan template ke HtmlWebpackPlugin .

// webpack.config.js
plugins: [
   new HtmlWebpackPlugin({
      template: "./public/index.html"
   })
],

<!-- public/index.html -->
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>

</html>

Saya menyadari plugin menyuntikkan <script type="text/javascript" src="main.js"></script> tepat setelah <div id="root"></div> .

Jadi, ketika saya membuka alat dev dan menghasilkan html tampak seperti ini.

<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
    <script type="text/javascript" src="main.js"></script> <!-- injected from html-webpack-plugin -->
</body>

</html>

Bagi saya, itu menyebabkan Invalid Hook Call Warning .

Saya dapat menghapus peringatan dengan menghapus <script src="main.js"></script> seperti di bawah ini.

<!-- public/index.html -->
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>

</html>

Saya harap ini membantu seseorang yang mencari solusi!

Ketahuilah bahwa library yang bergantung pada React juga dapat menyebabkan masalah ini. Dalam kasus saya, saya menggunakan versi berbeda dari @emotion/core dan @emotion/styled .

https://github.com/emotion-js/emotion/issues/1470

Hai,

Solusi yang mungkin tanpa mengeluarkan adalah mencampur solusi konfigurasi alias webpack dengan library kustomisasi-cra dan react-app-rewired . Dengan cara ini Anda dapat mengganti hanya konfigurasi webpack yang diperlukan untuk menyelesaikan masalah, dengan membuat file config-overrides.js dengan:

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    react: path.resolve(path.join(__dirname, './node_modules/react')),
  }),
);

Saya mengalami masalah ini di situs Gatsby, saya menjalankan npm install dan memperbarui ke versi terbaru Gatsby dan itu memperbaiki semuanya

Jika Anda mengalami masalah dengan pengujian lelucon yang menjalankan yarn or npm test (seperti saya sebelumnya) dan menggunakan react-test-renderer , pastikan react-test-renderer cocok dengan versi react yang sama Anda menggunakan.

Contoh:

// Package.json
{
  ...
    "react" : "16.8.3",
  ...
}

Jalankan yarn add [email protected]

Saya memiliki lib dan saya memeriksa semua versi react dan react-dom di lib dan proyek utama. mereka persis sama tetapi tidak berhasil.
Namun solusi @apieceofbart bekerja untuk saya.

@apieceofbart , Anda menyelamatkan hari saya <3

Apa yang berhasil bagi saya adalah kombinasi dari dua saran dari utas masalah ini.

Konfigurasi webpack aplikasi utama ( saran @apieceofbart )

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

Konfigurasi webpack ketergantungan ( saran @tsevdos )

  externals:
    react: 'react'
  }

Sama disini. Saya perlu melakukan kedua perbaikan ini untuk membuatnya berfungsi. Penjelasan saya adalah bahwa konfigurasi kedua memberi tahu ketergantungan untuk menggunakan reaksi eksternal dengan nama 'bereaksi', dan konfigurasi pertama mengarahkan nama 'bereaksi' ke folder 'node_modules/react' di repositori utama. Oleh karena itu, keduanya diperlukan untuk membuat jembatan reaksi bekerja.

Namun, tampaknya bagi sebagian orang salah satunya sudah cukup, yang saya tidak begitu mengerti.

Apa yang berhasil bagi saya adalah kombinasi dari dua saran dari utas masalah ini.
Konfigurasi webpack aplikasi utama ( saran @apieceofbart )

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

Konfigurasi webpack ketergantungan ( saran @tsevdos )

  externals:
    react: 'react'
  }

Sama disini. Saya perlu melakukan kedua perbaikan ini untuk membuatnya berfungsi. Penjelasan saya adalah bahwa konfigurasi kedua memberi tahu ketergantungan untuk menggunakan reaksi eksternal dengan nama 'bereaksi', dan konfigurasi pertama mengarahkan nama 'bereaksi' ke folder 'node_modules/react' di repositori utama. Oleh karena itu, keduanya diperlukan untuk membuat jembatan reaksi bekerja.

Namun, tampaknya bagi sebagian orang salah satunya sudah cukup, yang saya tidak begitu mengerti.

Item kedua adalah penting!
Jika diabaikan, pada proses pembuatan, reaksi akan diekspor bersama, karena ini adalah ketergantungan internal

banyak cinta @apieceofbart !!!! Aku akan menendang mejaku menembus dinding

Jadi, masih belum ada solusi untuk layanan mikro. Saya memiliki aplikasi root dengan reaksi yang secara dinamis membutuhkan bundel dengan reaksi lain. Kita tidak bisa hanya menggunakan reaksi versi eksternal karena ada banyak tim independen dengan ketergantungan mereka sendiri. Jika kita mendorong mereka untuk menggunakan versi eksternal yang sama maka sebagian besar proyek jelas akan macet dan tidak mungkin untuk meningkatkan versi ini karena setiap proyek akan bergantung pada versi ini.

Ada ide?

Apakah ada solusi untuk menggunakan kait reaksi bersama dengan tautan npm, yang tidak perlu dikeluarkan dari CRA?

@tschellenbach
anda dapat menggunakan craco untuk menimpa konfigurasi CRA tanpa mengeluarkan.
https://github.com/gsoft-inc/craco

Terima kasih kepada @tsevdos, saya telah menyelesaikan masalah saya dan membuat tutorial tentang cara membuat paket React: https://youtu.be/esyS87NfBOw

Saya mendapatkan masalah ini dan solusi webpack tidak berlaku karena saya menggunakan paket bundler sebagai gantinya. Saya dapat memperbaikinya dengan menentukan alias di package.json aplikasi utama saya yang terlihat seperti ini

    "alias": {
        "react": "./node_modules/react",
        "react-dom": "./node_modules/react-dom"
    },

Mendapatkan masalah saat mencoba menggunakan komponen Bereaksi saya (ditulis dalam kait) di aplikasi elektron dalam proyek yang sama dengan paket json yang berbeda. Struktur file terlihat seperti ini:

- javascript
  - src
     - ComponentIWantToUse.tsx
      - package.json
- electron
   - src
     - IwantToUseItHere.tsx
      - package.json

Kedua package.json menyertakan react dan react-dom di package.json tetapi keduanya adalah versi yang sama dan saya tidak melihatnya menunjukkan dua pemasangan reaksi ketika saya melakukan npm ls react . Ada ide?

EDIT: Solusi @ewan-m berhasil!

Jadi saya mengalami kasus yang aneh, saya pikir. Sayangnya, perpustakaan pihak ketiga memiliki komponen fungsional dan berbasis kelas yang tercampur. Komponen saya di basis kode saya berfungsi. Komponen berbasis kelas dari perpustakaan bertindak sebagai tata letak yang membuat komponen saya sebagai anak. Saya yakin inilah yang memicu 'Kesalahan: Panggilan kait tidak valid.' Bagaimana saya harus mengatasinya untuk menggunakan kait, apakah saya perlu mengonversi milik saya menjadi komponen kelas?

@GrandathePanda Mencampur kelas dan komponen fungsional seharusnya tidak masalah. Jika sebuah kelas memanggil fungsional, yang memanggil hook, tidak ada masalah di sana. Satu-satunya hal yang tidak dapat Anda lakukan adalah memanggil hook langsung dari kelas.

Oke, @JeremyGrieshop maka saya masih memiliki beberapa penyelidikan yang harus dilakukan, jika saya membuat tanpa menggunakan komponen pihak ketiga, itu akan dirender dengan baik sehingga ada beberapa konflik antara perpustakaan itu dan kode saya. Jika saya harus menebak mereka menggunakan versi reaksi yang berbeda mungkin dalam paket mereka.

Oke, @JeremyGrieshop maka saya masih memiliki beberapa penyelidikan yang harus dilakukan, jika saya membuat tanpa menggunakan komponen pihak ketiga, itu akan dirender dengan baik sehingga ada beberapa konflik antara perpustakaan itu dan kode saya. Jika saya harus menebak mereka menggunakan versi reaksi yang berbeda mungkin dalam paket mereka.

Benar, periksa npm ls react react-dom dari aplikasi Anda untuk melihat apakah ada beberapa versi. Mungkin perpustakaan pihak ketiga memiliki ketergantungan dengan versi tertentu.

@JeremyGrieshop Jadi sepertinya aplikasi saya menggunakan 16.12.0 untuk reaksi dan dom dan pihak ketiga (pencarian elastis-ui) menggunakan 16.8.0 untuk reaksi dan dom. Jika saya benar, masalahnya adalah karena perpustakaan pihak ketiga 16.8.0 saya merender komponen yang dibuat dengan 16.12.0, ini akan menyebabkan masalah? Mereka juga merupakan lerna monorepo yang berpotensi memperumit ini lebih jauh setelah membaca semua komentar di atas. Masalahnya timbul dari kait useStyles yang dibuat di materialui, mereka menyediakan hoc withStyles untuk kompatibilitas mundur dan saya pikir sementara itu saya akan pergi ke rute itu. Semua perubahan pada webpack dan atau paket json yang disebutkan di atas benar-benar tampak seperti bandaid yang lebih rentan rusak daripada hanya menggunakan hoc klasik sementara itu sementara kait mencari cara untuk matang dalam menghadapi begitu banyak pertengkaran implementasi yang berbeda.

@GrandathePanda IMHO, opsi Anda adalah (1) meminta pihak ketiga untuk memperbarui ketergantungan reaksi mereka ke 16.12, atau meminta mereka memutuskan apakah menjadikannya sebagai peerDependency lebih cocok daripada ketergantungan; (2) Gunakan 16.8 di aplikasi Anda sehingga mereka berbagi versi lib yang sama; (3) Hilangkan salinan reaksi mereka dengan:

rimraf node_modules/search-ui/node_modules/react && rimraf node_modules/search-ui/node_modules/react-dom

Perintah di atas dapat ditempatkan di "prebuild" dan "prestart" di bawah bagian "skrip" dari package.json Anda (yang saat ini saya lakukan). Kelemahan dari (3), saya kira, adalah jika mereka menggunakan apa pun yang tidak digunakan lagi antara 16,8 dan 16,12.

Halo semua,

Saya memiliki aplikasi (myApp) yang menggunakan perpustakaan khusus sebagai ketergantungan (myDepPackage). Keduanya menggunakan webpack sebagai alat build dan tentu saja saya mengalami kesalahan yang sama. Tidak ada solusi di atas yang berhasil untuk saya. Apa yang dilakukannya, adalah memaksa webpack untuk TIDAK menyertakan reaksi ke dalam bundel terakhir perpustakaan khusus (myDepPackage). Satu-satunya baris konfigurasi yang harus saya tambahkan ke konfigurasi webpack (dari myDepPackage) adalah di bawah ini:

externals: {
  react: "react",
},

Anda dapat mempelajari lebih lanjut tentang opsi "eksternal" di sini: https://webpack.js.org/configuration/externals/#externals

@tsevdos aku mencintaimu. Anda baru saja mengakhiri beberapa hari yang penuh kerumitan. Terima kasih.

Halo semuanya,

Saya mencoba menggunakan pengait dalam sebuah komponen, komponen ini akan diekspor dari gatsby-browser.js .

Apa perilaku saat ini?

Saya mendapatkan kesalahan ini:

Penolakan Tidak Tertangani (Kesalahan): Panggilan kait tidak valid. Kait hanya dapat dipanggil di dalam tubuh komponen fungsi. Hal ini dapat terjadi karena salah satu alasan berikut:

1. Anda mungkin memiliki versi React dan renderer yang tidak cocok (seperti React DOM)
2. Anda mungkin melanggar Aturan Kait
3. Anda mungkin memiliki lebih dari satu salinan React di aplikasi yang sama
   Lihat https://fb.me/react-invalid-hook-call untuk tips tentang cara men-debug dan memperbaiki masalah ini.

Ini adalah contoh kode:

import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';

import configureStore from './src/utils/configure-store';
import { useApiResources } from './src/hooks/use-api-resources';

const RootWrapper = ({ element }) => {
  const resources = useApiResources();
  const store = configureStore();
  return <Provider store={store}>{element}</Provider>;
};

RootWrapper.propTypes = {
  element: PropTypes.node.isRequired,
};

export default RootWrapper;

Apa perilaku yang diharapkan?

Hook harus berjalan tanpa kesalahan, atau pesan kesalahan yang berguna harus disediakan.

Versi dependensi reaksi dan reaksi-dom adalah 16.12.0

@leejh3224 terima kasih banyak kawan! setelah berjam-jam mencari saya menemukan jawaban ini, Ini memecahkan masalah saya.
Baru saja mengubah konfigurasi HtmlWebpackPlugin dari
inject: true ke inject: 'head' dan kesalahan reaksi yang diperkecil hilang.

Saya telah membuat pertanyaan stackoverflow dengan pengalaman saya mencoba membuatnya berfungsi. Mungkinkah, bagi mereka yang telah berhasil menjalankan ini, untuk melihatnya dan menawarkan beberapa saran?

Saya mem-porting aplikasi jquery ke React. Saya memiliki utilitas untuk mengekspos komponen React dalam jQuery yang disebut asJqueryPlugin . Ini filenya:

import React from 'react'
import ReactDOM from 'react-dom'

/**
 * A way to render React components with props easily with jQuery
 *
 * ## Register the React Component
 *
 * In your React Component file, register the component with jQuery using `asJqueryPlugin`
 * ```
 * const Greeting = ({ person }) => <div>Hello {person}</div>
 * asJqueryPlugin('Greeting', Greeting, { person: "Bob" })
 * ```
 *
 * ## Rendering, Selecting and Updating Props with jQuery
 *
 * Select an element and render using the `react` function
 * ```
 * $('#greeting').react('Greeting', { person: 'Frank' })
 * ```
 */

window.reactRegistry = window.reactRegistry || {}

// This is how React components register themselves as available within jQuery
export default function asJqueryPlugin(componentName, Component) {
  window.reactRegistry[componentName] = { Component }
}

if (typeof window.$ !== 'undefined') {
  ;(function($) {
    // Add the plugin function jQuery
    $.fn.react = function renderReactIntoElements(componentName, props) {
      this.each(function render() {
        const entry = window.reactRegistry[componentName || $(this).data('react')]
        if (!entry) throw Error(`${componentName} component is not registered.`)
        ReactDOM.render(<entry.Component {...props} />, this)
      })
      return this
    }
  })(window.$)
}

Aplikasi ini memiliki banyak titik masuk di Webpack, dan sekitar 3-4 komponen menggunakan teknik ini sekarang. Ketika komponen digabungkan ke dalam bundel titik masuk yang berbeda, saya yakin saat itulah masalah terjadi.

Jadi jika saya memiliki dua titik masuk di Webpack:

entry: {
      foo: './assets/js/foo',
      bar: './assets/js/bar'
}

Kemudian di masing-masing file itu kami menyiapkan Komponen yang terbuka (masing-masing menggunakan kait):

// foo.js
import React from 'react'
import asJqueryPlugin from '../utils/asJqueryPlugin'
const Foo = () => {
  const ref = useRef()
  return <div ref={ref}>Foo</div>
}
asJqueryPlugin('Foo', Foo)

// bar.js
... same stuff but with Bar component

Sekarang jika saya menyertakan kedua entri pada halaman yang sama, dan mencoba merender kedua komponen melalui plugin jquery...

<script src="/bundles/foo.js" />
<script src="/bundles/bar.js" />
<script>
    $('#foo-container').react('Foo')
    $('#bar-container').react('Bar')
</script>

...Saya mendapatkan kesalahan kait ini.

Tidak yakin apakah ini membantu percakapan atau tidak, tetapi setidaknya menunjukkan kasus penggunaan tentang bagaimana seorang (yang diragukan) waras dev mungkin mendapatkan diri mereka ke dalam situasi dengan beberapa contoh reaksi.

Itu membantu saya - https://github.com/facebook/react/issues/13991#issuecomment -554928373
Tetapi saya juga harus menghapus react dan react-dom dari dependensi dan memindahkannya ke dependensi rekan dan menghapus serta menginstal ulang modul node.

Hai,
Saya membaca percakapan dan banyak posting di web dan saya masih terjebak dengan kesalahan beberapa contoh reaksi.
Saya mendorong repo ini untuk mereproduksi bug: https://github.com/jeromelegrand/dooliz-lib
Saya berharap seseorang dapat membantu saya.
Terima kasih.

Saya menghadapi masalah ini dan tidak mendapatkan solusi di atas.
Singkatnya: Saya sangat yakin saya hanya menjalankan satu versi reaksi, dan saya mendapatkan kesalahan menggunakan react-bootstrap, yang mungkin tidak menggunakan kait yang salah, karena tidak ada orang lain yang memiliki masalah.

Kesalahan ini terjadi pada backend node.js untuk saya.

__Apa yang saya periksa di sekitar versi reaksi__

Saya memiliki pengaturan benang dengan ruang kerja, yarn list react atau yarn list react-dom hanya menampilkan satu contoh.

Saya telah mencetak memerlukan cache untuk melihat apa yang telah diimpor:

for(var key in require.cache) {
    if(key.indexOf("react") !== -1 && key.indexOf("index") !== -1) {
        console.log(key);
    }
}

Saya menjalankannya tepat sebelum merender sesuatu dari react-bootstrap, yang menyebabkan kesalahan kait yang tidak valid untuk saya, dan itu mencatat:

C:\web\resourceful\daCore\node_modules\react-dom\index.js
C:\web\resourceful\daCore\node_modules\react\index.js
C:\web\resourceful\daCore\node_modules\react-router-dom\index.js
C:\web\resourceful\daCore\node_modules\react-router-dom\node_modules\react-router\index.js
C:\web\resourceful\daCore\node_modules\react-is\index.js
C:\web\resourceful\daCore\node_modules\mini-create-react-context\dist\cjs\index.js
C:\web\resourceful\daCore\node_modules\react-router\index.js
C:\web\resourceful\daCore\node_modules\@fortawesome\react-fontawesome\index.js
C:\web\resourceful\daCore\node_modules\@tinymce\tinymce-react\lib\cjs\main\ts\index.js

Yang tampaknya mengkonfirmasi bahwa hanya ada 1 versi reaksi yang dimuat.

Akhirnya saya menambahkan ini ke node_modules/react-dom/index.js

console.log("React DOM daCore");
global['React1'] = require('react');

Dan ini ke node_modules/react-router-dom/cjs/Form.js

require('react-dom');
global['React2'] = require('react');
console.log('#TEST '+(global['React1'] === global['React2']? 'SAME' : 'NOT SAME'));

Yang mencetak SAME

Ada ide apa lagi ini?
Saya juga akan memposting ini di react-bootstrap repo.

Jadi saya cukup yakin bahwa memiliki dua contoh React bukanlah masalah di sini. Saya pikir masalahnya adalah ketika ada dua reaksi _roots_. Apakah Anda menelepon ReactDOM.render() beberapa kali ke bagian halaman yang berbeda? Jika demikian, saya pikir ini dapat menyebabkan masalah. Saya pikir kait "milik" ke "root" tertentu dan putus ketika ada banyak dari mereka dan kedua bundel berbagi beberapa kode umum. Saya menebak di sini ...

... Saya pikir masalahnya adalah ketika ada dua reaksi _roots_. Apakah Anda menelepon ReactDOM.render() beberapa kali ke bagian halaman yang berbeda?

Terima kasih @timkindberg ini akhirnya membantu saya menyelesaikannya. Saya menyadari bahwa saya menggunakan react-tree-walker untuk melakukan render awal dan mengambil data yang diperlukan sebelum membuat render akhir dengan ReactDOMServer.renderToString

Menghapus penggunaan paket ini dengan cepat menghapus kesalahan, dan sekarang saya memiliki hal yang sama yang bekerja dengan react-ssr-prepass , yang sebenarnya sekarang direkomendasikan pada halaman readme react-tree-walker

Jadi itu memang dua panggilan ReactDOM.render ! Untuk saat ini pengaturan dengan react-ssr-prepass ini berfungsi untuk saya, dan ketika Suspense mendarat di react-dom/server saya dapat beralih ke itu

Saya menggunakan react-compare-image https://github.com/junkboy0315/react-compare-image dalam proyek Gutenberg saya tetapi mengalami masalah aneh ini meskipun semuanya berfungsi setiap kali saya menghapus komponen ReactCompareImage dari fungsi simpan. Fungsi edit berfungsi dengan baik tetapi penyimpanan tidak berfungsi.

Saya pergi melalui https://reactjs.org/warnings/invalid-hook-call-warning.html dan saya rasa, saya tidak memiliki masalah ini.

Berikut adalah file fungsi penyimpanan lengkap:

```impor Inspektur dari "./inspektur";
import { Fragmen } dari "bereaksi";
impor ReactCompareImage dari "react-compare-image";

/**

• Ketergantungan WordPress
  */
  const {__} = wp.i18n;

const save = ({className, atribut}) => {

const {
    paddingTop,
    paddingRight,
    paddingBottom,
    paddingLeft,

    marginTop,
    marginRight,
    marginBottom,
    marginLeft,

    border,
    borderColor,
    borderType,
    background,

    backgroundImage,
    gradient,

    dividerColor,
    buttonColor,

    direction,

    beforeImage,
    beforeLabel,
    afterImage,
    afterLabel,

} = attributes;

const style = {
    "padding": `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
    "margin": `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`,
    "border": `${border}px ${borderType} ${borderColor}`,
    "background": background
};

return(
    <Fragment>
        <ReactCompareImage
            leftImage={beforeImage.url}
            leftImageLabel={beforeLabel}
            rightImage={afterImage.url}
            rightImageLabel={afterLabel}
            vertical={'vertical' === direction}
            sliderLineColor={dividerColor}
        />
    </Fragment>
);

};

ekspor simpanan default;
```

Saya juga mengalami masalah ini. Saya memiliki rekap yang diposting di SO: https://stackoverflow.com/questions/60331304/next-js-with-typescript-invalid-hook-call-hooks-can-only-be-call-inside-of-t

Saya juga memiliki contoh minimal yang dapat direproduksi: https://github.com/coler-j/shopify_playground

Aplikasi Utama saya adalah aplikasi create-react (tidak dikeluarkan) yang mengimpor perpustakaan bersama yang juga menggunakan React. Saya dapat menyelesaikan ini dengan:

Menggunakan Rollup untuk mengemas perpustakaan alih-alih webpack
Untuk beberapa alasan saya belum berhasil, menggunakan eksternal tidak menghapus Bereaksi dari bundel perpustakaan.

rollup-config.js

export default [
  {
    input: 'src/index.js',
    output: {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    plugins: [external(), babel(), resolve(), commonjs(), svgr()],
  },
  {
    input: 'src/index.js',
    output: {
      file: pkg.module,
      format: 'es',
      sourcemap: true,
    },
    plugins: [
      alias({
        entries: [{ find: '<strong i="12">@components</strong>', replacement: 'src/components' }],
      }),
      external(),
      babel(),
      svgr(),
    ],
  },
]

Menginstal craco dan menggunakannya untuk memodifikasi webpack aplikasi utama
craco.config.js

const path = require('path')

module.exports = {
  webpack: {
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
    },
  },
}

Terima kasih kepada @arminyahya karena telah mengarahkan saya ke craco.

Saya mencoba menggunakan kait saat memuat reaksi dari cdn. Contoh ini (ini adalah seluruh halaman html) memberikan kesalahan Hooks can only be called inside of the body of a function component ketika Example() dipanggil. Saya telah menghapus semuanya, bahkan ReactDOM, jadi sulit membayangkan bahwa saya dapat memiliki banyak salinan React. Apakah ini hanya mustahil?

<!DOCTYPE html>
<html>

<head>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

</body>
  <script type="text/babel">
    function Example() {
      let [count, setCount] = React.useState(0);
      return ( <h1>Hello</h1> );
    };

  Example();
  </script>
</body>

</html>

@samkamin Itu karena Anda memiliki akar reaksi NOL. Anda perlu merender aplikasi Anda. Namun, ini masih merupakan konfirmasi yang baik bahwa kait bergantung pada (dan digabungkan ke) root reaksi.

<html>
<head>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
</body>
  <div id="root"></div>
  <script type="text/babel">
    function Example() {
      let [count, setCount] = React.useState(0);
      return ( <h1>Hello</h1> );
    };

    ReactDOM.render(<Example />, document.getElementById('root'))
  </script>
</body>
</html>

Terima kasih! Sebenarnya bukan kurangnya reaksi root - saya baru saja menghapusnya dalam rangka menyederhanakan kesalahan sebanyak mungkin - tetapi sesuatu yang sama bodohnya: Alih-alih <Example /> , saya hanya menulis Example() . Bukan hal yang sama, sama sekali. Terima kasih lagi.

Sepertinya tidak ada yang berhasil untuk saya. Saya membuat komponen untuk dibagikan dan digunakan di proyek lain, tetapi saat menguji secara lokal dari proyek lain tidak berfungsi. Saya menggunakan Hooks dengan reaksi 16.13.0.

webpack.config.js

module.exports = {
  entry: ENTRY,
  output: {
    library: LIBRARY_NAME,
    path: path.resolve(__dirname, OUTPUT_DIR),
    filename: OUTPUT_FILENAME,
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.(js|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
    ],
  },
  resolve: {
    alias: {
      '<strong i="7">@src</strong>': path.resolve(__dirname, './src'),
      '<strong i="8">@components</strong>': path.resolve(__dirname, './src/components'),
      '<strong i="9">@core</strong>': path.resolve(__dirname, './src/core'),
      react: path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
    },
    extensions: ['.js', '.json', '.tsx', '.ts'],
  },
  externals: {
    react: 'react',
  },
  target: 'node',
  plugins: [
    new HtmlWebPackPlugin({
      template: './tests/index.html',
      filename: 'index.html',
    }),
  ]}

Ada saran? Saya menguji semua saran dari diskusi lama.
Terima kasih! :menyeringai:

Saya mendeklarasikan Settings.js sebagai berikut:

import React, {useState} from 'react';

import {
    View,
    Text,
    Switch
} from 'react-native';

export function Settings(props) {
    const [rememberPin, setRememberPin] = useState(false);
    let {changeView, header} = props;


    const toggleRememberPin = (value) => {
        setRememberPin(value);
    };

    return (
            <View>
                    <Text>Remember PIN:</Text>
                    <Switch
                        onValueChange={toggleRememberPin}
                        value={rememberPin}
                        ios_backgroundColor="#aeaeae"
                        />
            </View>
    );
}

export default {Settings};

Saya mengimpor dan menggunakannya di App.js sebagai berikut:

import React, {Component} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    Switch
} from 'react-native';

import Colors from './src/assets/Colors';
import {Settings} from './src/components/Settings';
...

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {viewsStack: this.viewsStack};
    }

    viewsStack = {
        SplashScreen: false,
        BindingInstructions: false,
        PinPad: false,
        Qr: false,
        Dashboard: false,
        Authorizations: false,
        Settings: true,
        Browsers: false,
        TransmitSDK: false,
        OTP: false,
    };

    changeView = (newView) => {
        let {viewsStack} = this.state;
        for (let key of Object.keys(viewsStack)) {
            viewsStack[key] = false;
        }
        viewsStack[newView] = true;
        this.setState(viewsStack);
    };

    render() {
        let {viewsStack} = this.state;
        return (
            <SafeAreaView style={styles.safeAreaView}>
                {viewsStack.SplashScreen && (splashScreen())}
                {viewsStack.BindingInstructions && (bindingInstructions({changeView: this.changeView}))}
                {viewsStack.PinPad && (pinPad({message: 'Inserisci un nuovo PIN', changeView: this.changeView}))}
                {viewsStack.Qr && (qr({header: 'QR Binding', message: 'Scansiona il QR dalla tua dashboard\noppure\ninserisci il codice manualmente.', changeView: this.changeView}))}
                {viewsStack.Dashboard && (dashboard({header: 'Profilo Utente', changeView: this.changeView}))}
                {viewsStack.Authorizations && (authorizations({header: 'Autorizzazioni', authorizations: [1, 2, 3, 4, 5, 6], changeView: this.changeView}))}
                {viewsStack.Settings && (Settings({header: 'Impostazioni', changeView: this.changeView}))}
            </SafeAreaView>
        );
    }
};
...

Tapi saya mendapatkan:

Saya menggunakan:

"react": "16.9.0",
"react-native": "0.61.5"

Apa yang salah?

Anda memanggil komponen Settings Anda sebagai fungsi dan bukan sebagai komponen fungsi.

<Settings header='Impostazioni' changeView={this.changeView} />

Kait tidak diperbolehkan di dalam fungsi biasa, hanya dalam komponen fungsi dan cara Anda menyebutnya menipu React agar berpikir bahwa komponen Anda sebenarnya adalah fungsi normal.

Mungkin ini akan membuat seseorang sakit kepala, jika Anda menggunakan react-router-dom jika Anda meneruskan komponen Anda dalam render seperti ini (bukan cara yang tepat) itu akan memberikan Invalid Hook Call Warning
<Route path="/:cuid/:title" render={PostArticle} />

Butuh waktu setengah jam untuk mengetahui di mana kesalahan saya

Ini dapat membantu seseorang - jika Anda mengalami bug ini setelah menggunakan react-router-dom, periksa bagaimana Anda mendefinisikan rute Anda. misalnya seharusnya <Route path={'/upgrade/:plan'} exact children={<Upgrade />} /> saat saya melakukan <Route path={'/upgrade/:plan'} exact children={Upgrade} />

Ini sangat canggung jika Anda menggunakan tinta atau pastel untuk membuat CLI (lihat https://github.com/vadimdemedes/pastel/issues/2). Saya tidak dapat menjadikannya peerDep karena saya tidak dapat meminta setiap pengguna untuk menginstal React dan saya juga tidak dapat memaksa mereka untuk menggunakan versi/rentang tertentu dari React.

Tim saya menggunakan Benang dan mendapatkan kesalahan Invalid hook call hanya dalam pengujian, bukan di aplikasi. Masalahnya adalah react-test-renderer diselesaikan ke versi yang lebih rendah dari react dan react-dom , jadi kami menambahkan resolutions di package.json :

"devDependencies": {
    ...
    "react": "16.12.0",
    "react-dom": "16.12.0",
    ...
},
"resolutions": {
    "react-test-renderer": "16.12.0"
}

Untuk orang yang menggunakan Gatsby di subdir, ini adalah solusi yang mungkin.

gatsby-node.js :

const path = require('path')
const fromRoot = name => path.resolve(__dirname + '/../node_modules/' + name)

exports.onCreateWebpackConfig = ({ actions }) => actions.setWebpackConfig({
  resolve: {
    alias: {
      'react': fromRoot('react'),
      'react-dom': fromRoot('react-dom'),
    },
  },
})

Saya memiliki masalah yang sama ketika menjalankan perintah npm link ada masalah

Kemudian saya menggunakan solusi resmi yang disediakan oleh reaksi untuk menyelesaikan masalah ini

Masalah ini juga dapat muncul ketika Anda menggunakan tautan npm atau yang setara. Dalam hal ini, bundler Anda mungkin "melihat" dua Reacts — satu di folder aplikasi dan satu lagi di folder library Anda. Dengan asumsi myapp dan mylib adalah folder saudara, satu kemungkinan perbaikan adalah dengan menjalankan npm link ../myapp/node_modules/react dari mylib. Ini akan membuat perpustakaan menggunakan salinan React aplikasi.

Jika A perlu memperkenalkan B A dan B adalah saudara kandung）

• langkah 1 (di B)
  
  
  
  • npm link ./../A/node_modules/react
  
  
  • npm link
  
  
• langkah 2 (di A)
  npm link B

itu bekerja untuk saya

Bahkan dengan jawaban ini saya tidak yakin mengapa saya mendapatkan kesalahan. Saya memiliki perpustakaan ketergantungan saya yang ditautkan ke aplikasi utama saya dan setelah saya mendapatkan kesalahan, saya mengikuti react-docs dan menautkan versi reaksi perpustakaan ketergantungan saya ke reaksi aplikasi saya (menjalankan npm link <>/webapp/node_modules/react . (bahkan melakukan ini dengan react- dom). Ketika saya login untuk menguji apakah React1 dan React2 sama, itu mencatat true jadi saya tidak menggunakan versi duplikat dari React, saya menggunakan versi React yang sama, dan saya menggunakan komponen fungsi Jadi meskipun pengujian logging menunjukkan bahwa saya tidak memiliki versi duplikat dari React, saya masih mendapatkan kesalahan hook.

Tetapi mencoba solusi ini seperti yang disebutkan di atas memperbaiki bug tertentu:

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

Jadi saya bingung.

Jadi saya bingung.

@orpheus Apakah Anda membuat lebih dari satu root reaksi ke halaman yang sama? alias apakah Anda memiliki lebih dari satu panggilan ReactDOM.render di halaman yang sama?

Apakah Anda merender lebih dari satu root reaksi ke dalam halaman yang sama? alias apakah Anda memiliki lebih dari satu panggilan ReactDOM.render di halaman yang sama?

@timkindberg

Aku tidak. Saya memiliki satu ReactDOM.render di root app saya, dan modul lib yang saya tautkan adalah pustaka komponen dan tidak menggunakan ReactDOM.render sama sekali.

edit: Saya melakukan sesuatu yang mirip dengan:

import React from 'react'
import ReactDOM from 'react-dom'
import Root from './App/Root'

ReactDOM.render(
  <Root />,
  document.getElementById('root')
)

di mana <Root /> membuat sesuatu seperti

const Root = () => {
  return <Provider store={store}>
        <PermissionsProvider>
              <Suspense fallback={null}>
                <Router history={history}>
                  <Routes store={store} />
                </Router>
              </Suspense>
        </PermissionsProvider>
  </Provider>
}

PermissionsProvider adalah komponen React yang saya impor dari modul lib tertaut saya yang menggunakan pengait yang menyebabkan aplikasi gagal. Itu menciptakan keadaan dan konteks dan menjadikannya anak-anak.

Hai, saya menggunakan elektron dengan kait reaksi. jika saya menulis hook saya sendiri, itu berhasil. Tapi itu menimbulkan kesalahan ketika saya menggunakan kait dari paket lain di node_module, seperti react-use , swr .

Saya harus menyalin paket ke file lokal saya.

Apakah ada yang memenuhi masalah ini?

Contoh proyek di sini:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error

kode inti:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

Saya juga masih mengalami masalah ini bahkan setelah menghapus duplikat salinan reaksi dan reaksi-dom. Saya membuat proyek pengujian super sederhana untuk direproduksi.

$ tree -I node_modules
.
|-- test-app
|   |-- dist
|   |   |-- index.html
|   |   `-- main.js
|   |-- package-lock.json
|   |-- package.json
|   |-- src
|   |   |-- index.html
|   |   `-- index.js
|   `-- webpack.config.js
`-- test-lib
    |-- dist
    |   `-- main.js
    |-- package-lock.json
    |-- package.json
    |-- src
    |   `-- index.js
    `-- webpack.config.js

Saat ini, saya menggunakan metode alias webpack, tetapi saya juga telah mencoba metode npm link , dan tidak ada yang berhasil.

Saya menemukan masalah ini juga. Saya menggunakan ExpressJS + Pug untuk membuat tampilan, saya kemudian menulis penyaji (mirip dengan ReactRails) yang memungkinkan Anda untuk merender komponen server dan sisi klien.

Saya mencoba mengekstrak ini ke paket terpisah karena semakin berantakan, dan saya menemukan masalah ini.

Untuk memperbaikinya, saya harus menambahkan di bawah kunci resolve :

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

Sekarang berfungsi seperti yang diharapkan ketika menjalankan webpack secara normal, tetapi masalahnya masih berlanjut dengan volume buruh pelabuhan. Saya terlalu baru untuk buruh pelabuhan untuk menghadapinya, jadi akan mengunjunginya kembali nanti.

Sunting: Saya berbicara terlalu cepat. Ini berfungsi dengan baik sekarang dengan React render, tetapi tidak dengan hydrate.

Hai, saya menggunakan elektron dengan kait reaksi. jika saya menulis hook saya sendiri, itu berhasil. Tapi itu menimbulkan kesalahan ketika saya menggunakan kait dari paket lain di node_module, seperti react-use , swr .

Saya harus menyalin paket ke file lokal saya.

Apakah ada yang memenuhi masalah ini?

Contoh proyek di sini:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error

kode inti:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

Halo. Saya memiliki masalah yang sama. Saya menggunakan electron-webpack yang menandai semua modul sebagai eksternal untuk webpack. Dengan beberapa pengecualian hardcoded - seperti reaksi dan reaksi-dom.
Bagi saya itu berarti reaksi yang dimuat dari kode saya berbeda dengan reaksi yang dimuat dari modul tersebut.
Menambahkan modul ini ke daftar putih tampaknya membantu (tidak yakin apakah itu belum merusak apa pun :)

@huhle terima kasih, berhasil! Mungkin kita harus menyelami electron-webpack.

Saya baru saja berhasil membuat ini bekerja sendiri. Saya pikir ini adalah salah satu solusi yang lebih baik dalam hal ruang kerja Lerna dan Benang, dan mungkin beberapa bagian dapat digunakan untuk solusi lain.

Semuanya tampaknya bermuara pada konfigurasi proyek package.json yang saya impor. Saya perlu menyertakan bagian ini:

 "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "workspaces": {
    "nohoist": [
      "react", "react-dom"
    ]
  }

Setelah melakukan ini, saya harus membangun kembali proyek dan saya sudah siap. Tampaknya mencantumkannya sebagai dependensi rekan memungkinkannya untuk diinstal oleh proyek konsumsi Anda. Dan karena mereka tidak terdaftar dalam dependensi, mereka seharusnya tidak tersedia untuk paket yang Anda coba impor, tetapi untuk beberapa alasan kecuali Anda menyuruhnya untuk tidak mengangkat, mereka tetap tersedia dan instance reaksi baru masuk dan menyebabkan kesalahan.

Semoga beruntung!

Saya mencoba menggunakan react-spring untuk mendapatkan efek fade-in yang sederhana. Sepertinya tidak ada yang terlihat berfungsi.
`import React, { useState, useEffect } dari 'react';
import { animasi, useTransition } dari 'react-spring';

const TextContent = (alat peraga) => {

const [items] = useState([
    { id: '0', title: 'Text1' },
    { id: '1', title: 'Text2' },
    { id: '2', title: 'Text1' }
])

const [index, setIndex] = useState(0);

const transitions = useTransition(items[index], index => index.id,
    {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { tension: 220, friction: 120 }
    }
)

useEffect(() => {
    const interval = setInterval(() => {
        setIndex((state) => (state + 1) % items.length);
    }, 4000)
    return () => clearInterval(interval);
}, []);

return (
    <div>
        {
            transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
            ))
        }
    </div>
)

}

ekspor TextContent default;`

Saya mencoba memeriksa apakah saya memiliki banyak instance React. Npm ls-ing memberi tahu saya bahwa saya hanya memiliki satu versi reaksi dan reaksi-dom, keduanya di 16.13.1.

Hai, saya menggunakan elektron dengan kait reaksi. jika saya menulis hook saya sendiri, itu berhasil. Tapi itu menimbulkan kesalahan ketika saya menggunakan kait dari paket lain di node_module, seperti react-use , swr .
Saya harus menyalin paket ke file lokal saya.
Apakah ada yang memenuhi masalah ini?
Contoh proyek di sini:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
kode inti:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

Halo. Saya memiliki masalah yang sama. Saya menggunakan electron-webpack yang menandai semua modul sebagai eksternal untuk webpack. Dengan beberapa pengecualian hardcoded - seperti reaksi dan reaksi-dom.
Bagi saya itu berarti reaksi yang dimuat dari kode saya berbeda dengan reaksi yang dimuat dari modul tersebut.
Menambahkan modul ini ke daftar putih tampaknya membantu (tidak yakin apakah itu belum merusak apa pun :)

Cemerlang! Terima kasih

Saya mencoba menggunakan react-spring untuk mendapatkan efek fade-in yang sederhana. Sepertinya tidak ada yang terlihat berfungsi.
`import React, { useState, useEffect } dari 'react';
import { animasi, useTransition } dari 'react-spring';

const TextContent = (alat peraga) => {

const [items] = useState([
    { id: '0', title: 'Text1' },
    { id: '1', title: 'Text2' },
    { id: '2', title: 'Text1' }
])

const [index, setIndex] = useState(0);

const transitions = useTransition(items[index], index => index.id,
    {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { tension: 220, friction: 120 }
    }
)

useEffect(() => {
    const interval = setInterval(() => {
        setIndex((state) => (state + 1) % items.length);
    }, 4000)
    return () => clearInterval(interval);
}, []);

return (
    <div>
        {
            transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
            ))
        }
    </div>
)

}

ekspor TextContent default;`

Saya mencoba memeriksa apakah saya memiliki banyak instance React. Npm ls-ing memberi tahu saya bahwa saya hanya memiliki satu versi reaksi dan reaksi-dom, keduanya di 16.13.1.

Sama disini. react dan react-dom ada di 16.13.1 untuk saya, dan mencoba menggunakan react-spring membawa kesalahan yang sama.

Dari utas lain di styled-components , saya mengetahui bahwa jika Anda menggunakan paket lokal Anda sendiri melalui file: URI di package.json , Anda perlu rm -rf node_modules/local-package-name/node_modules sebelum menjalankan aplikasi Anda, karena tampaknya, paket lokal disalin tanpa memeriksa node_modules untuk dependensi yang berlebihan.

Dari utas lain di styled-components , saya mengetahui bahwa jika Anda menggunakan paket lokal Anda sendiri melalui file: URI di package.json , Anda perlu rm -rf node_modules/local-package-name/node_modules sebelum menjalankan aplikasi Anda, karena tampaknya, paket lokal disalin tanpa memeriksa node_modules untuk dependensi yang berlebihan.

Ya, ini adalah masalah yang sama untuk sekitar selusin kasus penggunaan hanya di utas ini saja. Saya menambahkan target "prestart" dan "prebuild" untuk melakukan rm -rf (menggunakan rimraf). Pengguna lain di utas ini menggunakan npm-link-shared di prestart mereka untuk membuat modul berbagi contoh reaksi yang sama. Begitu banyak dari kita pengguna monorepo mengalami hal ini.

Hai, saya menggunakan elektron dengan kait reaksi. jika saya menulis hook saya sendiri, itu berhasil. Tapi itu menimbulkan kesalahan ketika saya menggunakan kait dari paket lain di node_module, seperti react-use , swr .
Saya harus menyalin paket ke file lokal saya.
Apakah ada yang memenuhi masalah ini?
Contoh proyek di sini:
https://github.com/Zaynex/electron-react-ts-kit/tree/hooks-error
kode inti:
https://github.com/Zaynex/electron-react-ts-kit/blob/hooks-error/src/renderer/app.tsx

Halo. Saya memiliki masalah yang sama. Saya menggunakan electron-webpack yang menandai semua modul sebagai eksternal untuk webpack. Dengan beberapa pengecualian hardcoded - seperti reaksi dan reaksi-dom.
Bagi saya itu berarti reaksi yang dimuat dari kode saya berbeda dengan reaksi yang dimuat dari modul tersebut.
Menambahkan modul ini ke daftar putih tampaknya membantu (tidak yakin apakah itu belum merusak apa pun :)

Ini juga berlaku untuk orang yang mengalami masalah dengan redux atau redux toolkit dan electron-webpack. Saya memiliki konfigurasi kerja berikut:

// package.json
...
"electronWebpack": {
  "whiteListedModules": ["react-redux"]
}

lihat https://github.com/electron-userland/electron-webpack/issues/349

Masalah saya adalah saya menulis

import React from 'React'

Dari pada:

import React from 'react'

Terkadang itu hal-hal bodoh.

Saya menyelesaikannya dengan menambahkan yang berikut ini ke konfigurasi webpack saya:

 externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom",
    },
  },

Saya awalnya mengira itu masalah dengan tautan npm, melakukan semua yang disarankan, dan bahkan beralih ke benang. Akhirnya menemukan sesuatu yang lain sedang terjadi ketika menerbitkan ke npm memberikan kesalahan yang sama ketika mengimpor di proyek lain.

Adakah orang di sini yang menyelesaikan ini baru-baru ini dengan lerna monorepo? Saya sudah mencoba beberapa saran tanpa hasil.

Mengalami kesalahan setelah menambahkan kode yang dikomentari dengan // di bawah ini. Menambahkan CssBaseline, dan bereaksi info fragmen menyebabkan kesalahan. Semuanya berjalan dengan baik ketika dikomentari. Kode aslinya hanyalah kode dasar npx create-react-app. Benar-benar baru dalam hal ini dan beberapa perbaikan yang saya coba dari atas tidak berpengaruh.

impor Bereaksi dari 'bereaksi';
impor logo dari './logo.svg';
impor CssBaseline dari '@material-ui/core/CssBaseline';

ekspor fungsi default App() {
kembali (

        //<React.Fragment>

        //<CssBaseline />

        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                    </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                    </a>
            </header>
        </div>

    //</React.Fragment>

);
}

Untuk pengujian lokal:
Di perpustakaan node_modules hapus folder reaksi dan reaksi-dom
Dalam paket utama jalankan lagi "yarn install" atau "npm install".

Ini mencegah salinan reaksi kedua dimuat ke dalam bundel utama. Jelas bukan perbaikan permanen tetapi berfungsi untuk pengujian lokal.

Bagi siapa saja yang menggunakan lerna, Anda mungkin menemukan masalah ini saat menjalankan tes dalam satu paket, di mana kode mereferensikan komponen dalam paket lain.

Masalah yang kami alami dalam kasus ini adalah karena reaksi diimpor dalam spesifikasi, dan juga diimpor dalam komponen di pohon komponen yang menggunakan withStyles UI Material , yang diimplementasikan menggunakan kait di UI Material.

Tampaknya react secara internal mengelola status dalam variabel ReactCurrentDispatcher.current , dan ini akhirnya diatur dalam satu instance reaksi, tetapi digunakan dalam instance reaksi lainnya -- ketika kosong, ia melempar Invalid hook call ... pesan.

Kami sudah menggunakan Craco untuk mengganti konfigurasi webpack Create React App pada waktu pembuatan:

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

Namun, penggantian paket web ini hanya digunakan pada waktu pembuatan -- saat menjalankan pengujian, kode tidak dibuat, tetapi dibuat dari sumber -- jadi solusi kami adalah menggunakan CracoAlias ​​di craco.config.js kami untuk menentukan jalur reaksi selama pengujian:

  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'options',
        baseUrl: './',
        aliases: {
          // We need to alias react to the one installed in the desktop/node_modules
          // in order to solve the error "hooks can only be called inside the body of a function component"
          // which is encountered during desktop jest unit tests,
          // described at https://github.com/facebook/react/issues/13991
          // This is caused by two different instances of react being loaded:
          // * the first at packages/desktop/node_modules (for HostSignUpDownloadComponent.spec.js)
          // * the second at packages/components/node_modules (for packages/components/Modal)
          react: './node_modules/react',
        },
      },
    },
  ],

Saya menggunakan @craco/craco sebagai solusi, tanpa mengeluarkan, mengikuti contoh @apieceofbart . Langkah-langkah bagi saya adalah sebagai berikut menggunakan npm link untuk menguji modul lokal:

1. Instal craco ke aplikasi demo saya dengan menjalankan npm i @craco/craco --save
2. Buat file konfigurasi craco.config.js untuk melakukan root di mana package.json tinggal di aplikasi demo.
3. Ubah skrip start , build dan test dengan mengganti react-scripts dengan craco di aplikasi demo saya.

// craco.config.js
const path = require('path');

module.exports = {
    webpack: {
        alias: {
            react: path.resolve(__dirname, './node_modules/react')
        }
    }
}

// package.json
{
....
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...
}

edit: Saya bahkan tidak menyadari bahwa @jasondarwin memiliki ide yang sama.

Menghabiskan lebih baik dari hari mencoba untuk memperbaiki masalah ini. Memposting solusi saya di sini jika itu membantu siapa pun.

Kami menggunakan monorepo dan dua paket mengimpor instance berbeda dari reaksi, tetapi mereka menyelesaikan ke tempat yang sama di modul simpul akar. Ternyata kami memiliki dua contoh ini karena salah satu aplikasi menggunakan paket webnya sendiri untuk membuat bundel. Ini diangkat dengan benar ke modul simpul akar, tetapi akan mendapatkan turunannya sendiri ketika diimpor oleh paket itu. Solusinya adalah sertakan react dan react DOM di eksternal konfigurasi webpack sehingga webpack tidak akan membuat instance reaksi baru untuk bundel.

externals: { react: 'react', reactDOM: 'react-dom', },

Semoga ini bisa membantu seseorang!

Bagi saya itu menggunakan react-hot-loader versi 4.0.0, memperbarui ke react-hot-loader 4.8 tampaknya berhasil

Saya menerima pesan Invalid hook call HANYA saat menjalankan pengujian pada Hook khusus yang saya buat untuk bekerja dengan Modal windows.

Untuk mendemonstrasikan perilaku, saya telah membuat contoh berikut:
(https://github.com/BradCandell/invalid-hook-example)

• Hanya satu versi react dan react-dom

Apakah saya melewatkan sesuatu yang sangat jelas? Ketika saya melanggar aturan di masa lalu, npm start akan gagal. Tapi ini hanya gagal dalam pengujian saya.

Saya menghargai bantuannya!
-Brad

Saya menyelesaikannya dengan menambahkan yang berikut ini ke konfigurasi webpack saya:

 externals: {
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom",
    },
  },

Saya awalnya mengira itu masalah dengan tautan npm, melakukan semua yang disarankan, dan bahkan beralih ke benang. Akhirnya menemukan sesuatu yang lain sedang terjadi ketika menerbitkan ke npm memberikan kesalahan yang sama ketika mengimpor di proyek lain.

Ini memperbaikinya untuk saya. Saya mengimpor react-toastify dan mendapatkan panggilan hook yang tidak valid. Saya memeriksa setiap item dalam kesalahan konsol:

1. Anda mungkin memiliki versi React dan React DOM yang tidak cocok.
   
   
   
   1. Anda mungkin melanggar Aturan Kait.
   
   
   2. Anda mungkin memiliki lebih dari satu salinan React di aplikasi yang sama.
   
   

Akhirnya menjadi edisi ke-3. Saya mengikuti ini:
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate -react

Tidak ada solusi di atas yang berfungsi untuk saya, sampai saya menyadari bahwa saya sedang menggabungkan salinan reaksi lain dengan perpustakaan yang saya _import_.
Saya telah mengubah dan menggabungkan kode sumber perpustakaan saya, jadi pemeriksaan untuk berbagai versi React yang terdaftar di dokumen mengembalikan true alih-alih false .
Menandai react sebagai ketergantungan eksternal dan membiarkannya keluar dari bundel perpustakaan saya berhasil.

Kasus saya bukan monorepo, tetapi situasi yang agak mirip. Kami sedang mengembangkan kerangka kerja UI baru, dan alih-alih menggunakan tautan npm atau lerna, kami hanya menggunakan alias webpack untuk meminta file pada folder saudara. Ini berfungsi dengan baik, tetapi Anda akan mengalami masalah ini. Untungnya solusi dari @apieceofbart memperbaiki masalah bagi kami.

Baris 130:21: React Hook "useStyles" dipanggil dalam fungsi "pharmacyDashboard" yang bukan merupakan komponen fungsi React atau fungsi React Hook kustom react-hooks/rules-of-hooks
Baris 133:45: React Hook "React.useState" dipanggil dalam fungsi "pharmacyDashboard" yang bukan merupakan komponen fungsi React atau fungsi React Hook khusus react-hooks/rules-of-hooks

ini adalah kesalahan ..... adakah yang bisa membantu saya dalam menyelesaikan ini

@vyshnaviryali Anda lebih baik memanggil fungsi Anda usePharmacyDashboard

./src/components/HomeFiles/AppFooter.js
Baris 1:1: Definisi untuk aturan 'material-ui/no-hardcoded-labels'' tidak ditemukan material-ui/no-hardcoded-labels'
adakah yang bisa membantu saya dalam menyelesaikan ini

Untuk semua orang yang menjalankan masalah ini dengan npm link karena Anda perlu menambahkan fitur ke komponen Anda tetapi tidak ingin npm publish sebelum pengujian, saya terkejut tidak ada yang menyarankan menggunakan yalc (https://www.npmjs.com/package/yalk)

Untuk semua orang yang menjalankan masalah ini dengan npm link karena Anda perlu menambahkan fitur ke komponen Anda tetapi tidak ingin npm publish sebelum pengujian, saya terkejut tidak ada yang menyarankan menggunakan yalc (https://www.npmjs.com/package/yalk)

Saya benar-benar melakukannya tahun lalu: https://github.com/facebook/react/issues/13991#issuecomment -535150839

Kami telah menggunakannya selama hampir satu tahun sekarang tanpa masalah.

Satu lagi di sini menggunakan lerna; untuk memperbaikinya, saya memindahkan dependensi react dan react-dom ke root saya package.json .

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan menambahkan:

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

ke properti resolve di konfigurasi webpack aplikasi utama saya.

Jelas kesalahan saya menggunakan dua salinan React tetapi saya setuju bahwa akan lebih bagus jika pesan kesalahannya lebih baik. Saya pikir ini mungkin mirip dengan: #2402

Bagi mereka yang menggunakan metode di atas tetapi masih mendapatkan kesalahan saat menjalankan lelucon, tambahkan ini ke moduleNameMapper di konfigurasi lelucon (hilangkan react-dom jika tidak perlu):

moduleNameMapper: {

...

  "^react$": "<rootDir>/node_modules/react",
  "^react-dom$": "<rootDir>/node_modules/react-dom",

...

}

Aku bingung. Saya mendapatkan ini tetapi aplikasi saya tidak menggunakan kait apa pun dan tidak ada duplikat reaksi atau reaksi-dom. Saya menggunakan next.js. Mungkinkah itu ada hubungannya dengan itu?

npm ls react
npm ls react-dom

@maapteh apakah itu untuk saya? Saya memang menjalankan perintah itu dan tidak menemukan duplikat. Kedua perpustakaan berada di versi 16.13.1

@dancancro Saya juga menggunakan Next.js dan saya tidak dapat memperbaikinya.

npm ls react dan npm ls react-dom keduanya hanya mengembalikan satu entri. Tapi saya tidak yakin itu benar. Saya mengalami kesalahan ini saat menautkan ke paket lokal untuk pengembangan. npm ls hanya mengembalikan satu entri bahkan ketika saya tidak menautkan reaksi dalam ketergantungan kembali ke repo utama. Tetapi bahkan ketika saya melakukan tautan bereaksi dengan benar, saya masih mendapatkan kesalahan.

@justincy Saya tidak memiliki tautan paket di proyek saya. Saya yakin ini terkait dengan Next.js. Masalahnya hilang jika saya meletakkan komponen utama di dalam typeof document !== 'undefined' , secara efektif merusak tujuan Next.js

Saya berhasil memperbaiki masalah saya dengan menghapus react dan react-dom dari node_modules di dependensi. Memang tidak ideal, tapi setidaknya saya bisa terus bekerja.

@dancancro Saya skeptis bahwa masalah Anda disebabkan oleh Next.js. Jika ya, banyak orang lain akan memiliki masalah. Saya hanya mengalaminya karena paket yang ditautkan. Saya tidak melihat kesalahan tanpa paket tertaut.

Masalah hilang jika saya menghapus lima dari tujuh komponen di komponen utama. Saya tidak dapat melihat sesuatu yang istimewa tentang komponen ini. Membungkus komponen ini dalam typeof document !== 'undefined' s juga berfungsi.

Hai Tim, saya mencoba memutakhirkan versi React dari 16.2.0 ke 16.13.1, juga melakukan hal yang sama untuk react-dom.
Sekarang saya memiliki komponen pembungkus yang dipanggil di "/ test"

class TestWrapper extends React.Component { render() { return ( <React.Fragment> <TestComponent /> </React.Fragment> ) } }

dalam pembungkus uji saya telah mengimpor komponen fungsional dengan pengait
function TestComponent(props) { useEffect(() => { console.log("TEST COMPONENT"); }); return ( <div> Hello world! </div> ) }

Tetapi ketika halaman merender, kait UseEffect tidak berfungsi dan terjadi Kesalahan yaitu Peringatan Panggilan Kait Tidak Valid
PS. :

1. Saya telah memeriksa bahwa saya hanya memiliki satu salinan reaksi dan reaksi-dom diinstal
2. Bereaksi dan versi reaksi-dom adalah 16.13.1

Itu yang saya punya
aku hanya...
@ @

Saya menggunakan nextJS sehingga tidak perlu Bereaksi mengimpor. Dan saya mencobanya - tidak membantu.

Semua halaman dan fungsi lainnya bekerja dengan sempurna

@Brotipok next.js versi berapa? (Melihat masalah serupa, tetapi hanya ketika pindah ke 9.5 dari 9.4.X)

Hai!

Saya mengalami kesalahan yang sama, hanya satu paket untuk react dan react dom ketika saya melakukannya npm ls .

Versi reaksi: 16.13.1
Versi React-dom : 16.13.1

Saya menggunakan TypeScript dan saya telah menginisialisasi proyek dengan create-react-app my-app --template TypeScript.

Komponen fungsional hanya berfungsi jika saya tidak menggunakan kait di dalamnya.

Paket.json

{
"nama": "blablamovie",
"versi": "0.1.0",
"pribadi": benar,
"ketergantungan": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.53",
"@types/react": "^16.9.43",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"react-icons": "^3.10.0",
"react-scripts": "3.4.1",
"ketik": "^3.7.5",
"webpack-bundle-analyzer": "^3.8.0"
},
"skrip": {
"mulai": "skrip reaksi mulai",
"build": "react-script build",
"test": "tes skrip reaksi",
"eject": "keluarkan skrip reaksi",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
"eslintConfig": {
"extends": "aplikasi-reaksi"
},
"daftar browser": {
"produksi": [
">0,2%",
"tidak mati",
"tidak op_mini semua"
],
"perkembangan": [
"1 versi chrome terakhir",
"1 versi firefox terakhir",
"1 versi safari terakhir"
]
}
}
Saya adalah proyek penting dan itu membuat saya sedikit gila.
Jika seseorang dapat membantu Itu akan sangat bagus.
Terima kasih.

@Brotipok next.js versi berapa? (Melihat masalah serupa, tetapi hanya ketika pindah ke 9.5 dari 9.4.X)

Inilah dependensi
"ketergantungan": {
"berikutnya": "9.4.4",
"gambar-berikutnya": "^1.4.0",
"node-sass": "^4.14.1",
"bereaksi": "16.13.1",
"react-document-meta": "^3.0.0-beta.2",
"react-dom": "16.13.1",
"react-horizontal-timeline": "^1.5.3",
"react-meta-tags": "^0.7.4",
"react-onclickoutside": "^6.9.0"
},
"devDependencies": {
"@types/node": "^14.0.23",
"@types/react": "^16.9.43",
"ketik": "^3.9.7"
}

Saya mengalami masalah yang sama saat mengimpor komponen material-ui/core/Dialog , saya telah menetapkan package.json saya untuk menggunakan react 16.8.0 khusus untuk react dan react-dom impor.

Saya telah menjalankan npm ls react dan npm ls react-dom dengan hanya satu impor Saya juga mencoba tes yang dijelaskan di halaman kesalahan:

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

Yang mengembalikan false , namun bagaimana cara melacak versi reaksi "berbeda" yang diimpor oleh ketergantungan?, tampaknya hanya terjadi ketika saya mengimpor komponen Dialog UI Material , itu terjadi segera setelah ketuk tombol yang memicunya untuk rendering. Saya dapat menggunakan komponen lain seperti List dan ListItems , dll.

Saya mencoba memaksa resolusi dan itu juga tidak memperbaikinya.

Saya tidak menggunakan paket web (proyek yang sangat kecil) sehingga pembangunan terjadi dengan react-scripts build jika itu membuat perbedaan.

Tulis ulang: Saya hanya akan mengganti pertanyaan saya dengan referensi solusi (dan mungkin permintaan untuk kejelasan istilah yang lebih banyak lagi di dokumen, untuk kami yang bodoh? :))

Latar belakang:
Saya mencoba mengkompilasi webpack komponen fungsional dengan kait ke dalam aset tempat komponen itu dapat dipanggil dari Vanilla JS di browser.

Sebagai contoh,

function Example() {
    const [count, setCount] = React.useState(0);

    return <button onClick={() => setCount(count + 1)}>
        You clicked {count} times
    </button>;
}
export default Example;

... yang ingin saya ekspor sebagai modul itu sendiri, dan setelah memuat aset itu, gunakan langsung dari HTML, mirip dengan:

<script defer>
            ReactDOM.render(
                ExportedCompiledExample.default(props),
                document.getElementById("my_element")
            );
</script>

Saya sudah lama menjalankan ini _asalkan komponennya tidak mengandung kait_. Tetapi ketika menggunakan kait, saya terus mengalami pesan kesalahan yang ditakuti ini.

Solusi sederhana yang membalik meja
Saya mengikuti _banyak_ herring merah yang lebih rumit (beberapa versi/contoh reaksi/reactDOM, impor npm dan dependensi sekunder tersembunyi, react-hot-loader, pengaturan webpack, eksternal, konvensi bundel/modul/library yang berbeda, struktur pasca-kompilasi .. .) sebelum mencoba ini, yang berhasil:

export default () => <Example />;

(atau export default props => <Example {...props} /> jika berlaku).

Dalam retrospektif 20/20 itu masuk akal, saya kira.

Tetapi hanya untuk menunjukkan dengan tepat sumber kebingungan jika ada orang lain yang membutuhkannya: dokumen aturan kait mengatakan _Panggil mereka di tingkat teratas dalam isi komponen fungsi_. Yang saya pikir saya lakukan, karena saya benar-benar menempelkan contoh langsung ke struktur saya.

Interpretasi saya adalah bahwa ini , dari contoh...

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

... BUKAN komponen fungsi itu sendiri? Itu menjadi dalam konteks panggilan yang benar (jadi, bukan Example() tetapi <Example /> ).

Saya kira saya mungkin melewatkannya di tempat lain di dokumen, tetapi jika tidak: itu akan menghemat banyak waktu saya jika sedikit konteks penggunaan (atau hanya pengaturan modul ES) dimasukkan/disebutkan/ditautkan. :) Terutama karena versi export default Example langsung bekerja tanpa kait.

Terima kasih atas solusi yang berfungsi @apieceofbart! Masalah saya terkait dengan tautan npm.

Inilah cara saya membuatnya bekerja dengan Create React App, di mana konfigurasi Webpack disembunyikan oleh desain. Mungkin solusi Anda juga @florianzemma?

1. npm install -D react-app-rewired
2. Buat file bernama config-overrides.js di root proyek Anda.

// config-overrides.js
module.exports = function override(config, env) {
  const path = require('path');

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

1. Ganti react-scripts ... -commands yang relevan di package.json dengan react-app-rewired ... .

Saya harap ini membantu

Saya mendapatkan kesalahan ini karena saya memuat bundel 2 kali.
Dalam kasus saya itu terjadi karena templat nunjucks tempat tag skrip dirender telah digunakan 2 kali - dalam tata letak itu sendiri, dan pada templat umum untuk konten tag kepala,

Solusi benang

Saya menggunakan Benang, dan memperbaikinya dengan memaksa resolusi di package.json saya:

  "resolutions": {
    "**/react": "16.7.0-alpha.2",
    "**/react-dom": "16.7.0-alpha.2"
  },

Selain menambahkan resolusi di aplikasi induk (menggunakan perpustakaan), saya memperbarui dependensi perpustakaan dengan perintah berikut:

1. yarn add link:/path/to/parent-app/node_modules/react
2. yarn add link:/path/to/parent-app/node_modules/react-dom

Setelah ini saya menautkan ulang perpustakaan di aplikasi induk dengan yarn add link:/path/to/library

Hai
Saya menemukan masalah yang sama dengan ruang kerja benang.
Saya memiliki tata letak seperti ini:

ruang kerja/
perpustakaan/
aplikasi1/
aplikasi2/

app1 dan app2 memiliki dependensi langsung untuk bereaksi v16.9.0, react-dom v16.9.0 dan 'library'.
'perpustakaan' memiliki ketergantungan rekan untuk bereaksi v16.9.0 tetapi juga ketergantungan pengembang pada buku cerita.
Masalahnya tampaknya berasal dari buku cerita yang memiliki ketergantungan pada reaksi v16.13.1.
Namun, ketika saya menjalankan yarn install, saya berakhir dengan react 16.13.1 di node_modules tingkat atas saya dan bereaksi 16.9.0 di node_modules lokal app1 dan app2.

Ketika saya menjalankan app1 (dibuat dengan CRA), ia menggunakan reaksi lokal v16.9.0, tetapi komponen dari 'perpustakaan' menggunakan React v16.13.1

Bagi saya ini adalah masalah dengan logika pengangkat benang, definisi webpack buat-reaksi-aplikasi atau keduanya?
Adakah yang punya ide solusi untuk skenario ini?

Hai
Saya menemukan masalah yang sama dengan ruang kerja benang.
Saya memiliki tata letak seperti ini:

ruang kerja/
perpustakaan/
aplikasi1/
aplikasi2/

app1 dan app2 memiliki dependensi langsung untuk bereaksi v16.9.0, react-dom v16.9.0 dan 'library'.
'perpustakaan' memiliki ketergantungan rekan untuk bereaksi v16.9.0 tetapi juga ketergantungan pengembang pada buku cerita.
Masalahnya tampaknya berasal dari buku cerita yang memiliki ketergantungan pada reaksi v16.13.1.
Namun, ketika saya menjalankan yarn install, saya berakhir dengan react 16.13.1 di node_modules tingkat atas saya dan bereaksi 16.9.0 di node_modules lokal app1 dan app2.

Ketika saya menjalankan app1 (dibuat dengan CRA), ia menggunakan reaksi lokal v16.9.0, tetapi komponen dari 'perpustakaan' menggunakan React v16.13.1

Bagi saya ini adalah masalah dengan logika pengangkat benang, definisi webpack buat-reaksi-aplikasi atau keduanya?
Adakah yang punya ide solusi untuk skenario ini?

Satu-satunya solusi yang saya temukan untuk ini adalah yarn run eject aplikasi CRA dan mengganti urutan bagian resolve dari:

```javascript
modul: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || []
),
````

ke
```javascript
modul: [paths.appNodeModules, 'node_modules'].concat(
modules.additionalModulePaths || []
),
````

Tampaknya aneh bagi saya bahwa 'appNodeModules' bukan prioritas tertinggi - tentunya aplikasi aktual yang dimaksud harus ditangguhkan ketika harus menyelesaikan dependensi?

Saya mengalami masalah 'kait' dalam pengaturan yang melibatkan Webpack dan Electron. Proyek saya memiliki ketergantungan pada modul A yang dibundel oleh Webpack (dan yang saya tulis sendiri). Saya mengeksternalisasi React dari A (mendeklarasikannya sebagai modul commonjs2). Ini mengecualikan file React dari bundel perpustakaan.

Program utama saya, berjalan dalam proses Renderer Elektron, menggunakan React juga. Saya meminta Webpack menyertakan Bereaksi ke dalam bundel (tidak ada konfigurasi khusus).

Namun, ini menghasilkan masalah 'kait' karena dua contoh React di lingkungan runtime.

Hal ini disebabkan oleh fakta-fakta berikut:

• modul A 'membutuhkan' React dan ini diselesaikan oleh sistem modul Electron. Jadi Electron mengambil React dari node_modules;
• program utama bergantung pada runtime Webpack untuk 'memuat' React dari bundel itu sendiri.
• baik Electron dan runtime Webpack memiliki cache modul mereka sendiri...

Solusi saya adalah mengeksternalisasi React dari program utama juga. Dengan cara ini, program utama dan modul A mendapatkan React dari Electron - satu instance di memori.

Saya mencoba sejumlah alias, tetapi itu tidak menyelesaikan masalah karena alias hanya menginstruksikan Webpack di mana menemukan kode modul. Itu tidak melakukan apa pun sehubungan dengan masalah beberapa cache modul!

Jika Anda mengalami masalah ini dengan modul yang tidak dapat Anda kendalikan, cari tahu apakah dan bagaimana React dieksternalisasi. Jika tidak dieksternalisasi, saya pikir Anda tidak dapat memecahkan masalah ini dalam konteks Elektron. Jika hanya dieksternalisasi sebagai global, masukkan React ke dalam file .html Anda dan buat program utama Anda bergantung padanya juga.

Akhirnya...

//webpack.config.js

module.exports = {
  ...
  externals: {
      react: 'react',
  },
}

Vue3 memiliki masalah yang sama

Saya memecahkan masalah ini dengan menempatkan react dan react-dom sebagai peerDependencies di package.json saya dari perpustakaan eksternal saya, yang menggunakan React.

  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

Saya kira saya mungkin melewatkannya di tempat lain di dokumen, tetapi jika tidak: itu akan menghemat banyak waktu saya jika sedikit konteks penggunaan (atau hanya pengaturan modul ES) dimasukkan/disebutkan/ditautkan. :) Terutama karena versi export default Example langsung bekerja tanpa kait.

Hai @espen42 ,
Saya sangat berharap solusi Anda akan membantu kami. Kami benar-benar mencoba _semuanya_, seperti yang Anda sebutkan.

Sayangnya, solusi Anda tampaknya juga tidak membantu. Aku bertanya-tanya mungkin aku hanya melewatkan sesuatu?

Jadi, dalam sebuah paket (saya akan menyebutnya @bla/bla), kita memiliki index.js yang memiliki komponen dengan kait, seperti

function Bla = ({...props]) => {
const [bla, setBla] = useState(false);
return bla ? <div {...props} /> : 'no luck';
}

Kami mengkompilasi paket menggunakan npx babel .

Kami menautkan paket ini dengan npm link dan kemudian memasukkannya ke dalam proyek seperti npm link @bla/bla .
Baik paket maupun proyek menggunakan versi React dan react-dom yang sama.

Dalam proyek, kami menyertakan paket seperti ini:

import Bla from `@bla/bla`

const RenderBla = ({...props}) => <Bla {...props} />

export default RenderBla

Sayangnya, kesalahan masih berlanjut.
Invalid hook call. Hooks can only be called inside of the body of a function component.

Apa yang bisa kita lewatkan?

"externals": {
  "react": "react",
  "react-dom": "react-dom"
}

Yang ini memperbaiki masalah saya, terima kasih banyak kawan ❤️

Kesalahan Penyesuai Bidang saat diakses melalui tautan eksternal (Sharepoint Online)

Ekstensi penyesuai bidang spfx dengan beberapa komponen fabric ui, saat diakses melalui tautan, mendapatkan salah satu kesalahan ini tergantung pada versi fabricUI:
https://reactjs.org/docs/error-decoder.html/?invariant=321 ,
https://reactjs.org/docs/error-decoder.html/?invariant=290&args []=A.%20General

ketika halaman di-refresh, semuanya berfungsi dengan baik.
Saya belum pernah menggunakan React Hooks dalam kode, hanya React Components.
Belum menggunakan referensi apa pun.

Saya pikir itu mungkin karena Fabric ui karena ketika semua komponen fabric ui dihapus, tidak ada kesalahan yang terjadi.

Telah mencoba berbagai versi fabic ui, 6.189.2, 6.214.0 dan 7.114.1 dan juga mencoba mengganti semua referensi fabric-ui dengan ui yang lancar, masalah masih tetap ada

memeriksa versi reaksi, inilah hasilnya
npm aku bereaksi
+-- @microsoft/ [email protected]
| +-- @microsoft/ [email protected]
| | -- [email protected] deduped | +-- @microsoft/[email protected] | | -- [email protected] ditipu
| +-- @microsoft/ [email protected]
| | -- [email protected] deduped | -- [email protected] ditipu
`-- [email protected]

Halo semua,
saya juga menemukan kesalahan yang mengganggu ini. Dalam kasus saya, ini juga merupakan kesalahan konfigurasi dari build webpack saya pada akhirnya. Tetapi tidak ada hal yang disarankan dalam masalah ini yang berhasil untuk saya. Jadi saya ingin berbagi pengalaman saya juga.

Halaman saya mencakup beberapa titik masuk, dan SplitChunkPlugin dapat membuat potongan runtime. Karena kami menggunakan permata Rails-webpacker, itu dikonfigurasi secara default untuk membuat runtime untuk setiap potongan. Tetapi webpack melakukan sesuatu yang serupa secara default, itu termasuk runtime di dalam potongan.

Tentu saja dokumentasi memperingatkan tentang kasus ini, tetapi Anda harus menemukannya. Mengatur optimization.runtimeChunk ke single akan membuat runtime terpisah. Ini akan mencegah build Anda membuat beberapa salinan reaksi, saat menggunakan reaksi dari beberapa titik masuk.

Lihat https://webpack.js.org/configuration/optimization/#optimizationruntimechunk

Hai semuanya,
Saya memiliki masalah bahwa saya ingin menggunakan lib eksternal yang berasal dari CDN dan disertakan dengan tag <script> , jadi tidak banyak yang dapat saya lakukan dengan kode itu sendiri. Lib menggunakan reaksi dan kait, jadi saya mendapatkan
3. You might have more than one copy of React in the same app kesalahan.
Sayangnya tidak ada paket NPM untuk perpustakaan: https://github.com/Anyline/anyline-ocr-anylinejs-module
Saya menggunakan CRA dan proyek tidak dikeluarkan.

Dibuat sedikit contoh Sandbox .

Itu melempar kesalahan yang sama karena paket lain juga menggunakan kait tetapi dengan React-nya sendiri. Saya harus mempublikasikan paket saya ke NPM dan kemudian mengimpornya langsung dari NPM. Itu

Saya datang ke masalah ini baru-baru ini dan bertanya-tanya mengapa.
Saya menyelesaikannya dengan mengunggahnya ke GitLab dan menginstalnya berdasarkan alamat.
Apa perbedaan antara paket dan paket lokal?

Saya telah menemukan bahwa saya mendapatkan "panggilan hook tidak valid." ketika saya secara dinamis memuat Komponen yang memanggil hook.

Kode Sandbox

Tes yang memuat "Aplikasi" lulus secara statis. Dua tes yang memuatnya secara dinamis (satu menggunakan require , satu menggunakan import sebagai fungsi) keduanya memberikan kesalahan.

Mengapa saya peduli: Saya mencoba menulis beberapa tes di mana saya menggunakan jest.doMock untuk mengejek beberapa hal dan kemudian secara dinamis memuat modul yang ingin saya uji, sesuai dengan dokumentasi . Saya menggunakan doMock alih-alih Mock karena saya harus dapat mengejek berbagai hal secara berbeda dalam fungsi yang berbeda. Anda akan melihat bahwa kesalahan terjadi tanpa melibatkan ejekan.

Itu melempar kesalahan yang sama karena paket lain juga menggunakan kait tetapi dengan React-nya sendiri. Saya harus mempublikasikan paket saya ke NPM dan kemudian mengimpornya langsung dari NPM. Itu

Saya datang ke masalah ini baru-baru ini dan bertanya-tanya mengapa.
Saya menyelesaikannya dengan mengunggahnya ke GitLab dan menginstalnya berdasarkan alamat.
Apa perbedaan antara paket dan paket lokal?

@catsheue adalah React1 === React2 true untukmu?
saya belum menerbitkan milik saya di npm namun ingin tahu apakah itu penyebabnya

milik saya tampaknya React1 === React2 = true dan belum menemukan solusi mengapa ini terjadi ketika saya mengimpor perpustakaan reaksi saya ke dalam sebuah proyek

Punya masalah yang sama menggunakan yarn link untuk menguji perpustakaan lokal. Kesalahan saya adalah mencantumkan react dan react-dom sebagai dependensi dev bukan rekan.

Jadi saya seharusnya melakukan yarn add --peer react react-dom . Akhirnya, karena saya telah membuat kesalahan dalam melakukan React sebagai dependensi dev, saya perlu membersihkan node_modules dari perpustakaan saya. rm -rf node_modules; yarn memperbaiki masalah untuk saya.

Saya juga menghadapi masalah ini. Dalam kasus saya itu disebabkan oleh duplikat Bereaksi dari Buku Cerita (v6.0.28). Saya yakin Anda dapat menemukan info lebih lanjut di sini .

Saya menghapus dependensi Buku Cerita, menghapus node_modules dan menjalankan yarn install lagi. Ini berhasil untuk saya. Saya harap ini membantu seseorang menghindari air mata dan membuang waktu berjam-jam untuk ini.

Solusi ini bekerja untuk saya juga. Saya menggunakan Fungsi Firebase dan memiliki folder node_modules di root proyek saya dan di bawah direktori /functions/ . Jika saya menghapus /functions/node_modules , aplikasi saya berjalan dengan baik. Ini adalah solusi, tetapi cukup mengganggu. Adakah yang menemukan solusi yang memungkinkan kedua folder node_modules ada secara bersamaan?

Untuk anak cucu dan siapa saja yang mungkin menghadapi masalah ini saat menggunakan mdbootstrap di aplikasi yang dibuat dengan create-react-app .

Saya melihat kesalahan ini saat menambahkan berbagai komponen mdbootstrap seperti tombol dan gambar kartu. Keluaran konsol yang ditambahkan ke index.js untuk pemecahan masalah sesuai dengan artikel dukungan React mengembalikan true pada versi yang membandingkan. Jadi saya harus mencoba sesuatu yang lain.

Cara mengatasinya adalah menjalankan npm dedupe

npm ls react

+-- [email protected]
| `-- [email protected]
`-- [email protected]

npm dedupe

npm ls react

+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]

Setelah ini, semua komponen bekerja dengan baik. Hari hari menyenangkan.

Saya telah menemukan bahwa saya mendapatkan "panggilan hook tidak valid." ketika saya secara dinamis memuat Komponen yang memanggil hook.

Kode Sandbox

Tes yang memuat "Aplikasi" lulus secara statis. Dua tes yang memuatnya secara dinamis (satu menggunakan require , satu menggunakan import sebagai fungsi) keduanya memberikan kesalahan.

Mengapa saya peduli: Saya mencoba menulis beberapa tes di mana saya menggunakan jest.doMock untuk mengejek beberapa hal dan kemudian secara dinamis memuat modul yang ingin saya uji, sesuai dengan dokumentasi . Saya menggunakan doMock alih-alih Mock karena saya harus dapat mengejek berbagai hal secara berbeda dalam fungsi yang berbeda. Anda akan melihat bahwa kesalahan terjadi tanpa melibatkan ejekan.

@ miket01 Persis seperti yang saya coba lakukan (tetapi tanpa mengejek). Apakah Anda menemukan solusi?

Menemukan ini melakukan:

function HeadedSection (props) {
   if (!ReactDOMServer.renderToStaticMarkup(props.children))
        return null;

    const [hidden, set_hidden] = useState(props.hidden);

Diperbaiki dengan memanggil useState terlebih dahulu:

function HeadedSection (props) {
    const [hidden, set_hidden] = useState(props.hidden);

    if (!ReactDOMServer.renderToStaticMarkup(props.children))
        return null;

Saya masih mendapatkan kesalahan ini setelah menyisihkannya selama berbulan-bulan.

Saya menggunakan nol kait dalam program saya. Ada persis satu salinan react dan satu salinan react-dom dan mereka adalah versi yang sama. Tidak ada tautan.

Itu sebagian berhasil sebelum saya baru-baru ini mencoba memperbarui beberapa paket untuk memperbaiki masalah keamanan. Saya menggunakan next.js dan perbaikannya adalah mengecualikan beberapa subkomponen dari komponen tingkat atas dengan membungkusnya dalam {typeof window !== 'undefined' tetapi sekarang tidak berhasil juga.

[18:50:42] (master) questions
// ♥ npm ls react
[email protected] /Users/Dan/work/b/questions
└── [email protected]

[22:46:34] (master) questions
// ♥ npm ls react-dom
[email protected] /Users/Dan/work/b/questions
└── [email protected]

[22:46:55] (master) questions
// ♥ npm dedupe
removed 55 packages, moved 46 packages and audited 1712 packages in 65.449s

33 packages are looking for funding
  run `npm fund` for details

found 26 vulnerabilities (15 low, 3 moderate, 8 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Kesalahan terjadi karena ReactCurrentDispatcher.current === null tetapi saya tidak dapat menemukan di mana pun di /node_modules/react/cjs/react.development.js tempat ini disetel ke sesuatu.

Dapatkah seseorang memberi tahu saya di mana ReactCurrentDispatcher.current seharusnya mendapatkan nilai?
https://github.com/facebook/react/search?p=2&q=%22ReactCurrentDispatcher.current+%3D%22&type=code

Ini terlihat seperti kandidat, tetapi kode ini tidak terdapat dalam react-development.js saya. Haruskah?

    const prevPartialRenderer = currentPartialRenderer;
    setCurrentPartialRenderer(this);
    const prevDispatcher = ReactCurrentDispatcher.current;
    ReactCurrentDispatcher.current = Dispatcher;

https://github.com/facebook/react/blob/702fad4b1b48ac8f626ed3f35e8f86f5ea728084/packages/react-dom/src/server/ReactPartialRenderer.js#L859

Saya mendapatkan kesalahan ini dengan rendering sisi server oleh next.js dan kode ini ada di sumber reaksi di bawah react-dom/server . Bagaimana cara menentukan apakah /node_modules/react/cjs/react-development.js benar?

PEMBARUAN: Ini adalah masalahnya. Saya telah mengedit webpack.config.externals di file next.config.js saya
https://github.com/vercel/next.js/issues/17592#issuecomment -712443172

Aplikasi Saya membuat kesalahan besar (panggilan kait tidak valid) setiap kali saya mencoba mengintegrasikan UI materi ke dalamnya. Saya benar-benar baru di React jadi saya butuh bantuan.