@baldurh Ini memang sangat tidak umum, ketika menggunakan platform seperti Sekarang hanya folder tempat aplikasi Next.js hidup yang di-deploy, lebih baik demikian karena jika tidak, Anda perlu mengetahui tentang semua modul eksternal terlebih dahulu. 2 alternatif yang lebih baik adalah:

• Pindahkan semuanya ke satu aplikasi Next.js
• Gunakan paket lerna atau private npm atau sejenisnya

@lfades terima kasih atas jawabannya. Tidak satu pun dari opsi tersebut yang tersedia untuk kami dan kami tidak menerapkan ke Now atau yang serupa. Kami menggunakan ruang kerja benang pada awalnya, tetapi kemudian kami mengintegrasikan bazel dan itu tidak cocok dengan sifat ruang kerja benang yang saling berhubungan. Paket Npm berarti kami tidak dapat mengembangkan modul bersama secepat yang kami inginkan. Itu terlalu banyak di atas kepala.

@baldurh Baru saja menemukan ini dengan next-i18next karena kami memiliki aplikasi NextJs bersarang sebagai contoh. Apakah Anda menemukan solusi?

@isaachin Kami belum. Kami belum berhasil meningkatkan ke 9.x karena alasan lain jadi saya belum memeriksanya. Adakah yang tahu di mana kode yang mempengaruhi ini mungkin? Saya ingin memahami masalahnya dengan lebih baik.

Saya belum punya waktu untuk menggali ini, tetapi jika ada yang membutuhkan repro: clone next-i18next , cd menjadi examples/simple dan tingkatkan versi NextJs ke> = 9.0.6.

Saat ini ada di 9.0.3, jadi ini secara teknis merupakan perubahan yang melanggar pada tambalan.

Saya mengalami kesalahan serupa baru-baru ini dan harus menurunkan versi ke 9.0.5 (dan Bereaksi 16.8.x). Saya semacam mempersempit masalah yang saya lihat pada penggunaan MDX Next, tetapi saya tidak memiliki detail konkret di luar itu.

Saya telah menggali masalah yang sama dengan proyek yang cukup besar berdasarkan Next & next-i18next.

Saya melihat bahwa kesalahan ini disebabkan oleh 3 alasan:

1. Versi react & react-dom tidak selaras - tidak diterapkan ke aplikasi saya
2. 2 versi react-dom yang diimpor - tidak diterapkan ke aplikasi saya
3. Penggunaan yang tidak tepat dari hook React - Saya tidak menggunakan hook tetapi beberapa lib digunakan, dan sepertinya itu berfungsi untuk satu sama lain.

Hal yang aneh adalah itu hanya terjadi pada produksi build.

@timneutkens @Timer maaf telah menandai Anda dalam hal ini, tetapi saya ingin masukan dari Anda. Apakah menurut Anda ini adalah sesuatu yang dapat diperbaiki, apakah kita semua perlu menerapkan beberapa solusi? Ini adalah pemblokir yang cukup besar bagi kami saat ini. Terima kasih.

Sepertinya Anda menggunakan alias react tetapi bukan react-dom . Bisakah kamu mencobanya?

@Timer Terima kasih. Saya mencoba tetapi tidak ada pengaruh apa-apa

Saya dapat menyelesaikan ini sekarang di repro dengan memindahkan dependensi react dan react-dom satu level ke atas. Saya hanya mendorong perubahan jika ada yang ingin mencobanya. Saya belum mencobanya di proyek kami yang sebenarnya, tetapi saya berharap ini akan berhasil untuk kami. Mungkin ini bisa menyelesaikan masalah untuk @isaachinman , @jaredcwhite , dan @felixmosh juga?

@Timer aku kerja ini dalam proyek kami tapi saya juga harus memastikan saya tidak punya dependensi lain yang diinstal react ke proyek-proyek kami node_modules folder. Dalam kasus kami, ini terkait dengan buku cerita ( yarn why react banyak membantu 😄). Kami berencana untuk memindahkan buku cerita ke proyek terpisah jadi saya pikir solusi ini akan berfungsi dalam kasus kami.

Ah iya. Paket node_module diterbitkan secara tidak benar akan menyebabkan ini (dengan ketergantungan pada react(-dom|) alih-alih ketergantungan rekan).

Saya dapat menyelesaikan ini sekarang di repro dengan memindahkan dependensi react dan react-dom satu level ke atas. Saya hanya mendorong perubahan jika ada yang ingin mencobanya. Saya belum mencobanya di proyek kami yang sebenarnya, tetapi saya berharap ini akan berhasil untuk kami. Mungkin ini bisa menyelesaikan masalah untuk @isaachinman , @jaredcwhite , dan @felixmosh juga?

Bisakah Anda menjelaskan lebih lanjut tentang perubahan yang telah Anda lakukan di repo ini?

Saya menjalankan npm ls react atau npm ls react-dom Saya hanya mendapatkan aplikasi saya berikutnya dalam daftar.

@felixmosh Maaf, ternyata react dan react-dom dari folder app ke dalam folder root jadi sekarang Anda perlu melakukan yarn/npm install di kedua app folder dan folder root sebelum Anda menjalankan app . Semoga ini cukup jelas.

Kami harus melakukan beberapa perubahan pada sistem build kami untuk membuatnya berfungsi dalam produksi, jadi solusi ini masih sedikit merepotkan kami 😝

Terima kasih untuk penjelasannya, saya akan menunggu tim Next menyelesaikannya, kedengarannya agak aneh untuk memberikan reaksi tergantung pada root mono-repo saya ...

@felixmosh Ya, saya setuju dengan Anda. Namun, jika Anda menggunakan sesuatu seperti ruang kerja benang, itulah yang akan dilakukan oleh alat itu. Jika Anda memiliki dependensi yang sama dalam dua atau lebih project, itu akan mengangkat dependensi ke root. Ini bagus karena memastikan bahwa Anda memiliki versi dependensi yang sama di semua proyek Anda. Tetapi jika Anda tidak memiliki alat seperti itu Anda harus mengelolanya sendiri yang memang agak janggal. Saya setuju solusi terbaik adalah tim Next.js melihat dan menyelesaikan ini untuk kita semua 😇🙏🏻

Mengalami masalah yang sama, dan menaikkan level react dan react-dom satu dan menjalankan server dari root adalah satu-satunya solusi yang berfungsi saat ini pada 9.1.5. Menautkan https://github.com/facebook/react/issues/13991 dan https://github.com/facebook/react/issues/15315#issuecomment -479802153 untuk referensi karena saya menemukan tautan tersebut sebelum masalah ini.

Hai, ada pembaruan tentang masalah ini? Kami memiliki monorepo dan kami menghadapi masalah ini.

Bertemu dengan masalah yang sama.
v9.0.5 berfungsi baik dengan kait untuk komponen yang diimpor di luar folder root.

Mulai dari 9.0.6 hingga 9.1.6-canary.5 memiliki masalah yang sama.

Masalahnya hanya terjadi di sisi server. Jika SSR dinonaktifkan (mis. Memuat komponen eksternal melalui dinamis ) maka semua berfungsi seperti yang diharapkan untuk versi> = 9.0.6.

@nodkz ini adalah masalah dengan penyelesaian paket react, oleh karena itu ini hanya terjadi di node.

@Timer Masalah ini telah dipindahkan ke tonggak "berikutnya" untuk sekitar 6 versi, ini mencegah saya memperbarui ke versi terbaru.

Saya telah membuang-buang waktu sepanjang hari di akomodasi, tidak tahu apa sumber masalahnya, bahkan mencoba solusi (yang tidak berhasil).

Apakah Anda memerlukan bantuan untuk menyelidiki segala arah?
Apakah Anda punya firasat tentang itu?
Mengapa itu hanya terjadi pada build produksi?
Apa yang diubah dari 9.0.5 menjadi 9.0.6 yang mungkin terkait dengan ini?

Thanx 🙏🏼

Saya pikir saya telah menemukan masalahnya !!!
Menurut saya ini adalah kombinasi dari 2 hal:

1. penggunaan sym-link untuk node_modules
2. i18next / react-i18next tidak eksternal dalam bundel server !!
   
   Dalam kasus saya, ketika meledak pada build produksi, ia mengeluh pada i18next useTranslation hook ...

Jadi saya telah menyelidiki alasan mengapa ada modul node di dalam bundel server sama sekali (praktik terbaik untuk bundel server adalah menjadikannya eksternal).

Saya melihat bahwa next memiliki beberapa pengecualian untuk lib berikutnya (mengapa?), Bagian lucunya adalah bahwa regex ini menangkap semua lib yang diakhiri dengan next/dist/ , seperti yang dilakukan i18next & react-i18next !!

Jadi, jika Anda mengubah ini:

res.match(/next[/\\]dist[/\\]/) 

ke

res.match(/[/\\]next[/\\]dist[/\\]/) 

Bundel server akan mengecualikan semua lib yang bukan next & diakhiri dengan next/dist , dan itu menyelesaikan masalah!

Bagi saya, masalah utamanya adalah cara baru menyelesaikan permintaan: https://github.com/zeit/next.js/blob/canary/packages/next/build/webpack-config.ts#L446

Karena kita memiliki komponen di luar root proyek, resolusi permintaan akan menampilkan kesalahan yang mengakibatkan react dibundel dalam potongan server. Dan itulah mengapa kami mendapatkan kesalahan Invalid hook call di server.

@baldurh context dalam ekspresi yang Anda tautkan disediakan oleh webpack, dan berbeda dengan root kompilasi (direktori proyek Anda).
Itu selalu direktori file yang mengeluarkan kebutuhan.

Baik. Saya telah menambal ini agar berfungsi untuk kami saat ini. Saya pikir kami pada akhirnya akan mengubah struktur kode sehingga dependensi dibagikan pada tingkat direktori atas. Namun, meskipun react tersedia di folder eksternal (di luar root) saya masih mendapatkan kesalahan.

Saya mencoba menggunakan paket tertaut dan saya mengalami masalah yang sama. Sayangnya tidak ada perbaikan dari https://github.com/facebook/react/issues/13991 yang berfungsi 🙁

Saya juga mengalami masalah yang sama dengan pustaka komponen yang ditautkan dengan yarn link . Ini berfungsi dengan baik hingga v9.0.6-canary.4 dan sekarang saya berada di posisi yang sama dengan beberapa pemberi komentar lain dan tidak dapat meningkatkan versi setelah ini .. Saya telah menunjukkan perubahan pada PR ini https://github.com/zeit /next.js/pull/8739

Perpustakaan komponen saya menggunakan react , react-dom , dan styled-components . Konfigurasi untuk ini adalah sebagai berikut

• Menambahkan paket sebagai devDependencies dan memasukkannya ke dalam peerDependencies
• Menambahkan paket sebagai eksternal dalam konfigurasi webpack saya
• Menambahkan alias penyelesaian ke paket ini di konfigurasi saya berikutnya
• Transparansi modul pustaka komponen dengan next-transpile-modules

Memperbarui

Saya dapat memperbaikinya dengan memasukkan modul-modul ini di server eksternal. Terima kasih kepada @HosseinAgha dalam komentar ini https://github.com/martpie/next-transpile-modules/issues/50#issuecomment -558318688

if (isServer) {
  config.externals = [
    'react',
    'react-dom',
    'styled-components',
    ...config.externals
  ]
}

Saya melihat masalah yang persis sama, sejauh ini tidak ada solusi yang berhasil untuk saya.

Paket saya berfungsi jika saya menerbitkannya dan menginstalnya (dan menggunakan resolusinya.alias di next.config.js saya).

Tetapi menjalankan build dev dengan paket yang ditautkan melalui yarn link @mypackage selalu menghasilkan kesalahan hook yang tidak valid.

Saya juga bisa membuatnya berfungsi dengan memodifikasi node_modules/dist/build/wepack-config.js dan mengomentari baris yang ditambahkan di https://github.com/zeit/next.js/pull/8739

Apa yang saya lihat jika saya membuat log baseRes dan res adalah bahwa kondisi if terpicu sebagai:

• /myApp/node_modules/react/index.js! == /myApp/node_modules/myPackage/node_modules/react/index.js
• dari pemahaman saya ini memicu jika jalurnya tidak sama bahkan file / versinya 100% identik

Memperbarui:

Kami berhasil mengatasi masalah dengan mengubah paket kami untuk menggunakan ruang kerja benang (meskipun repo kami hanya berisi satu paket).
Kami memindahkan kode kami dari ./src ke ./package/our-package-name/src dan menyiapkan yarn workspaces => https://classic.yarnpkg.com/en/docs/workspaces/

Ini mengatasi masalah karena ini akan mengangkat dependensi umum ke folder tingkat atas ./node_modules dan ./package/our-package-name/node_modules sebagian besar akan tetap kosong.

Jadi sekarang ketika kita menautkan paket kita selanjutnya tidak akan menarik versi kedua dari react lagi (karena tidak ada di folder paket node_modules kami) dan semuanya berfungsi sebagaimana mestinya.

Saya memiliki masalah yang sama. ¬¬ '

Kami umumnya mencabut umpatan karena melanggar kode etik.

Maaf, saya marah dengan bug ini. Sebenarnya, saya terlalu menyukai Next.JS. Tapi tidak ada yang bisa menggunakannya karena masalah ini membosankan.

Kami menghadapi masalah ini saat bekerja dengan paket lokal eksternal dan next-transpile-modules .

Karena kami ingin tetap menggunakan versi terbaru Next.js, saya akan mencoba mengirimkan tambalan ke Next.js jika saya menemukan akar masalahnya.

Saya menghadapi masalah yang sama, setelah menginstal [email protected]
Dependensi saya adalah [email protected] , [email protected] , [email protected] dan tentu saja banyak libs lainnya (tetapi semuanya berfungsi sebelum menginstal next-i18next). Jika seseorang memiliki solusi, itu bisa sangat bagus: +1:

Terima kasih telah memposting masalah ini, saya juga mengalami masalah dengan menghubungkan paket sistem desain kami (perpustakaan komponen react). Kami juga mentransformasikannya menggunakan https://github.com/martpie/next-transpile-modules.

Perbaikan seperti yang disarankan di sini berhasil untuk kami:

• Symlink perpustakaan Anda ke folder node_modules (kami melakukannya dengan utilitas kami sendiri, bukan npm link tetapi pada dasarnya harus sama)
• Tambahkan sesuatu seperti berikut ini ke next.config.js :

// next.config.js
const nextConfig = {
    webpack: (config, options) => {
        // modify the `config` here

        if (options.isServer) {
            config.externals = ["react", ...config.externals];
        }
        config.resolve.alias["react"] = path.resolve(__dirname, ".\\node_modules\\react");

        return config;
    },
};
// more plugins etc...

Solusi alternatif kami yang tidak memerlukan konfigurasi

• Symlink semuanya kecuali node_modules dari paket Anda. Saya membuat utilitas saya sendiri untuk ini mungkin dapat mempostingnya di github.

Tetapi alangkah baiknya melihat ini diperbaiki di NextJS, saya menghabiskan begitu banyak waktu untuk mencoba memahami mengapa alias webpack bekerja untuk semua proyek non NextJS saya :)

PS. Saya tidak tahu bagaimana hal ini akan memengaruhi build produksi, tetapi kami hanya akan menggunakan ini selama dev

if (options.isServer) {
            config.externals = ["react", ...config.externals];
        }

react sudah berada di sisi server eksternal.

config.resolve.alias["react"] = path.resolve(__dirname, ".\\node_modules\\react");

Ini tidak akan menyelesaikan masalah.

Seperti yang dikatakan sebelumnya masalah ini terkait dengan ketergantungan Anda tergantung pada react sedangkan mereka harus memiliki peerDependency pada react (dan react-dom jika mereka membutuhkannya).

@tokopedia

Tidak, ini tidak selalu terjadi. Saya pasti telah bereaksi dan bereaksi-dom sebagai ketergantungan rekan. Masalahnya masih terjadi meskipun Anda misalnya menghubungkan perpustakaan Anda ke proyek nextjs. Apa yang kemudian terjadi adalah Anda akan memiliki folder node_modules di dalam perpustakaan Anda (setidaknya jika Anda pernah menjalankan npm i atau npm link dalam folder perpustakaan itu).

Ketika react diselesaikan dari folder perpustakaan ini, itu akan menyelesaikan dengan yang ada di folder node_modules dan Anda mendapatkan salinan ganda dari react yang menyebabkan masalah. Jika saya menghapus folder node_modules di dalam lib saya atau menginstalnya menggunakan sesuatu selain npm link maka yes ofc berfungsi (jika Anda menggunakan dependensi peer atau versi react yang persis sama).

Jadi untuk mengatasi ini selama dev Anda ingin bisa alias bereaksi untuk memaksa semua orang menggunakan versi yang sama. Karena masalah yang disebutkan di sini, ini tidak berpengaruh pada versi NextJS saat ini tanpa menambahkan bagian config.externals ... (setidaknya untuk saya), mungkin seperti yang telah disebutkan di sini karena beberapa perubahan seperti yang disebutkan di sini # 8739?

Masalah serupa terjadi pada saya tetapi (berpotensi) karena pustaka material-ui (sebagaimana diuraikan dalam # 10162), perbaikan sementara saya untuk saat ini hanyalah menambahkan npm run clean dalam preserve dan dev skrip seperti yang diuraikan di sini:
https://github.com/zeit/next.js/issues/10162#issuecomment -612501431

@timneutkens Saya memahami masalah sebenarnya

@ ryan-0 Apakah Anda punya pengaturan khusus? Akan terkejut jika materi Ui tidak mendaftar bereaksi sebagai dep peer? Seperti apakah Anda menggunakan versi react yang sangat lama atau symlink apa saja?

tidak ada pengaturan khusus .. tidak ada symlinking dan bereaksi 16.13.1 -> kami memiliki beberapa departemen lain yang mungkin menyebabkan masalah menjadi adil, tetapi setidaknya menurut repro itu sepertinya terkait dengan material-ui / core (yang juga kami gunakan):
https://github.com/zeit/next.js/issues/10162

@ ryan-0 apakah ada folder node_modules dengan react di dalam folder material-ui Anda?

Juga apakah mulai bekerja setelah menjalankan npm dedupe?

tidak, sepertinya tidak ada folder node bersarang, itulah sebabnya saya bingung bagaimana bug itu terjadi. dan tidak ada npm dedupe tidak berfungsi :(

Anehnya, menggunakan resolve.alias tampaknya tidak mempengaruhi paket di luar root proyek.

Ini file next.config.js :

const path = require('path')

module.exports = {
  webpack: config => {
    const { alias } = config.resolve || {}
    alias.react$ = path.resolve('node_modules/react')
    alias['react-dom$'] = path.resolve('node_modules/react-dom')

    config.resolve = {
      ...config.resolve,
      alias,
    }

    return config
  }
}

Saya menggunakan yarn link dengan paket lokal yang ada di Lerna monorepo. node_modules tidak berisi salinan react , tetapi root monorepo memilikinya . Saya tidak berharap itu akan membuat perbedaan selama resolve.alias digunakan, tapi sayangnya tidak demikian. Setelah menghapus salinan react dari root monorepo, saya sekarang mendapatkan kesalahan Cannot find module 'react' .

Apakah seseorang menemukan solusi yang baik untuk ini?

Saya memiliki perpustakaan berikutnya yang ditautkan yang saya gunakan next-transpile-modules untuk ditambahkan ke proyek 'konsumen' saya. Saya menambahkan react alias di next.config.json seperti yang disebutkan dalam dokumen mereka, tetapi itu tidak cukup. Saya masih mendapatkan error dari ketergantungan duplikat untuk React.

Anda dapat mencoba menggunakan relative-deps oleh @mweststrate

Apakah seseorang menemukan solusi yang baik untuk ini?

Saya memiliki perpustakaan berikutnya yang ditautkan yang saya gunakan next-transpile-modules untuk ditambahkan ke proyek 'konsumen' saya. Saya menambahkan react alias di next.config.json seperti yang disebutkan dalam dokumen mereka, tetapi itu tidak cukup. Saya masih mendapatkan error dari ketergantungan duplikat untuk React.

Ya lihat posting saya di atas Anda perlu menambahkan bagian config.externals di sampel saya, lalu alias mulai berfungsi lagi

@ Johot Saya mencoba solusi Anda tetapi tidak berhasil untuk saya. Saya mulai mendapatkan beberapa kesalahan aneh, tetapi terutama yang ini: cannot destructure property 'query' of 'Object(...)(...)' as it is null setelah mencoba solusi Anda. Objek yang terlihat sebagai null dalam kasus ini adalah useRouter dari next/router .

@aleclarson Terima kasih atas tipnya. Saya akan mencobanya jika saya tidak dapat membuatnya berfungsi dengan penyiapan berikutnya. Apakah Anda sedang menggunakannya saat ini?

Jika Anda menggunakan next-transpile-modules dan Yarn, solusinya cukup mudah: https://github.com/martpie/next-transpile-modules#i -have-problems-with-duplikasi-dependensi-atau-the -invalid-hook-call-error-in-react

Jika Anda menggunakan npm , saya sendiri masih mencari solusi: c

Oke, jadi solusi terakhir saya adalah bermigrasi dari yarn link ke yalc . Saya memiliki tugas gulp yang mengawasi perubahan file dan menyalin file ke folder dist dan kemudian mendorong perubahan ke penyimpanan yalc.

Di 'konsumen' saya, saya memodifikasi tsconfig.json untuk menyelesaikan jalur seperti ini:

 "paths": {
      "~/*": ["/src/*"],
      "my-library/*": ["./node_modules/my-library/dist/*"]
    },

dan di next.config.js saya menambahkan yang berikut ini:

 experimental: {
      jsconfigPaths: true, // enables it for both jsconfig.json and tsconfig.json
    }

Jadi selanjutnya dapat menyelesaikan jalur berdasarkan tsconfig.json paths . Info selengkapnya di sini .

Singkat cerita: menggabungkan yalc + next-transpile-modules meningkatkan banyak pengaturan pengembangan lokal saya. Tidak ada ketergantungan duplikat dan kesalahan aneh. Perilaku menambahkan modul secara langsung menggunakan yarn add dan menautkan modul dengan yalc hampir sama.

Jika Anda menggunakan pustaka yang terhubung secara lokal yang bergantung pada styled-components , lihat ini: https://styled-components.com/docs/faqs#linking -in-an-ssr-scenario

Di server/index.js :

const moduleAlias = require('module-alias');
moduleAlias.addAlias('styled-components', path.join(__dirname, '../node_modules/styled-components'));

Tapi, kami juga perlu menambahkan yang berikut ini di next.config.js :

config.resolve.alias['react'] = path.resolve(__dirname, './node_modules', 'react');
config.resolve.alias['react-dom'] = path.resolve(__dirname, './node_modules', 'react-dom');
config.resolve.alias['prop-types'] = path.resolve(__dirname, './node_modules', 'prop-types');
config.resolve.alias['styled-components'] = path.resolve(__dirname, './node_modules', 'styled-components');

Semoga membantu.

Diuji dengan:

Berikutnya: 9.3.5
Bereaksi: 16.13.1
komponen bergaya: 5.1.0

Teman-teman, perbaikan sederhana, hapus versi global react, next dan react-dom dengan melakukan:
npm remove -g react next react-dom

Teman-teman, perbaikan sederhana, hapus versi global react, next dan react-dom dengan melakukan:

npm remove -g react next react-dom

Saya senang itu berhasil untuk Anda, tetapi saya ragu banyak orang di utas ini menginstal dependensi ini secara global.

Bukan hanya web!
bereaksi 16.9
react-native 0.62
Berjalan di Android
Mungkin reproduksi terkecil dalam sejarah?

import React, { Component, useState } from 'react';
import {
  AppRegistry,
} from 'react-native';

function hooker() {
  const [count, setCount] = useState(0)
}

class ClassA extends Component {
  constructor(props) {
    super(props)
    //hooker();  //Invalid hook call Error
  }
  componentDidMount(){
    //hooker();  //Invalid hook call Error
  }
  render() {
    hooker();  //Invalid hook call Error
    return (      
      null   
    );
  }
} 
export default function App(props) {
  //hooker();  //No problem
  return (
    <ClassA/>
  );
};

AppRegistry.registerComponent('default', () => App);

Saya menghadapi masalah ini juga dan berjuang untuk menggunakan yarn alih-alih npm (dengan npm tidak berhasil) dan menggunakan https://github.com/vercel/next.js/ masalah / 9022 # penerbitan -616169466

Apakah ada solusi untuk semua ini?

Benar-benar macet dengan versi 9.4.4.

Masalah terjadi di HOC untuk rute pribadi di bawah. Saya juga mencoba menggunakan withRouter tetapi kemudian kesalahan yang sama terjadi pada komponen yang dibungkus.

import { useRouter } from 'next/router'

function withPrivateRoute(WrappedComponent) {
const router = useRouter();                    //**** ERROR IS THROWN HERE *******
class WPR extends React.Component {
    componentDidMount(){
        console.log('wrappeed', WrappedComponent);
        // const { router } = this.props;
        const intendedRoute = router.pathname;
        // const isAdmin = !!cookies.get('isAdmin');
        // const isAuthenticated = !!cookies.get('username');
        const isAuthenticated = false;
        const isAdmin = false;
        if (!isAuthenticated) {
            router.push({
                pathname: '/login',
                query: { from: intendedRoute },
            });
        }
        if (
            isAuthenticated &&
            router.pathname.includes('admin') &&
            !isAdmin
        ) {
            router.push('/');
        }
    }

    render() {
        return ({ ...props }) => <WrappedComponent {...props} />;
    }
}
return WPR;
 }

  export default withPrivateRoute;

Saya memiliki masalah yang sama jadi saya harus kembali ke cabang saya sebelumnya (di mana saya menganggap masalah ini tidak ada) dan menambahkan file kode terbaru berdasarkan file dan menemukan bahwa masalahnya adalah

import { useToasts, AppearanceTypes } from 'react-toast-notifications';

export const showToast = (message: string, appearance: AppearanceTypes) => {
    const { addToast } = useToasts();
    addToast(message, {
        appearance,
    });
};

Saya menggunakan layanan bersulang dan pada setiap permintaan jika ada kesalahan showToast muncul tetapi sekarang dengan kesalahan ini saya tidak berpikir saya akan menggunakan layanan ini

Saya dapat mengonfirmasi bahwa ini terkait dengan PR https://github.com/vercel/next.js/pull/8739 oleh @arcanis
Kami menggunakan pengaturan monorepo dengan Rush dan pnpm yang menghilangkan alasan penggabungan PR yang disebutkan. Ini juga berarti bahwa poin yang dibuat @timneutkens di https://github.com/vercel/next.js/issues/9022#issuecomment -610255555 tidak berlaku untuk kami, kami memiliki struktur berikut:

website
  dependencies: next, react, react-dom, library
library
  devDependencies: react, react-dom (for tests)
  peerDependencies: react, react-dom

library.devDependencies.(react|react-dom) adalah symlink yang mengarah ke file yang sama persis dengan website.dependencies(react|react-dom) . Namun sepertinya [email protected] yang digunakan di https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/lib/resolve-request.ts#L16 tidak mengikuti arus default perilaku Node.js dengan mempertahankan symlinks.

Kami berakhir dengan yang berikut:

1. Menyiapkan modul-transpile-berikutnya untuk mentranspilasi kode kami di library
2. Menyetel resolve.symlinks = true di konfigurasi webpack di dalam next.config.js
3. Memanipulasi eksternal yang diminta dari library untuk diminta dari library/node_modules (untuk build sisi server untuk menyelesaikan modul dengan benar)
4. Mengomentari baris https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/build/webpack-config.ts#L601

Ini berfungsi sebagaimana mestinya tetapi terasa meretas, mengingat bahwa Next.js mendukung beberapa situs web penting seperti Apple, apakah mungkin mengharapkan dukungan yang lebih baik untuk monorepos yang sering digunakan untuk mengelola kode bersama dalam proyek-proyek besar tersebut?

Saya telah bermain-main dengan ini dan menemukan bahwa, ketika saya menggunakan HOC itu membuat kesalahan, tetapi, jika saya menggunakan komponen sebagai pembungkus, itu berfungsi dengan baik.

Jika seseorang tertarik, saya memiliki repo di mana Anda dapat mereproduksi ini: next-components-hooks-error

HOC Test - Melempar kesalahan

components/withPrivateRoute.js -> Komponen Pesanan Tinggi

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
const withPrivateRoute = WrappedComponent => {

    const router = useRouter();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const user = localStorage.getItem('user');
        console.log(user);

        if (!user) {
            router.push('/login');
        } else {
            setLoading(false);
        }

    }, []);

    return ({ ...props }) => !loading && <WrappedComponent test={test} {...props}/>;
};

export default withPrivateRoute;

pages/hoc.js -> Tidak berfungsi (halaman menggunakan HOC)

import React from 'react';
import withPrivateRoute from '../components/withPrivateRoute';

const HocTest = () => <p>Authorization HOC Test!</p>;

export default withPrivateRoute(HocTest);

Uji Komponen Pembungkus

components/AuthLayout.js -> Komponen (pembungkus)

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

const AuthLayout = ({ children }) => {

    const router = useRouter();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const user = localStorage.getItem('user');
        console.log(user);

        if (!user) {
            router.push('/login');
        } else {
            setLoading(false);
        }

    }, []);

    return !loading && (
        <React.Fragment>
            {children}
        </React.Fragment>
    );
};

export default AuthLayout;

pages/wrapper.js -> Halaman menggunakan komponen pembungkus, itu berhasil

import React from 'react';
import AuthLayout from '../components/AuthLayout';

const WrapperTest = () => (
    <AuthLayout>
        <p>Authorization Wrapper Test!</p>
    </AuthLayout>
);

export default WrapperTest;

hey @Timer apakah ada kemajuan dalam hal ini?

Saya menyelesaikan masalah saya menggunakan https://github.com/vercel/next.js/issues/9022#issuecomment -609969178 sebagai solusinya.
Masalah saya adalah dengan menggunakan repo perpustakaan saya dan yarn link ing dengan repo aplikasi saya
contoh
package.json

{
  "dependencies": {
    "next": "9.5.1",
    "myUILibrary": "git+ssh://[email protected]/MyRepo/library-web-ui.git#master",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

dan saya yarn link myUILibrary ke checkout lokal saya MyRepo/library-web-ui yang juga memiliki react terpasang.

Terima kasih banyak @johot telah memposting solusi Anda

5 🌟 dari 3 (ya! Semua bintang dan banyak lagi!)

Saya dapat mengonfirmasi pengalaman yang sama dengan @ wasd171 di Rush + PNPM monorepo. Saya hanya akan menggunakan ~9.4.4 untuk sementara.

Saya mengalami masalah yang persis sama dengan Rush + PNPM 👍

ok, saya mengalami kesalahan yang sangat bodoh yang menyebabkan masalah ini:

import React, { useState } from 'React';

Ini harus r eact bukan R eact:

import React, { useState } from 'react';

Ya. Saya melihat ini juga di 9.5.x - Menurunkan ke 9.4.4 karya - Anda dapat mereproduksi ini dengan next-site juga

Saya tidak bisa memperbaiki kesalahan ini di 9.5.2. Tapi semuanya bekerja dengan sempurna di 9.5.3 untuk saya tanpa trik apa pun.

Saya tidak menggunakan pnpm.

Saya berbicara terlalu cepat. Saya juga tidak berpikir ini bekerja dengan 9.5.3.

Ini bekerja dengan andal di 9.5.3 untuk saya sekarang. 🤷 Saya tidak tahu apa yang terjadi lagi.

9.5.3 tidak berfungsi untuk saya - kesalahan yang sama. Saya menggunakan Rush + NPM. Apakah ada solusi yang diketahui? (btw memungkinkan memperbarui judul karena ini bukan tentang 9.0.6 lagi)

FYI, itu adalah salah satu alasan mengapa organisasi saya memutuskan untuk pindah dari npm menjadi yarn . Hanya (sayangnya) bermain jauh lebih baik. Langkah itu mengganggu, tapi kami cukup senang sekarang.

Modul transparan dengan kait juga tidak berfungsi untuk saya.

Omong-omong, kepada siapa pun yang mengalami masalah ini saat menggunakan next-transpile-modules dan npm , saya menulis bagian FAQ yang menjelaskan masalah dan solusi potensial: https://www.npmjs.com/package/ next-transpile-modules # i -have-problems-with-duplikasi-dependensi-atau-yang-tidak valid-hook-call-error-in-react

Saya berhasil menyelesaikan ini dengan menambahkan resolusi versi secara manual untuk benang di root proyek. Jadi alih-alih memindahkan semua dependensi react ke root package.json , saya menambahkan baris berikut:

  "resolutions": {
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }

Lihat: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

Perlu dicatat bahwa dalam kasus saya, build lokal berfungsi sedangkan build di Vercel melaporkan kesalahan Invalid hook call .

Saya bereksperimen dengan masalah serupa di _app.js dengan halaman catchall di Next 10

Hei,

Dalam kasus saya, saya telah mentranspilasi modul yang juga terhubung melalui npm link .

Dependensi seperti React perlu dimasukkan sebagai peerDependencies alih-alih dependensi biasa karena ia mengunduh banyak instance. Jadi jika Anda mengalami kesalahan kait tidak valid, coba langkah-langkah ini:

1. Sertakan modul pihak ketiga Anda sebagai dependensi dalam proyek utama Anda.
2. Jalankan npm install untuk menginstal semua modul Anda.
3. Buka terminal / konsol Anda dan arahkan ke modul, lalu jalankan sudo npm link .
4. Kembali ke proyek utama Anda dan jalankan npm link @example/project . Anda akan melihat ikon panah kecil di dekat nama modul Anda di dalam node_modules jika Anda menggunakan Visual Studio Code.
5. Jalankan npm run dev .

Sekali lagi, Anda harus menyertakan React sebagai peerDependency alih-alih dependensi reguler di @ example / project Anda.

Saya harap itu membantu!

Saya memiliki monorepo dengan proyek next.js di dalamnya. Menghadapi masalah yang sama dengan panggilan hook tidak valid setelah menginstal storybook . Mengatasi masalah dengan mengikuti saran resolutions ke level root package.json :

"resolutions": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1"
}

Saya tidak yakin apakah itu akan menjadi solusi yang baik setelah kami menambahkan lebih banyak klien dan paket.