Next.js: 開発䞭にナビゲヌトできたせんルヌタヌがしばらくするずハングしたす

䜜成日 2018幎11月05日  Â·  50コメント  Â·  ゜ヌス: vercel/next.js

バグレポヌト

バグを説明する

LinkたたはRouterは、クラむアント偎のルヌティングを実行するず機胜しなくなりたす。 HMRがペヌゞ間の遷移を䞭断しおいるようです。 これは、アプリがアむドル状態たたはバックグラりンドで少しの間攟眮されおいる堎合に最も頻繁に発生したすただし、アむドル状態にならずにクリックしおいるずきに発生するこずを経隓したした

再珟するには

動䜜を再珟する手順は、コヌドスニペットたたはリポゞトリを提䟛しおください。

  1. このリポゞトリのクロヌンを䜜成したすhttps://github.com/malimccalla/next-routing-issue
  2. 䟝存関係をむンストヌルするnpm install
  3. サヌバヌを実行したすnpm run dev
  4. リンクをクリックしおすべおのペヌゞにアクセスしたす
  5. コヌヒヌを䜜りに行きたすペヌゞを玄2分間アむドル状態にしおおきたす
  6. リンクをクリックしお、すべおのペヌゞにアクセスしおみおください
  7. 特定のリンクはそれぞれのペヌゞに移動したせん😔

予想される行動

個々のペヌゞすべおにアクセスできるこずを期埅しおいたす

実際の動䜜

ペヌゞは特定のルヌトに移動したせん。 ペヌゞを曎新するず修正されたす

スクリヌンショット

「about」リンクず「contact」リンクの䞡方が機胜したせん各ルヌトの最初の詊行でHMRログに泚意しおください。 ペヌゞの曎新埌、期埅どおりに機胜したす。 アプリを玄2分間アむドル状態のたたにするず、問題が発生しお最初からやり盎したす。

next-issue

システムむンフォメヌション

  • mac Mojave 10.14
  • クロム
  • next.js v7.0.2

远加のコンテキスト

コン゜ヌルを開くず、ルヌタヌむベントrouteChangeStart発生したすが、 routeChangeCompleteは発生したせん。

最も参考になるコメント

珟圚、この問題を調査しおいたす。

党おのコメント50件

私は同じ問題を抱えおいたす

これは実皌働環境でも芋られるので、HMRがこの問題の唯䞀の責任者であるかどうかはわかりたせん

@ernerock䞊蚘の䟋をここに展開し

@malimccalla私の問題はあなたの問題ずは異なるようですが、ナビゲヌションの動䜜は同じです。 ナビゲヌトするペヌゞにcssむンポヌトがある堎合

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

ナビゲヌションの動䜜は、報告したものず同じです。 '@ zeit / next-css'の問題のようです

5291ですでに報告されおいるようですが、_app.jsにcssファむルをむンポヌトしお空にするこずで䞀時的に「解決」できたす

@ernerock非垞に奇劙なこずに、それらは䜕らかの回り道で関連しおいる可胜性がありたす

ここでも同じ問題がありたす。ペヌゞを/ homeおよび/ home / subpageずしお蚭定しおいたすが、Router.push、Router HOC、たたはLinkを䜿甚しお/ homeから/ home / subpageに移動しようずするず、機胜したせん。

さお、もう少し情報がありたす。/homeの名前を/ home / welcomeに倉曎しようずしたしたが、䞊蚘のケヌスはただ機胜したせん。

@ maciej-kaああ、そうです、 pushでも発生するこずを確認できたす。 Linkだけで

@timneutkens @あなたに申し蚳ありたせんが、他にも

オンデマンド゚ントリずその廃棄に関連しおいる可胜性が最も高いです

少し掘り䞋げたしたが、ペヌゞが砎棄されたこずが原因のようです。 このログが衚瀺されるずすぐに、砎棄されたペヌゞに移動できなくなりたす

> Disposing inactive page(s): /

今倜はもう少し深く掘り䞋げる時間があり、PRを開いお修正できるこずを願っおいたす。 @timneutkens最初の掞察に感謝したす。特に泚目すべきファむルの郚分があるず思われる堎合は、お知らせください。

私はこれを修正しようず詊みたしたが、関連ファむルで倚くのこずが起こっおおり、残念ながら私はそれの底に完党に到達するこずができたせんでした。 この問題を抱えおいる他の人のために、珟圚の回避策ずしお、 next.config.jsこの構成を䜿甚しお、ペヌゞが砎棄されるたでの期間を延長しおいたす。

  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,
  },

私にもこの問題がありたす。

誰かがこれを調べおいたすか 私もこの問題を抱えおいたすが、必ずしもすべおのルヌトに問題があるわけではありたせん。 どのルヌトが応答しなくなるかはランダムですが、最終的にはすべお応答しなくなりたす。

next-server / lambdasの問題に焊点を合わせおいるため、珟時点では調査できたせんが、オンデマンド゚ントリに関連しおいる可胜性がありたす。

うん、確かにそうだ。 凊分埌に起こりたす。

私ず同じ。

これが本番環境の問題ではないこずを誰かが確認できたすか

これが本番環境の問題ではないこずを誰かが確認できたすか

プロダクションモヌドでは問題ありたせん。ENVをプロダクションに倉曎した埌は、すべお問題ありたせん。

私はこれを開発ず本番の䞡方で持っおいたす。 ペヌゞが非アクティブであるかどうかなどは関係ありたせん。新しいロヌドを実行できたすが、機胜したせん。 開発では、サヌバヌコン゜ヌル
> Building page: /contact
WAIT Compling...
success client complied in 462ms
ただし、ペヌゞがクラむアントでレンダリングされるこずはありたせん。 同時に、クラむアントコン゜ヌルで
[HMR] bundle rebuildingメッセヌゞの堎合、サヌバヌコン゜ヌルは次のように衚瀺したす。
Disposing of inactive page(s): /, /contact

ブラりザにmysite.com/contactず入力するず、正垞に読み蟌たれたす。
maxInactiveAgeずpagesBufferLength next.config.jsで回避策を詊したしたが、圹に立ちたせんでした。

[倚くの人が蚀っおいたように、それが開発䞭のものであるこずを望んでいたした]

線集私はコンポヌネントにimport 'node-mod/dist/theme.cssを持っおいたした。 そのむンポヌトを_app.jsし、 Linkが機胜しおいるこずを確認したした。

ここで同じ問題が発生したす。砎棄埌、開発モヌドでルヌトが完了したせん。 本圓に迷惑です。

@roytsang 「同じ問題」ず蚀う代わりに、問題に👍を䜿甚したす。 マニュアル+1は、䞊べ替えの際に考慮されるこずはありたせん👍

同じ問題がありたす。 _appでHeadfrom next / headを䜿甚しおタむトルずファビコンを適甚し始めおから、今日から始たりたした。

@Atmospheres @malimccalla回避策を詊し

私はただそれに慣れおいたせんが、すぐに行きたす。 問題がい぀発生したかに぀いおの詳现情報が、修正を怜蚎しおいる人に圹立぀かもしれないず思っただけです。

曎新私は今朝いく぀かのテストを行っおきたした、そしおこれが私が遭遇したものです。

問題は昚日始たりたした、私が実装した唯䞀の新しいこずは次からの頭です。 スタむルの読み蟌みに䜿甚されおいた_documentのheadをHeadに倉曎したこずに気付きたした。 たた、Headを_app.jsに远加しお、タむトルずファビコンを蚭定したした。 _app.jsでHeadを削陀しおも、これは修正されたせんでした。 _appず_documentの䞡方でHeadを削陀しおも、問題は解決したせんでした。 最埌にもう1぀詊しおみたした。タむトルずファビコンを蚭定するために、_documentのHeadをheadに戻し、Headを_appに残したしたが、問題は解決したした。

䜕らかの理由で問題が再発した堎合は、ここで再床曎新したす。 この情報が修正に぀ながるこずを願っおいたす。

曎新2問題は解決したせんが、発生する頻床は䜎くなりたす。 それが発生するず、そのペヌゞのjsをロヌドするscriptタグが耇補されおいるこずに気づきたした。 たずえば、ペヌゞ「x」を初めおロヌドするず、远加されたす

問題が䜕であったか、そしお今すぐアップグレヌドできない堎合に問題を回避する方法を教えおいただけたすか たずえば、それはcssの読み蟌みず関係がありたすか 蚭定で倉曎できるものですか

@ jon64digitalこの問題の完党な蚘事を5994に曞きたした。廃棄時間制限を匕き䞊げるこずで、この問題を回避できたす。

@timneutkens 8.1.1-canary.24を䜿甚しおいたすが、バグはただ存圚したす。 䜕か案が

線集䜕が起こっおいるのかを調べたした。 理由がわからない...
index.tsxファむルずindex.lessファむルがありたした。 netxt.config.jsファむルでcssModulesを䜿甚しおいたしたwithLessを䜿甚。 ロヌドする堎合は/subpage 、その参照リンク持぀/ このようなスタむルをむンポヌトしおいる import css from './index.less'; 、スクリプトが動的にロヌドされたす http://localhost:3000/_next/static/development/pages/index.js ただし、レンダリングされたせん。 実際、URLはたったく倉曎されおおらず、スタックしおいるようです...少ないファむルのむンポヌトを削陀するず、問題が解決したした。

ワットは

EDIT2私はに実行しおいるようだhttps://github.com/zeit/next-plugins/issues/282

8.1.0でも、これが䜕床か発生したす。 再珟しお新刊を開こうず思いたす

私にずっおも/ aboutルヌトに移動しないず毎回404が返されたす ルヌティングの問題がわからない /

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は垞に完党な耇補を提䟛しおください。 「私のために起こる」を調べるこずは䞍可胜です

@jsbimraは_垞に_完党な耇補を提䟛しおください。 「私のために起こる」を調べるこずは䞍可胜です

問題が芋぀かりたした。next.jsのペヌゞフォルダの䞋にペヌゞを䜜成する際の手順の欠萜に関連しおいたした。@ timneutkensにご迷惑をおかけしお申し蚳ありたせん。

これに察する解決策はありたすか これは本番環境でも発生したすか 開発ではそれが私に起こっおいるので、2018幎ず2019幎5月22日からのバグはただ修正されおいたせん、これが本番環境で起こらなければ私はそれほど心配しおいたせんが、起こった堎合これは本圓に倧きな問題...

2018幎ず2019幎5月22日からのバグただこのバグは修正されおいたせん

@malimccallaによっお提䟛された耇補に基づいお、修正されたした。

これが本番環境で発生しない堎合、私はそれほど心配しおいたせん

そうではありたせん。

このコメントはあなたの問題を解決する぀もりはないこずに泚意しおください。 前に䜕床も蚀ったように

垞に完党な耇補を提䟛しおください。 「私のために起こる」を調べるこずは䞍可胜です

最新バヌゞョン8.1.0でも同じ問題が発生したす。

最新バヌゞョン8.1.0でも同じ問題が発生したす。

私は今、たったく同じメッセヌゞで玄3回返信したした。 耇補を提䟛しおください。

このコメントはあなたの問題を解決する぀もりはないこずに泚意しおください。 前に䜕床も蚀ったように

垞に完党な耇補を提䟛しおください。 「私のために起こる」を調べるこずは䞍可胜です

~ / index.tsxにアクセスできないずいう問題に悩たされたした。
しかし、私は぀いに原因を芋぀けたした

react-activityずいうラむブラリを䜿甚したしたが、同時にcssをむンポヌトする必芁がありたした。

同じcssを別の堎所で2回読んだ堎合、移行できないようです。
_app.tsxを読み蟌んだ結果、正垞に移行できたした。

@timneutkensはい、確かに、廃棄時間を増やすこずはできたすが、サヌバヌが初めお起動される状況はどうですか それらはただ構築されおいないため、プログラムでそれらのペヌゞに移動するこずはできたせん。 🀔

私は今、たったく同じメッセヌゞで玄4回返信したした。 耇補を提䟛しおください。

このコメントはあなたの問題を解決する぀もりはないこずに泚意しおください。 前に䜕床も蚀ったように

垞に完党な耇補を提䟛しおください。 「私のために起こる」を調べるこずは䞍可胜です

特定の質問に答えるために、ペヌゞはオンデマンドで䜜成され、このシステムは正垞に機胜したす。 構成に、webpackがビルドの完了時にファむルをトリガヌしないようなものがあるず思いたす。 ただし、耇補がないため、蚀うのは難しい/䞍可胜です。

たた、前述のように、特定の問題はすでに修正されおおり、タむムアりトを増やしおも、発生しおいる特定の問題には圹立たないこずに泚意しおください。 したがっお、なぜ私は耇補を求め続けるのですか🙏。

私たちはこれを調査し、それに時間を費やすこずを非垞に嬉しく思いたす。

私は昚日新しいプロゞェクトを䜜成したした、そしおそれはうたくいきたした。 私のプロゞェクトには、それが機胜しないようにする特定の䜕かがなければなりたせん。 今日の埌半に埐々に分解しお、問題がなくなる時点を確認したす。

確実に再珟できたら芋おみたいです。

良いニュヌスは、゚ラヌを特定できたこずです。 悪いニュヌスは、私のプロゞェクトの問題が、このスレッドで他の人が報告したものず倉わらなかったこずです。

したがっお、問題がCSSず廃棄制限にあり、それが解決されたず思われる堎合、私は䜕か間違ったこずをしおいるに違いありたせん。 これはあなたがこれらを眮く堎所ですか

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

耇補 https 

@dydokamil
既知のバグ https 
空のCSSファむルをむンポヌトしお「解決」するこずができたす。

これを開発、本番、静的゚クスポヌトの各モヌドで確実に再珟するこずができたすが、 onDemandEntriesたたは空のcssファむルの回避策は圹に立ちたせんでした。

この問題を解決する唯䞀の方法は、ブログ投皿ペヌゞのBodyコンポヌネントからimport 'highlight.js/styles/color-brewer.css';を削陀するこず

ブログ投皿ペヌゞを指す<Link>むンスタンスはロヌドに倱敗したすが、 <Link>クリックするずhttp://localhost:3000/_next/static/development/pages/post.jsがペヌゞにドロップされたす。 cssむンポヌト、ブログ投皿ぞの<Link> sが機胜するこずをコメントアりトしたす。 コメントを倖すず、すべおの<Link>ブログ投皿の読み蟌みに倱敗したす。

これらのブログ投皿ペヌゞのルヌトのいずれかをヒットするず、盎接正垞に機胜したす。バグはクラむアント偎にのみ関連しおいたす。 ベヌスのルヌティング。 これは、バヌゞョン6からバヌゞョン8にアップグレヌドした埌に発生したした。

最初は@zeit/next-cssこれをヒットしたしたが、 @zeit/next-sassにスワップしお.scssファむルをむンポヌトした埌、同じ方法でこの問題を再珟できたす。 今のずころ、 styled-components drop @zeit/next-cssを䜿甚しおこれらのスタむルをロヌドしおいたす。 https://www.npmjs.com/package/@zeit/next -cssずhttps://www.npmjs.com/package/@zeit/next -sassを確認したずころ、これらの䜿甚䟋は壊れおいるようです。 🀔

https://github.com/zeit/next-plugins/issues/282に耇補リポゞトリを远加しお

あなたが説明しおいるこずは、たさにその問題のように聞こえたす。

これを開発、本番、静的゚クスポヌトの各モヌドで確実に再珟するこずができたすが、 onDemandEntriesたたは空のcssファむルの回避策は圹に立ちたせんでした。

この問題を解決する唯䞀の方法は、ブログ投皿ペヌゞのBodyコンポヌネントからimport 'highlight.js/styles/color-brewer.css';を削陀するこず

ブログ投皿ペヌゞを指す<Link>むンスタンスはロヌドに倱敗したすが、 <Link>クリックするずhttp://localhost:3000/_next/static/development/pages/post.jsがペヌゞにドロップされたす。 cssむンポヌト、ブログ投皿ぞの<Link> sが機胜するこずをコメントアりトしたす。 コメントを倖すず、すべおの<Link>ブログ投皿の読み蟌みに倱敗したす。

これらのブログ投皿ペヌゞのルヌトのいずれかをヒットするず、盎接正垞に機胜したす。バグは、クラむアント偎ベヌスのルヌティングにのみ関連しおいたす。 これは、バヌゞョン6からバヌゞョン8にアップグレヌドした埌に発生したした。

最初は@zeit/next-cssこれをヒットしたしたが、 @zeit/next-sassにスワップしお.scssファむルをむンポヌトした埌、同じ方法でこの問題を再珟できたす。 今のずころ、 styled-components drop @zeit/next-cssを䜿甚しおこれらのスタむルをロヌドしおいたす。 https://www.npmjs.com/package/@zeit/next -cssずhttps://www.npmjs.com/package/@zeit/next -sassを確認したずころ、これらの䜿甚䟋は壊れおいるようです🀔

next / cssパッケヌゞを远加した埌、これが私にも起こったこずを確認できたす。

開発䞭も同じこずが起こりたした本番環境は期埅どおりに機胜したす。問題は、sassファむルをむンポヌトするペヌゞにリンクするたたは内郚にコンポヌネントがある堎合です。

私の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: {...},
  }),
);

したがっお、詳现なコンポヌネントの1぀に次のむンポヌトがありたす。

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

むンポヌトにコメントするず、リンクが機胜し始めたす。 したがっお、 withSassプラグむンの問題のようです。

私は同じような問題を抱えおいたすが、同じではありたせん。 残念ながら、同じ゚ラヌが発生したす
生産でも。 しかし、いく぀かの理由でリンクが機胜するこずがありたす。

次の9.4でも同じ問題が発生したした
昚日CodeMirrorをプロゞェクトに远加したした
import "codemirror/lib/codemirror.css"

私はpages / page2.jsのようなものを持っおいお、それはいく぀かのこずを行い、その最埌にrouter.replace("/")を呌び出したすが、突然䜕もしなくなりたした。
デバッガヌでrouter.replace("/")を実行するず、 catchたたはfinallyブロックを解決たたはヒットしないpromiseが衚瀺されたした。

たた、おそらく泚目に倀するのは、next.config.jsにnext-cssがあるこずです。これを削陀しお、圱響があるかどうかを確認したす。

ここにホットフィックスがあるように芋えたすか =

ああ、それで問題は解決したした。むンポヌトをシェルの_app.jsファむルにも移動する必芁があったこずは明らかです。

このペヌゞは圹に立ちたしたか
0 / 5 - 0 評䟡