Next.js: 8.0.0 - impor dinamis menyebabkan kesalahan 'Anda mungkin memerlukan pemuat yang sesuai...'

Dibuat pada 11 Feb 2019  ·  58Komentar  ·  Sumber: vercel/next.js

Laporan bug

Baru saja ditingkatkan ke 8.0.0 dan saya sangat senang! Saya mengalami masalah yang mencegah proyek saya dikompilasi

Jelaskan bugnya

Jadi ketika saya menjalankan dev saya mendapatkan masalah berikut

You may need an appropriate loader to handle this file type.
| 
| 
> import('./noop');
| var _window = window,
|     assetPrefix = _window.__NEXT_DATA__.assetPrefix;

Tampaknya berasal dari webpack 4.29.0 ( lihat di sini ).

Sepertinya masalah telah diperbaiki dengan ini yang menyatakan acorn": "^6.0.5 sebagai ketergantungan tetapi perubahan itu tampaknya tidak ada pada master

Mungkin saya mengupgrade terlalu cepat?

p0 upstream

Komentar yang paling membantu

Oke, inilah kombo yang menang (dipastikan 100% dapat direproduksi):
Proyek saya sudah memiliki v7 berikutnya

  1. npm install next@latest -> menginstal v8.0.1 berikutnya tetapi memperingatkan tentang biji
  2. npm run dev -> berjalan berikutnya dan gagal dengan kesalahan yang dijelaskan dalam masalah git ini
  3. npm install acorn
  4. npm run dev -> berjalan berikutnya dan gagal dengan kesalahan yang dijelaskan dalam masalah git ini
  5. npm install next@latest -> tidak ada peringatan
  6. npm run dev berhasil!!! 🎉.

Kesimpulan
Kuncinya adalah menginstal acorn sebelum selanjutnya

Semua 58 komentar

Aku punya masalah yang sama. Tidak dapat memulai mode pengembangan. Saya memperbarui npm ke versi terbaru dan juga mencoba menginstal paket acorn, tetapi tidak membantu.
@timneutkens

Saya memiliki kesalahan berbeda terkait dengan impor yang mungkin memiliki akar penyebab yang sama:

/Users/andrewingram/Repositories/tego/website-next/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";
                                                                      ^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

Semuanya baik-baik saja jika saya menurunkan versi ke [email protected]

@AndrewIngram dapatkah Anda memberikan reproduksi? penasaran untuk melihat yang satu itu. Kedengarannya terkait dengan @babel/runtime, bukan webpack.

Saya menghadapi kesalahan yang sama. Menginstal acorn juga tidak berhasil untuk saya. FYI, saya menggunakan ts-node untuk menjalankan server ekspres saya.

Bagi saya ini diperbaiki dengan memutakhirkan @ babel/core:

-        "@babel/core": "^7.1.0",
+        "@babel/core": "7.2.2",

Untuk beberapa alasan kami memilikinya sebagai ketergantungan langsung saat ini.

Mengalami masalah dan pesan kesalahan yang sama. @babel/core disetel ke "7.2.2" sehingga mungkin bukan itu masalahnya.

Kami juga melihat masalah ini dan mengikuti utas untuk solusinya.

  • Produksi (dengan next build ) dibangun dan berjalan dengan baik.
  • Berjalan dalam mode pengembangan menghasilkan kesalahan yang sama seperti OP.
  • Kami memanggil Next.js secara terprogram (kami menggunakannya dengan Express saat ini).
  • Memperbarui @babel/core ke 7.2.2 tidak menyelesaikan masalah ini untuk kami.

Mengikuti masalah yang ditautkan di utas dan menginstal [email protected] dan @babel/[email protected] karena devDependancy berhasil menyelesaikan ini.

(Ini juga menyelesaikan kesalahan tentang paket Acorn, yang tidak kami miliki sebagai ketergantungan langsung.)

Saya memiliki masalah yang sama, juga setelah memperbarui webpack dan @babel/core . Menghapus package-lock.json dan node_modules saya dan melakukan instalasi baru memecahkan masalah.

Masalah yang sama di sini, sayangnya. Berikut ini replikasi: https://github.com/jescalan/nextjs-test/tree/je.canary

Pembuatan dan ekspor statis bekerja dengan sangat baik, hanya mode dev yang error. Baik babel maupun webpack tidak diinstal sebagai dependensi.

Baru saja diperbaiki dengan menghapus package-lock.json dan membuat ulang. Komit terakhir pada cabang itu menunjukkan pembaruan mana yang dibuat untuk package-lock.json -- semoga ini membantu untuk menemukan penyebabnya!

Menghapus node_modules dan package-lock.json lalu menginstal ulang menyelesaikan ini untuk saya juga.

Menghapus node_modules dan package-lock.json tidak menyelesaikan ini untuk saya, tetapi menginstal [email protected] seperti yang dilakukan oleh ketergantungan dev, seperti yang disarankan @iaincollins .

Juga mengalami masalah ini tetapi di luar paket ini; Menurunkan versi ke versi node yang lebih rendah (v9.11 [versi rekan kerja], menginstal [email protected] dan menginstal ulang node_modules memperbaiki ini untuk saya.

Saya memiliki kesalahan berbeda terkait dengan impor yang mungkin memiliki akar penyebab yang sama:

/Users/andrewingram/Repositories/tego/website-next/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";
                                                                      ^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

Semuanya baik-baik saja jika saya menurunkan versi ke [email protected]

Menghadapi masalah yang sama dengan @AndrewIngram pada proyek yang kompleks. Masalah hanya muncul untuk [email protected] dalam mode dev, bukan saat kompilasi untuk produksi.

Saya mengalami masalah yang sama. Menghapus node_modules dan package-lock.json dan menginstal ulang _did_ memperbaikinya untuk saya. Sangat penting untuk menghapus direktori dan file kunci sebelum menginstal ulang, untuk berjaga-jaga jika itu adalah masalah yang menimpa beberapa orang.

Saya memiliki perilaku yang sama dalam file TypeScript:

error  in ./stores/index.ts

Module parse failed: Export 'IStore' is not defined (77:9)
You may need an appropriate loader to handle this file type.
|   return Store;
| };
> export { IStore, IStoreSnapshotIn, IStoreSnapshotOut };

 @ ./pages/_app.tsx 16:0-37 38:24-32 83:18-26

@icflorescu tidak mungkin menyelesaikan masalah tanpa reproduksi yang jelas. Harap berikan satu sehingga kami dapat menyelidiki lebih lanjut 🙏

@icflorescu bisa buat masalah baru (termasuk reproduksi) karena tidak sama dengan yang ini 🙏

@timneutkens Saya akhirnya menemukan tadi malam bahwa masalah saya disebabkan oleh #6273.
Seperti yang saya sebutkan di utas itu, kesalahan hilang jika saya mengubah preset next/babel saya menjadi ['next/babel', { 'transform-runtime': { useESModules: false } }] .

EDIT: Saya baru saja menerbitkan repo pengujian, lihat diskusi di # 6273.

Dalam kasus saya, instalasi ulang lengkap sederhana dari direktori node_modules memperbaiki masalah ini. Ini mungkin terkait dengan dependensi internal modul dan modul yang tersisa.

Saya memiliki masalah yang sama (Saya juga mendapatkan kesalahan yang sama saat menggunakan impor dinamis, saya menulisnya di Spectrum https://spectrum.chat/users/matthew-rapati?thread=c677c233-8b02-447f-aff0-97b3399a493f).

Saya mencoba menghapus node_modules, package-lock.json dan membersihkan cache npm saya, tetapi tidak menyelesaikan masalah. Jika saya memiliki kesempatan, saya akan mencoba membuat reproduksi kecil dari masalah ini.

Menginstal acorn memperbaiki masalah ini untuk saya. Itu sudah digabungkan di kenari tetapi belum di master. https://github.com/zeit/next.js/pull/6137

Menginstal acorn di Next.js tidak menyelesaikan masalah.

Di tempat saya bekerja, ini memengaruhi kami ketika mencoba meningkatkan ke 8 berikutnya.

Menggunakan Benang untuk menginstal dependensi berhasil bagi saya. Sangat aneh.

Oke, inilah kombo yang menang (dipastikan 100% dapat direproduksi):
Proyek saya sudah memiliki v7 berikutnya

  1. npm install next@latest -> menginstal v8.0.1 berikutnya tetapi memperingatkan tentang biji
  2. npm run dev -> berjalan berikutnya dan gagal dengan kesalahan yang dijelaskan dalam masalah git ini
  3. npm install acorn
  4. npm run dev -> berjalan berikutnya dan gagal dengan kesalahan yang dijelaskan dalam masalah git ini
  5. npm install next@latest -> tidak ada peringatan
  6. npm run dev berhasil!!! 🎉.

Kesimpulan
Kuncinya adalah menginstal acorn sebelum selanjutnya

Jadi apakah itu semacam resolusi ketergantungan? @vasco3 yang memecahkan masalah saya.

Ini terjadi pada saya langsung antara v8.0.0-canary.11 dan v8.0.0-canary.12 https://github.com/zeit/next.js/compare/v8.0.0-canary.11...v8.0.0-canary .12

Menginstal [email protected] dan @babel/[email protected] sebagai devDependencies seperti yang disarankan @iaincollins memperbaiki ini untuk saya juga.

masih hadir dengan 8.0.2 berikutnya. acorn perlu ditingkatkan di package.json, ini memperbaiki masalah

dikonfirmasi: 8.0.3 memperbaiki masalah ini

Masalah menjalankan dev masih ada dengan 8.0.3 berikutnya hingga saya mencoba rekomendasi @ vasco3 dan menginstal selanjutnya SETELAH biji. Aneh...

Menjalankan 8.0.3 tanpa Acorn.

Tampaknya NPM salah melakukan caching berikutnya. Bahkan ketika menghapus folder node_modules saya dan package-lock menjalankan kembali npm i masalah akan tetap ada. Sebenarnya menggunakan NPM CLI untuk mencopot pemasangan berikutnya tampaknya telah menghapusnya dari cache dengan benar dan setelah menginstal ulang tanpa Acorn, ia aktif dan berjalan.

Sama seperti @Soundvessel

Menginstal acorn sebelumnya next@8 memperbaiki masalah.

npm ci
npm i -S acorn<strong i="10">@latest</strong>
npm i -S next<strong i="11">@latest</strong>

@Magellol apakah Anda mencoba menjalankan mode dev hanya setelah npm ci . Jika Anda melihat posting kedua saya, saya dapat menjalankan mode dev dengan 8.0.3 _without_ acorn setelah menggunakan baris perintah npm untuk mencopot pemasangan berikutnya dengan benar karena saya yakin versi cache di luar node_modules menyebabkan masalah. npm ci menjadi instalasi yang bersih mungkin menyelesaikan masalah tanpa harus menginstal/menghapus paket individual.

@Soundvessel Sepertinya tidak berfungsi jika saya tidak menginstal acorn secara eksplisit.
Saya sudah mencoba segala macam kombo dengan npm ci pada tahap yang berbeda.

https://github.com/zeit/next.js/issues/6240#issuecomment -466549203 adalah satu-satunya cara saya bisa membuatnya bekerja. Juga menggunakan yarn memperbaikinya tanpa perlu menambahkan acorn secara eksplisit.

@vasco3 Solusi Anda bekerja untuk saya. Terima kasih. :+1:

Untuk memperjelas saya tidak perlu Acorn untuk menyelesaikan masalah. Coba hapus instalan Berikutnya menggunakan baris perintah alih-alih hanya menghapus node_modules .

npm uninstall --save next
npm install --save next<strong i="7">@latest</strong>

Saya percaya bahwa menggunakan baris perintah untuk menghapus instalan Berikutnya menghilangkan penyebab masalah dari cache NPM di luar node_modules .

Saya juga memperbarui Node dan NPM sebelumnya tetapi itu tidak membantu sampai saya menginstal ulang dengan benar.

Coba hapus direktori .next Anda daripada mengkhawatirkan cache npm.

Saya menyelesaikan masalah:

  • bundleAnalyzer rusak dari impor dinamis
    setelah diperbaiki,
  • file bundel server tertinggal di .next/ menyebabkan import('./noop'); kesalahan meskipun menginstal ulang
  • hapus node_modules dan .next

Menjalankan next build dapat menyebabkan next dev gagal, tetapi berhasil jika Anda tidak menjalankan next build terlebih dahulu:

  • Jika Anda memiliki kesalahan impor dinamis, dan Anda membersihkan proyek, lalu jalankan next dev, Anda tidak akan melihat kesalahan
  • Jika Anda memiliki kesalahan impor dinamis, dan Anda membersihkan proyek, lalu jalankan next build , lalu jalankan next dev, Anda akan melihat kesalahannya

Kesalahan muncul lagi setelah memperbarui beberapa modul lain.

Saya memang menghapus /.next , / node_modules , package-lock.json , dan /npm-cache/ di folder pengguna saya kemudian memutar ulang npm i dan kesalahan tetap ada.

Menyerah dan menambahkan acorn ke dependensi saya untuk mencegah kesalahan.

Mendapatkan versi "iterator" dari kesalahan ini. Tidak satu pun di atas yang membantu:

/Users/username/Sandboxes/mynext/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";

Persyaratan:

1) server.js paling dasar dengan modul ES.

2) .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "next/babel",
  ],
}

3) package.json

{
  "name": "nownext",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.4",
    "acorn": "^6.1.1",
    "express": "^4.16.4",
    "next": "^8.0.3",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "webpack": "4.28.4"
  },
  "scripts": {
    "dev": "babel-node server.js",
  }
}

Dan kemudian

$ babel-node server.js

menghasilkan kesalahan di atas. Jadi itu bahkan bukan impor dinamis, dalam kasus saya modul ES berhenti bekerja dengan NextJS sepenuhnya. @timneutkens Saya dapat mengunggah demo repo jika itu dapat membantu.

@ivan-kleshnin itu masalah lain: #6273 yang diperbaiki pada canary.

Saya mencoba menghapus direktori package-lock.json dan node_modules, tetapi itu tidak berhasil untuk saya. Solusi bagi saya adalah beralih ke benang:

rm package-lock.json
rm -rf node_modules
yarn dev

Kesalahan hilang!

Saya memiliki kesalahan yang sama ketika menjalankan mencoba menjalankan proyek di https://github.com/zeit/next-learn-demo/tree/master/E2-lazy-loading-modules. Setelah melakukan instalasi npm dev dari [email protected] itu mulai bekerja lagi.

@vasco3 Terima kasih banyak! Ini bekerja untuk saya:

npm install acorn
npm run dev // -> runs next and fails with the error described in this git issue
npm install next<strong i="7">@latest</strong> // -> no warnings
npm run dev // it works!!! 🎉

Saya menggunakan Benang untuk menginstal dependensi juga dan berfungsi)

Oke, inilah kombo yang menang (dipastikan 100% dapat direproduksi):
Proyek saya sudah memiliki v7 berikutnya

  • npm install next@latest -> menginstal v8.0.1 berikutnya tetapi memperingatkan tentang biji
  • npm run dev -> berjalan berikutnya dan gagal dengan kesalahan yang dijelaskan dalam masalah git ini
  • npm install acorn
  • npm run dev -> berjalan berikutnya dan gagal dengan kesalahan yang dijelaskan dalam masalah git ini
  • npm install next@latest -> tidak ada peringatan
  • npm run dev berhasil!!! 🎉.

Kesimpulan:
Kuncinya adalah menginstal acorn sebelum selanjutnya

Terima kasih! membuktikan sekali lagi bahwa keteraturan itu penting! menyelamatkan saya.

Oke, inilah kombo yang menang (dipastikan 100% dapat direproduksi):
Proyek saya sudah memiliki v7 berikutnya

  • npm install next@latest -> menginstal v8.0.1 berikutnya tetapi memperingatkan tentang biji
  • npm run dev -> berjalan berikutnya dan gagal dengan kesalahan yang dijelaskan dalam masalah git ini
  • npm install acorn
  • npm run dev -> berjalan berikutnya dan gagal dengan kesalahan yang dijelaskan dalam masalah git ini
  • npm install next@latest -> tidak ada peringatan
  • npm run dev berhasil!!! tada

Kesimpulan:
Kuncinya adalah menginstal acorn sebelum selanjutnya

Ini memperbaiki masalah saya juga, terima kasih! :tepuk:

Oke, inilah kombo yang menang (dipastikan 100% dapat direproduksi):
Proyek saya sudah memiliki v7 berikutnya

* `npm install next@latest` -> installs next v8.0.1 but warns about acorn

* `npm run dev` -> runs next and fails with the error described in this git issue

* `npm install acorn`

* `npm run dev` -> runs next and fails with the error described in this git issue

* `npm install next@latest` -> no warnings

* `npm run dev` it works!!! 🎉

Kesimpulan:
Kuncinya adalah menginstal acorn sebelum selanjutnya

Terima kasih banyak, ini memperbaiki masalah. 👏👏.

Apakah ini akan diperbaiki di cabang kenari dalam waktu dekat?

@TidyIQ kami akan mencoba memperbaikinya segera! Penting untuk dicatat bahwa ini adalah bug npm .

@Timer webpack sudah memperbaiki masalah ini, lihat https://github.com/webpack/webpack/pull/9370

Ini sepertinya tidak memperbaiki masalah bagi saya. Berurusan dengan basis kode yang lebih lama yang belum dapat meningkatkan ke fitur baru, dan saya masih membutuhkan server yang diubah.

Saya telah melakukan langkah-langkah di atas, dan mereka tidak menyelesaikan masalah. Saya bahkan tidak menggunakan impor dinamis :/

Compiling client app. 
Compiling server app. 
[ error ] ./node_modules/next/dist/client/next-dev.js 23:6
Module parse failed: Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
| 
| 
> import('./dev/noop'); // Support EventSource on Internet Explorer 11
| 
| if (!window.EventSource) {
[ wait ]  compiling ...
[ error ] ./node_modules/next/dist/client/next-dev.js 23:6
Module parse failed: Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
| 
| 
> import('./dev/noop'); // Support EventSource on Internet Explorer 11
| 
| if (!window.EventSource) {
2019-07-13T08:07:59.942Z app:server:log Connected to redis
2019-07-13T08:07:59.947Z app:server:log > Ready on http://localhost:3000

Saya mungkin telah memecahkan masalah di atas ini dengan rm-ing node-modules dan menginstal ulang, tetapi mungkin tidak menginstal ulang semuanya, mungkin ada paket khusus yang menyebabkan ini

Langkah resolusi terakhir adalah rm package-lock.json dan rm -rf node_modules , lalu instal ulang.

Penting untuk dicatat bahwa ini hanya diperbaiki di Next 9 .

@Timer Saya menjalankan [email protected] dan masih mengalami masalah. Saya sudah mencoba:
1) menghapus berikutnya, menambahkan biji dengan yarn add acorn dan kemudian menjalankan yarn next@latest tetapi tidak berhasil
2) menghapus semua node_modules dan yarn.lock dan menginstal ulang. Adakah orang lain yang masih melihat masalah ini? Saya baru mulai mengalaminya dengan react-datepicker

@ Sm00g15 itu cukup sulit untuk membantu Anda ketika reproduksi tidak disediakan. Mungkin Anda menginstal webpack secara manual?

Saya memiliki masalah yang sama, juga setelah memperbarui webpack dan @babel/core . Menghapus package-lock.json dan node_modules saya dan melakukan instalasi baru memecahkan masalah.

Terima kasih, solusi ini memecahkan masalah bagi saya. Saya telah mengerjakan proyek Node.js lain (bukan Next.js) tempat saya memutakhirkan versi Node saya ke yang terbaru - ini tampaknya menjadi penyebab masalah. Dimana solusi untuk menghapus lock.json dan node_modules, kemudian menginstal ulang paket-paket bekerja dengan sempurna. Terima kasih.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat