Part of NextJS app no longer working - ChunkLoadError (critical in prod)

[AlexanderMoonBit]

Summary

We are recently seeing errors in the Production and even localhost (npm run build/run start) where on some pages it gives "Application error: a client-side exception has occurred (see the browser console for more information)". When I check the console it shows the following error

ChunkLoadError: Loading chunk 5760 failed.
(error: http://localhost:3000/_next/static/chunks/5760-40c839657ea31a15.js)
at d.f.j (webpack-a66c4bcffce5144a.js:1:3328)
at webpack-a66c4bcffce5144a.js:1:1385
at Array.reduce ()
at d.e (webpack-a66c4bcffce5144a.js:1:1351)
at self.next_chunk_load (5782-03768f85683b0a9b.js:1:5780)
at 5782-03768f85683b0a9b.js:9:2777
at 5782-03768f85683b0a9b.js:9:3187
at M (5782-03768f85683b0a9b.js:9:3390)
at t (5782-03768f85683b0a9b.js:9:5961)

We tried different things like

• Change the nextjs version
• remove .next and rerun npm run build

our next.config.json

// next.config.js
const nextConfig = {
  experimental: {
    appDir: true,
  },
  modularizeImports: {
    '@react-feather': {
      transform: '@react-feather/{{member}}',
    },
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'private', // development domain
        port: '',
        pathname: '/storage/**',
      },
      {
        protocol: 'https',
        hostname: 'private', // staging domain
        port: '',
        pathname: '/storage/**',
      },
      {
        protocol: 'https',
        hostname: 'private', // production domain
        port: '',
        pathname: '/storage/**',
      },
    ],
  },
  async rewrites() {
    return [
      {
        source: '/private/:gcloud_url/:path*',
        destination:
          'https://:gcloud_url/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

Our package.json

{
  "name": "moonbit-web-application",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@lottiefiles/lottie-player": "^1.7.1",
    "@next/font": "13.1.6",
    "@passbase/button": "^4.4.0",
    "@sumsub/websdk": "^1.3.7",
    "@sumsub/websdk-react": "^1.3.7",
    "@supabase/auth-helpers-nextjs": "^0.5.5",
    "@supabase/supabase-js": "^2.8.0",
    "@types/node": "18.14.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "chart.js": "^4.2.1",
    "chartjs-adapter-date-fns": "^3.0.0",
    "encoding": "^0.1.13",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "flowbite": "^1.6.3",
    "next": "^13.2.5-canary.20",
    "qrcode.react": "^3.1.0",
    "react": "18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": "18.2.0",
    "react-feather": "^2.0.10",
    "react-icons": "^4.7.1",
    "server-only": "^0.0.1",
    "sharp": "^0.32.0",
    "swr": "^2.1.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@types/react-copy-to-clipboard": "^5.0.4",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  }
}

Help appreciated!

[icyJoseph]

So the chunks is not being found on the server, which gives a 404 and from there the client falls apart.

The question is why would it fail to get, or find, the chunk. Are you using middleware, or some other network layer that could be making the request fail?

[AlexanderMoonBit]

@icyJoseph

• No service workers
• We use Github with Actions to Cloud Run.

I checked out a one-day-old commit or so and that one works but it has an old structure inside the folder app/deposit

In that commit deposit/details is not working for a similar Chunk error reason - but it used to work

[AlexanderMoonBit]

@icyJoseph okay I found the culprit it seems. It's related to nextJS component Image in the shared code above. By using img instead of Image from nextjs it doesn't throw error - I have many places where I use Image but it doesn't cause an issue, sooo random...

[icyJoseph]

Oh wow, really? What next version do you have? There must be something on that path that's making it fail. Is it all happening in appDir?

[AlexanderMoonBit]

using the next version 13.3 (latest) and yes in appDir

[icyJoseph]

I see you were using canary, does it happen downgrading to next@latest or something before 13.3?

[AlexanderMoonBit]

I tried a different version (13.2) but it didn’t work. I tried canary since I saw a mention about a fix that I thought may help.

On Thu, 13 Apr 2023 at 12:06, Joseph ***@***.***> wrote: I see you were using canary, does it happen downgrading to ***@***.*** or something before 13.3? — Reply to this email directly, view it on GitHub <#48328 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYVSQ6ESB4EW2FC6MVLFHU3XA7M2ZANCNFSM6AAAAAAW4WHTYM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Alexander Thomsen Founder Moonbit ***@***.*** www.moonbit.ai

[NhatLam310399]

I had same error. How do u fixed ? thanks

[AlexanderMoonBit]

It was nextjs Image component - changed to img and it fixed it

[anil2612coder]

it works

[shiv-anya]

Then are we not letting the whole purpose of next image fail? Which is cache images for high performance. This is a temporary solution with bad performance in return.

[AlexanderMoonBit]

It was nextjs Image component - changed to img and it fixed it

On Sat, 13 May 2023 at 02:26, Nhật Lâm ***@***.***> wrote: I had same error. How do u fixed ? thanks — Reply to this email directly, view it on GitHub <#48328 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYVSQ6A6COECVS3ESGGKEJLXF3PNRANCNFSM6AAAAAAW4WHTYM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Alexander Thomsen Founder Moonbit ***@***.*** www.moonbit.ai

[mattdev-sh]

I had same error after builded my next app with export config active, to have a static a website and deploy it on apache. With mamp in localhost, there's no problems any but on prod yes.

If problem came out on nginx prod also, i don't understand why the problem is not come out in more topics.

For resolve on apache prod i had to change manually path [locale ] ( my [lang] folder ) with simple "locale" in all files in /out folder and renamed folder also with the same name.

This problem seems happen because a codification of chrome about the name of folder [locale]. I will try on nginx making a not static build, but for now, for who have this problems on apache, this is a manually solutions.

[tlchatt]

Also having this problem,
Site serves the chunks via IP but not via the domain.
Only fails on the page chunk

First set of fetches to _next work (via the ip)
Second set mostly work minus the page chunk (via the https://domain)
The chunk is appearing in a dyamic page function console log as slug params, app/[..slug]/page.js

If I turn dynamicParams off it stops showing but still fails to load the chunk.
export const dynamicParams = false // true | false,

[sudeepgumaste]

Leaving it here so that it might help someone. In my case it was just happening on production and not on local, I was getting a 301 for when the /path/[chunk] was being requested. This ended happening because of a redirect rule I had on cloudflare that was redirecting any /path to a different location. So when next tried fetching that particular chunk, the redirect rule came into play and redirecting the request to a completely different url where obviously it wasn't able to get the chunk. Turning off the redirect rule fixed it

[benjick]

Over a year and no real answer?