Next.js: Tidak dapat menavigasi dalam pengembangan (Router hang setelah beberapa waktu)

Dibuat pada 5 Nov 2018  ·  50Komentar  ·  Sumber: vercel/next.js

Laporan bug

Jelaskan bugnya

Entah Link atau Router berhenti bekerja saat melakukan perutean sisi klien. Tampaknya HMR mungkin mengganggu transisi antar halaman. Ini paling sering terjadi jika aplikasi dibiarkan menganggur atau di latar belakang untuk sedikit waktu (meskipun saya pernah mengalaminya terjadi saat mengklik tanpa menganggur)

Untuk Mereproduksi

Langkah-langkah untuk mereproduksi perilaku, berikan cuplikan kode atau repositori:

  1. Clone repo ini (https://github.com/malimccalla/next-routing-issue)
  2. Instal dependensi npm install
  3. Jalankan server npm run dev
  4. Kunjungi semua halaman dengan mengklik link
  5. Pergi membuat kopi (biarkan halaman menganggur selama ~ 2 menit)
  6. Coba kunjungi semua halaman dengan mengklik link
  7. Tautan tertentu tidak mengarah ke halaman masing-masing 😔

Perilaku yang diharapkan

Saya berharap dapat mengunjungi semua halaman individual

Perilaku sebenarnya

Halaman tidak menavigasi ke rute tertentu. Menyegarkan halaman akan memperbaikinya

Screenshot

Baik tautan "tentang" dan "kontak" tidak berfungsi (perhatikan log HMR pada upaya pertama setiap rute). Setelah halaman disegarkan, mereka berfungsi seperti yang diharapkan. Jika saya membiarkan aplikasi menganggur selama kira-kira 2 menit lagi itu akan memulai kembali dengan masalah

next-issue

Sistem Informasi

  • mac Mojave 10.14.0
  • Chrome
  • next.js v7.0.2

Konteks tambahan

Dengan konsol terbuka Anda dapat melihat bahwa peristiwa Router routeChangeStart menyala tetapi routeChangeComplete tidak pernah terjadi.

bug p1

Komentar yang paling membantu

Saya sedang menyelidiki masalah ini sekarang.

Semua 50 komentar

Saya memiliki masalah yang sama

Saya juga melihat ini di lingkungan produksi, jadi saya tidak yakin HMR adalah satu-satunya yang bertanggung jawab atas masalah tersebut

@ernerock Saya menerapkan contoh di atas di

@malimccalla Sepertinya masalah saya berbeda dari masalah Anda, namun perilaku navigasinya sama. Saat halaman yang saya buka memiliki impor css

import 'react-alice-carousel/lib/alice-carousel.css';

perilaku navigasi sama seperti yang Anda laporkan. Sepertinya ada masalah dengan '@ zeit / next-css'

Tampaknya sudah dilaporkan di # 5291, dapat 'diselesaikan' sementara dengan mengimpor dan mengosongkan file css di _app.js

@ernerock Sangat aneh, mereka mungkin terkait dalam beberapa hal!

Masalah yang sama di sini, saya memiliki halaman yang diatur sebagai / home dan / home / subpage, lalu jika saya mencoba menavigasi dari / home ke / home / subpage dengan Router.push, atau withRouter HOC atau bahkan Link itu tidak berfungsi.

Oke sekarang saya punya info lagi, saya mencoba mengganti nama / home menjadi / home / welcome dan kasus yang dijelaskan di atas masih tidak berfungsi untuk saya

@ maciej-ka Ah ya saya bisa pastikan itu juga terjadi dengan push bukan hanya Link . Akan mengubah judul, karena agak menyesatkan.

@timneutkens Maaf kepada @ Anda. Saya tahu ada banyak masalah lain, tetapi adakah kemungkinan kita dapat memperhatikan hal ini? Saya telah mencoba untuk memahaminya selama seminggu sekarang tanpa hasil dan itu benar-benar menghalangi perkembangan

Ini kemungkinan besar terkait dengan entri sesuai permintaan dan pembuangannya

Saya melakukan sedikit penggalian dan tampaknya itu terjadi karena halaman-halamannya sedang dibuang. Segera setelah log ini muncul, halaman yang dibuang tidak dapat lagi dinavigasi

> Disposing inactive page(s): /

Saya punya sedikit waktu malam ini untuk menyelam lebih dalam dan semoga bisa mendapatkan PR terbuka untuk memperbaikinya. @timneutkens Terima kasih atas pemahaman awal, beri tahu saya jika menurut Anda ada bagian dari file yang harus saya lihat secara khusus

Saya memang telah mencoba untuk memperbaiki ini tetapi ada banyak hal yang terjadi di file terkait dan sayangnya saya tidak bisa sampai ke bagian bawahnya. Bagi siapa pun yang mengalami masalah ini, sebagai solusi saat ini saya menggunakan konfigurasi ini di next.config.js untuk memperpanjang durasi sebelum halaman dibuang.

  onDemandEntries: {
    // period (in ms) where the server will keep pages in the buffer
    maxInactiveAge: 25 * 1000,
    // number of pages that should be kept simultaneously without being disposed
    pagesBufferLength: 5,
  },

Saya memiliki masalah ini juga.

Apakah ada yang menyelidiki ini? Saya juga memiliki masalah ini tetapi belum tentu ke semua rute. Ini acak rute / rute mana yang menjadi tidak responsif tetapi pada akhirnya semuanya melakukannya.

Saya tidak dapat memeriksanya sekarang karena saya berfokus pada masalah server berikutnya / lambda, tetapi kemungkinan besar terkait dengan entri sesuai permintaan.

Yup, itu pasti. Terjadi setelah dibuang.

Sama denganku.

Dapatkah seseorang mengonfirmasi kepada saya bahwa ini bukan masalah dalam produksi?

Dapatkah seseorang mengonfirmasi kepada saya bahwa ini bukan masalah dalam produksi?

Dalam mode produksi tidak apa-apa, setelah saya mengubah ENV menjadi produksi, semuanya berjalan baik

Saya memiliki ini dalam pengembangan dan produksi. Tidak masalah jika halaman tidak aktif, dll. Saya dapat memiliki pemuatan baru dan tidak akan berfungsi. Di dev, konsol server
> Building page: /contact
WAIT Compling...
success client complied in 462ms
tetapi laman tidak pernah ditampilkan di klien. Pada saat yang sama, di konsol klien:
[HMR] bundle rebuilding pesan, kemudian konsol server memberikan:
Disposing of inactive page(s): /, /contact

Jika saya mengetik mysite.com/contact ke dalam browser, itu akan dimuat dengan baik.
Saya sudah mencoba pekerjaan sekitar next.config.js dari maxInactiveAge dan pagesBufferLength tidak berhasil.

[berharap itu hanya dalam dev seperti yang dikatakan banyak orang]

EDIT: Saya memang memiliki import 'node-mod/dist/theme.css dalam sebuah komponen. Saya memindahkan impor itu ke _app.js dan Link itu berfungsi.

Masalah yang sama di sini, rute tidak selesai dalam mode pengembang setelah dibuang. Ini sangat mengganggu.

@roytsang Alih-alih mengatakan "masalah yang sama", gunakan 👍 tentang masalah tersebut. Manual Anda +1 tidak diperhitungkan saat menyortir 👍

Saya memiliki masalah yang sama. Ini hanya dimulai hari ini setelah saya mulai menggunakan Head from next / head di _app saya untuk menerapkan judul dan favicon.

@ Atmosfir sudahkah Anda mencoba solusi solusi @malimccalla ? Itu bukan perbaikan total tetapi bekerja untuk saya sebagai solusi.

Saya belum sempat melakukannya, tapi saya akan segera. Saya hanya berpikir informasi lebih lanjut tentang kapan masalah muncul bagi saya mungkin berguna bagi seseorang yang ingin memperbaikinya.

Pembaruan: Saya telah melakukan beberapa pengujian pagi ini dan inilah yang saya temukan.

Masalah dimulai kemarin, satu-satunya hal baru yang saya terapkan adalah Kepala dari depan. Saya menyadari bahwa saya mengubah head di _document, yang digunakan untuk memuat gaya, menjadi Head. Saya juga menambahkan Head to _app.js untuk mengatur judul dan favicon. Menghapus Head di _app.js tidak memperbaiki ini untuk saya. Menghapus Head di _app dan _document juga tidak menyelesaikan masalah. Saya mencoba satu hal terakhir, saya mengembalikan Head di _document kembali ke kepala dan meninggalkan Head di _app untuk menetapkan judul dan favicon, dan sekarang masalahnya hilang.

Jika karena alasan apa pun masalah kembali, saya akan memperbarui di sini lagi. Saya harap info ini dapat membantu memperbaiki.

Pembaruan 2: Masalah tetap ada, meskipun lebih jarang muncul daripada sebelumnya. Saya perhatikan bahwa ketika itu terjadi, saya melihat tag skrip yang memuat js untuk halaman itu diduplikasi. Misalnya, pertama kali saya memuat halaman "x" itu menambahkan

Apakah mungkin untuk memberi tahu kami apa masalahnya dan bagaimana kami dapat mengatasi masalah tersebut jika kami tidak dapat meningkatkan sekarang? Misalnya, apakah ini ada hubungannya dengan pemuatan css? Apakah itu sesuatu yang dapat diubah dalam konfigurasi?

@ jon64digital Saya menulis artikel lengkap tentang masalah ini di # 5994, Anda dapat mengatasinya dengan menaikkan batas waktu pembuangan.

@timneutkens Saya menggunakan 8.1.1-canary.24 dan bug masih ada untuk saya. Ada ide?

Edit: temukan apa yang terjadi. Tidak yakin mengapa ...:
Saya memiliki file index.tsx dan index.less. Saya menggunakan cssModules di file netxt.config.js saya (menggunakan withLess). Saat memuat /subpage dan memiliki tautan yang mereferensikan / (yang mengimpor gaya seperti ini: import css from './index.less'; ) maka skrip akan dimuat secara dinamis ( http://localhost:3000/_next/static/development/pages/index.js ) tetapi tidak diberikan. Nyatanya url tidak berubah sama sekali, itu seperti macet ... Menghapus lebih sedikit impor file menyelesaikan masalah.

Apa yang dilakukan?

Edit2: Sepertinya saya mengalami https://github.com/zeit/next-plugins/issues/282

Saya masih mendapatkan ini terjadi beberapa kali juga pada 8.1.0 . Saya akan mencoba mereproduksi dan membuka terbitan baru

bagi saya juga tidak menavigasi ke / tentang rute memberikan 404 setiap waktu! tidak yakin apa masalahnya dengan perutean !? : /

dependensi package.json:

"dependencies": { "cross-env": "^5.2.0", "express": "^4.17.0", "next": "^8.1.0", "react": "^16.8.6", "react-dom": "^16.8.6" }

@jsbimra harap selalu berikan reproduksi lengkap. Tidak mungkin melihat "terjadi pada saya"

@jsbimra mohon _selalu_ berikan reproduksi lengkap. Tidak mungkin melihat "terjadi pada saya"

menemukan masalah, itu terkait dengan langkah yang hilang dalam membuat halaman di bawah folder halaman next.js, maaf mengganggu @timneutkens

ada solusi untuk ini? apakah ini juga terjadi dalam produksi? karena di dev itu terjadi pada saya, bug itu dari 2018 dan Mei / 22/2019 masih bug ini belum diperbaiki, jika ini tidak terjadi dalam produksi saya tidak terlalu khawatir, tetapi jika itu terjadi maka ini adalah masalah yang sangat besar ...

bug itu dari 2018 dan Mei / 22/2019 masih bug ini belum diperbaiki

Berdasarkan reproduksi yang diberikan oleh @malimccalla itu sudah diperbaiki.

jika ini tidak terjadi dalam produksi, saya tidak terlalu khawatir

Tidak.

Perhatikan bahwa komentar ini tidak akan menyelesaikan masalah Anda. Seperti yang dikatakan berkali-kali sebelumnya:

harap selalu berikan reproduksi lengkap. Tidak mungkin melihat "terjadi pada saya"

Saya memiliki masalah yang sama dengan versi terbaru (8.1.0).

Saya memiliki masalah yang sama dengan versi terbaru (8.1.0).

Saya sekarang telah membalas sekitar 3 kali dengan pesan yang sama persis. Harap berikan reproduksi .

Perhatikan bahwa komentar ini tidak akan menyelesaikan masalah Anda. Seperti yang dikatakan berkali-kali sebelumnya:

harap selalu berikan reproduksi lengkap. Tidak mungkin melihat "terjadi pada saya"

Saya bermasalah dengan masalah tidak dapat mengakses ~ / index.tsx .
Tapi akhirnya saya menemukan penyebabnya!

Saya menggunakan perpustakaan bernama react-activity , tetapi pada saat yang sama saya perlu mengimpor css.

Saat saya membaca css yang sama dua kali di tempat yang berbeda, sepertinya saya tidak bisa bermigrasi.
Sebagai hasil dari membaca di _app.tsx , saya berhasil bermigrasi.

@timneutkens oke, tentu, saya dapat menambah waktu pembuangan, tetapi bagaimana dengan situasi di mana server dimulai untuk pertama kalinya? Saya tidak dapat menavigasi ke halaman tersebut secara terprogram karena belum dibuat. 🤔

Sekarang saya telah membalas sekitar 4 kali dengan pesan yang sama persis. Harap berikan reproduksi .

Perhatikan bahwa komentar ini tidak akan menyelesaikan masalah Anda. Seperti yang dikatakan berkali-kali sebelumnya:

harap selalu berikan reproduksi lengkap. Tidak mungkin melihat "terjadi pada saya"

Untuk menjawab pertanyaan spesifik, halaman dibuat sesuai permintaan, dan sistem ini berfungsi dengan baik. Saya berasumsi Anda memiliki sesuatu dalam konfigurasi Anda yang membuat webpack tidak memicu file sebagai selesai dibangun. Namun sulit / tidak mungkin untuk mengatakannya karena tidak ada reproduksi.

Perhatikan juga bahwa masalah khusus, seperti yang disebutkan sebelumnya, telah diperbaiki dan bahwa menambah waktu tunggu tidak membantu untuk masalah khusus yang Anda alami. Karena itu mengapa saya terus meminta reproduksi 🙏.

Kami sangat senang melihat ini dan menghabiskan waktu untuk itu.

Saya membuat proyek baru kemarin dan bekerja dengan baik. Pasti ada sesuatu yang spesifik tentang proyek saya yang membuatnya tidak berhasil. Saya akan mencoba untuk membongkar secara bertahap hari ini dan melihat pada titik mana masalah tersebut menghilang.

Saya ingin melihat apakah Anda dapat mereproduksinya dengan andal.

Kabar baiknya adalah saya bisa menemukan kesalahannya. Kabar buruknya adalah bahwa masalah dengan proyek saya tidak berbeda dengan apa yang dilaporkan orang lain, di utas ini.

Jadi jika masalahnya ada pada CSS dan batas pembuangan, dan seharusnya sudah diselesaikan, saya pasti melakukan sesuatu yang salah. Apakah ini tempat Anda meletakkan ini?

module.exports = withCSS({ onDemandEntries: { maxInactiveAge: 1000 * 60 * 60 } })

Reproduksi: https://github.com/dydokamil/next-js-router-bug

@tokopedia
Itu bug yang dikenal: https://github.com/zeit/next-plugins/issues/282
Anda dapat "menyelesaikannya" dengan mengimpor file CSS kosong.

Saya bisa mendapatkan ini untuk mereproduksi secara andal di seluruh mode dev, produksi dan ekspor-statis dan tidak ada onDemandEntries atau solusi file css kosong yang membantu.

Satu-satunya cara untuk memperbaiki masalah ini adalah dengan menghapus import 'highlight.js/styles/color-brewer.css'; dari komponen Body pada halaman posting blog saya.

Setiap instance <Link> yang mengarah ke halaman posting blog akan gagal dimuat tetapi http://localhost:3000/_next/static/development/pages/post.js masih akan dijatuhkan ke halaman pada <Link> klik. Beri komentar bahwa impor css, <Link> s agar posting blog berfungsi dengan baik. Batalkan komentar dan semua <Link> s gagal memuat postingan blog.

Menekan salah satu rute halaman posting blog tersebut secara langsung berfungsi dengan baik, bug hanya terkait dengan sisi klien perutean berbasis. Ini terjadi setelah meningkatkan dari versi 6 ke versi 8.

Saya awalnya menekan ini dengan @zeit/next-css tetapi saya dapat mereplikasi masalah ini dengan cara yang sama setelah menukar @zeit/next-sass dan mengimpor file .scss. Untuk saat ini saya hanya gunna memuat gaya ini menggunakan styled-components drop @zeit/next-css . Setelah meninjau https://www.npmjs.com/package/@zeit/next -css dan https://www.npmjs.com/package/@zeit/next -sass, sepertinya contoh Penggunaan tersebut akan rusak 🤔

Bisakah Anda menambahkan repositori reproduksi ke https://github.com/zeit/next-plugins/issues/282

Apa yang Anda gambarkan terdengar persis seperti masalah itu.

Saya bisa mendapatkan ini untuk mereproduksi secara andal di seluruh mode dev, produksi dan ekspor-statis dan tidak ada onDemandEntries atau solusi file css kosong yang membantu.

Satu-satunya cara untuk memperbaiki masalah ini adalah dengan menghapus import 'highlight.js/styles/color-brewer.css'; dari komponen Body pada halaman posting blog saya.

Setiap instance <Link> yang mengarah ke halaman posting blog akan gagal dimuat tetapi http://localhost:3000/_next/static/development/pages/post.js masih akan dijatuhkan ke halaman pada <Link> klik. Beri komentar bahwa impor css, <Link> s agar posting blog berfungsi dengan baik. Batalkan komentar dan semua <Link> s gagal memuat postingan blog.

Menekan salah satu rute halaman posting blog tersebut secara langsung berfungsi dengan baik, bug hanya terkait dengan perutean berbasis sisi klien. Ini terjadi setelah meningkatkan dari versi 6 ke versi 8.

Saya awalnya menekan ini dengan @zeit/next-css tetapi saya dapat mereplikasi masalah ini dengan cara yang sama setelah menukar @zeit/next-sass dan mengimpor file .scss. Untuk saat ini saya hanya gunna memuat gaya ini menggunakan styled-components drop @zeit/next-css . Setelah meninjau https://www.npmjs.com/package/@zeit/next -css dan https://www.npmjs.com/package/@zeit/next -sass, sepertinya contoh Penggunaan tersebut akan rusak 🤔

Setelah menambahkan paket / css berikutnya, saya dapat mengonfirmasi bahwa ini juga terjadi pada saya.

Hal yang sama terjadi pada saya dalam pengembangan (produksi berfungsi seperti yang diharapkan), dan masalahnya adalah ketika kami menautkan ke halaman (atau memiliki komponen di dalamnya) yang mengimpor file sass.

File next.config.js :

const withSass = require('@zeit/next-sass');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

require('dotenv').config();

module.exports = withBundleAnalyzer(
  withSass({
    distDir: '../dist',
    env: {...},
  }),
);

Jadi, salah satu komponen secara mendalam memiliki impor ini:

// MIGRATE: PriceDetail to styled components
import './PriceDetail.scss';

Ketika saya mengomentari impor, tautan mulai bekerja. Jadi sepertinya ada masalah dengan plugin withSass .

Saya memiliki masalah serupa tetapi tidak sama. Sayangnya saya mendapatkan kesalahan yang sama
dalam produksi juga. Tetapi karena beberapa alasan tautan terkadang berfungsi.

Saya mengalami masalah yang sama dengan 9.4 berikutnya
Saya menambahkan CodeMirror kemarin ke proyek saya dan juga
import "codemirror/lib/codemirror.css"

Saya memiliki sesuatu seperti pages / page2.js yang melakukan beberapa hal kemudian memanggil router.replace("/") pada akhirnya dan tiba-tiba berhenti melakukan apapun.
Menjalankan router.replace("/") di debugger menunjukkan janji yang tidak pernah menyelesaikan atau mencapai catch atau finally blok.

Juga mungkin perlu diperhatikan adalah bahwa saya memiliki next-css di next.config.js saya - Saya akan mencoba untuk menghapusnya dan melihat apakah itu berdampak.

Sepertinya mungkin ada perbaikan panas di sini? =)

Aha, itu memperbaiki hal-hal untuk saya - saya jelas juga harus memindahkan impor saya ke file shell _app.js juga.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat