Next.js ChunkLoadError: Loading chunk 800 failed. を解決する

Chrome, Safariなどでは起きないのだけど、Braveでだけ

Application error: a client-side exception has occurred (see the browser console for more information).

と表示されエラーになる。
コンソールを見てみると

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

ChunkLoadError: Loading chunk 800 failed.
(error: https://domain/_next/static/chunks/app/cookie-policy/page-ef1296e5ca397db2.js)
    at d.f.j (webpack-19702db6546af1c2.js:1:3264)
    at webpack-19702db6546af1c2.js:1:1437
    at Array.reduce (<anonymous>)
    at d.e (webpack-19702db6546af1c2.js:1:1403)
    at self.__next_chunk_load__ (698-1a04c32ab1a69104.js:1:3768)
    at 698-1a04c32ab1a69104.js:9:5750
    at 698-1a04c32ab1a69104.js:9:5973
    at t (698-1a04c32ab1a69104.js:9:6176)

Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at im (bce60fc1-96f804b874f67618.js:9:113115)
    at oM (bce60fc1-96f804b874f67618.js:9:90141)
    at bce60fc1-96f804b874f67618.js:9:89963
    at oT (bce60fc1-96f804b874f67618.js:9:89970)
    at ov (bce60fc1-96f804b874f67618.js:9:87608)
    at oy (bce60fc1-96f804b874f67618.js:9:86470)
    at E (698-1a04c32ab1a69104.js:25:1389)
    at MessagePort.C (698-1a04c32ab1a69104.js:25:1942)

というエラーが出ている

巳波みなと

ブロックされている cookie-policy というページは、Cookieの扱いについて書いているページだが、その中には「Google Analytics」についての記載もある。

まだよくわかってないが、おそらくこのGoogle Analyticsという単語に反応してブロックしてるのではないかと推測

巳波みなと

同じようなエラーで調べると、.nextを削除しろという記事ばっかりだが、プロダクションでも起こるエラーなので、関係ない

巳波みなと

Braveだけページを出し分けるとかは無理そうなので、適切にエラーハンドリングをする方向で考えたい。

巳波みなと

SPAだけこの問題が発生するっぽい？

巳波みなと

いや、これはpreloadさせないほうがいいのか

巳波みなと

        <Link prefetch={false} href={'/cookie-policy'}>
          Cookie Policy
        </Link>

preloadを無効にしてもだめだった

巳波みなと

PWA無効化してみるか

巳波みなと

PWA無効化してもだめ。PWAが原因ではない

巳波みなと

Linkを消してもだめ。なのでリンクされてる/されてないは関係ない

巳波みなと

うーん、クライアントに解除させるのは良い案なんだけど、そもそもそこに到達してないっていう

巳波みなと

これパスに反応してるのか。内容じゃない。
cookie-policyからdata-policyにパスを変えたらいけるようになった。

なるほど。パスか・・・

巳波みなと

結論：

内容は判断してないっぽい
- 内容にCookieとか入ってても表示はできる
prefetchがLinkで有効とか関係ないっぽい
- prefetchをfalseにしても、Linkごと消しても再現する
PWAは今回は関係なかった
パスでページ一個ブロックされると、ページそのものが死ぬ
- この際、develop環境だと死なないので、pnpm build からの pnpm startすることでしか気づけない
- 開発環境がBraveだと気づくかも？ページが表示できないので
cookieとかanalyticsとかの単語に反応するっぽいので、そういう文言はパスで使うのは避ける