NextJS - 14.2.2 - Chunk Load Error

[DOOQUAN]

Summary

We Are facing this chunk load error mostly for US users for all other users our app is loading for us fine. and we are not able to reproduce this in local. We are tracing this error through posthog

"ChunkLoadError\n at s.f.j (https://appname/_next/static/chunks/webpack-e753088ed470abe6.js:1:4917)\n at https://appname/_next/static/chunks/webpack-e753088ed470abe6.js:1:1793\n at Array.reduce ()\n at s.e (https://appname/_next/static/chunks/webpack-e753088ed470abe6.js:1:1759)\n at ea.loadableGenerated.webpack [as loader] (https://appname/_next/static/chunks/app/(appname)/(appname)/%5B...slug%5D/page-50441dc09a9f4a0b.js:1:51527)\n at https://appname/_next/static/chunks/vendors-2ac4632b-17de9aefc5f25a6c.js:2:18232\n at D (https://appname/_next/static/chunks/vendors-27161c75-6712d5e2638a4df3.js:1:44280)\n at iZ (https://appname/_next/static/chunks/fd9d1056-d3681e33b18e1c49.js:1:117888)\n at ia (https://appname/_next/static/chunks/fd9d1056-d3681e33b18e1c49.js:1:95552)\n at https://appname/_next/static/chunks/fd9d1056-d3681e33b18e1c49.js:1:95374\n at il (https://appname/_next/static/chunks/fd9d1056-d3681e33b18e1c49.js:1:95381)\n at oZ (https://appname/_next/static/chunks/fd9d1056-d3681e33b18e1c49.js:1:91596)\n at MessagePort.O (https://appname/_next/static/chunks/vendors-27161c75-6712d5e2638a4df3.js:1:26560)\nEnd of stack for Error object"

Our Infrastructure
Framework: Next.js
Hosting: AWS EC2
Proxy/CDN: Cloudflare with Loadbalancing. have instances in both us and ind
Deployment: We build locally/CI and deploy the artifacts to EC2, restarting PM2.

Our nextconfig

import { withSentryConfig } from '@sentry/nextjs';

/** @type {import('next').NextConfig} */
const nextConfig = {
  compress: true,

  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
      },
      {
        protocol: 'http',
        hostname: '**',
      },
    ],
    domains: ['cdn.brandfetch.io'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },

  experimental: {
    esmExternals: 'loose',
    optimizePackageImports: ['mapbox-gl', 'react-map-gl', 'react-lottie'],
    serverComponentsExternalPackages: [
      '@opentelemetry/instrumentation',
      'require-in-the-middle',
    ],
  },

  webpack: (config, { isServer, dev }) => {
    if (Array.isArray(config.externals)) {
      config.externals.push({ canvas: 'canvas' });
    }

    if (!isServer) {
      if (dev) {
        config.optimization = {
          ...config.optimization,
          splitChunks: false,
          runtimeChunk: false,
          minimize: false,
        };
      } else {
        config.optimization = {
          ...config.optimization,
          splitChunks: {
            ...config.optimization.splitChunks,
            cacheGroups: {
              ...config.optimization.splitChunks?.cacheGroups,
              vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                chunks: 'all',
                maxSize: 244000,
              },
            },
          },
        };

        config.output = {
          ...config.output,
          chunkLoadTimeout: 30000,
          crossOriginLoading: 'anonymous',
        };
      }
    }

    return config;
  },

  env: {

  },

  reactStrictMode: false,

  eslint: {
    ignoreDuringBuilds: true,
  },

  typescript: {
    ignoreBuildErrors: true,
  },


  ...(process.env.NODE_ENV === 'production' && { output: 'standalone' }),

  poweredByHeader: false,
  generateEtags: false,

  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: '/api/:path*',
      },
    ];
  },

  async headers() {
    return [
      {
        source: '/_next/static/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/_next/image(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=300, stale-while-revalidate=86400',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'SAMEORIGIN',
          },
        ],
      },
    ];
  },
};



export default nextConfig;
`

Our package.json

{
  "name": "appname",
  "version": "0.3.0",
  "private": true,
  "scripts": {
    "build:css": "sass src/styles/global.scss src/styles/global.css --style compressed && postcss src/styles/global.css -o src/styles/global.output.css",
    "watch:css": "concurrently \"sass --watch src/styles/global.scss src/styles/global.css\" \"postcss src/styles/global.css -o src/styles/global.output.css --watch\"",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "release": "standard-version", 
    "changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s",
    "prepare": "[ \"$NODE_ENV\" != \"production\" ] && husky install || echo 'Skipping Husky in production environment'",
    "create-hook": "husky add .husky/pre-commit \"npm test\"",
    "cm": "cz",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "prettier --check"
    ]
  },
  "dependencies": {
    "@calcom/embed-react": "^1.5.3",
    "@emoji-mart/react": "^1.1.1",
    "@ffmpeg/ffmpeg": "^0.12.15",
    "@ffmpeg/util": "^0.12.2",
    "@floating-ui/dom": "^1.7.4",
    "@hookform/resolvers": "^3.9.1",
    "@next/third-parties": "^15.1.5",
    "@phosphor-icons/react": "^2.1.7",
    "@reduxjs/toolkit": "^2.2.7",
    "@sentry/nextjs": "^10.5.0",
    "@tawk.to/tawk-messenger-react": "^2.0.2",
    "@tiptap/core": "^3.3.0",
    "@tiptap/extension-image": "^3.3.0",
    "@tiptap/extension-link": "^3.3.0",
    "@tiptap/extension-placeholder": "^3.3.0",
    "@tiptap/extension-text-align": "^3.3.0",
    "@tiptap/extension-text-style": "^3.3.0",
    "@tiptap/extension-underline": "^3.3.0",
    "@tiptap/pm": "^3.3.0",
    "@tiptap/react": "^3.3.0",
    "@tiptap/starter-kit": "^3.3.0",
    "@types/dinero.js": "^1.9.4",
    "autoprefixer": "^10.4.21",
    "axios": "^1.7.7",
    "boring-avatars": "^1.11.2",
    "browser-image-compression": "^2.0.2",
    "classnames": "^2.5.1",
    "clsx": "^2.1.1",
    "compressorjs": "^1.2.1",
    "core-js": "^3.40.0",
    "dinero.js": "^1.9.1",
    "embla-carousel-auto-scroll": "^8.6.0",
    "embla-carousel-react": "^8.5.1",
    "emoji-mart": "^5.6.0",
    "ffmpeg": "^0.0.4",
    "formik": "^2.4.6",
    "html-to-image": "^1.11.11",
    "js-cookie": "^3.0.5",
    "mapbox-gl": "^3.7.0",
    "next": "^14.2.11",
    "next-auth": "^4.24.7",
    "nprogress": "^0.2.0",
    "obscenity": "^0.4.3",
    "pdfjs-dist": "^5.4.54",
    "qr-code-styling": "^1.8.4",
    "react": "^18.3.1",
    "react-best-gradient-color-picker": "^3.0.14",
    "react-calendly": "^4.4.0",
    "react-circular-progressbar": "^2.2.0",
    "react-dom": "^18.3.1",
    "react-grid-layout": "^1.4.4",
    "react-hook-form": "^7.54.1",
    "react-image-crop": "^11.0.7",
    "react-lottie": "^1.2.4",
    "react-map-gl": "^7.1.7",
    "react-markdown": "^10.1.0",
    "react-phone-input-2": "^2.15.1",
    "react-redux": "^9.1.2",
    "react-share": "^5.2.2",
    "react-social-media-embed": "^2.5.17",
    "react-turnstile": "^1.1.4",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.3.0",
    "remark-gfm": "^4.0.1",
    "rollup": "^4.52.5",
    "tailwind-merge": "^3.0.1",
    "tailwindcss": "^3.4.17",
    "tiptap-extension-resizable-image": "^2.0.0",
    "typescript": "^5.9.3",
    "usehooks-ts": "^3.1.1",
    "uuid": "^13.0.0",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^19.5.0",
    "@commitlint/config-conventional": "^19.5.0",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.3.0",
    "@types/jest": "^30.0.0",
    "@types/js-cookie": "^3.0.6",
    "@types/lodash": "^4.17.14",
    "@types/node": "^20.19.8",
    "@types/nprogress": "^0.2.3",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18",
    "@types/react-grid-layout": "^1.3.5",
    "@types/react-lottie": "^1.2.10",
    "@types/react-slick": "^0.23.13",
    "@types/vimeo__player": "^2.18.3",
    "@typescript-eslint/eslint-plugin": "^8.8.0",
    "@typescript-eslint/parser": "^8.8.0",
    "commitizen": "^4.3.1",
    "conventional-changelog-cli": "^5.0.0",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^8.57.1",
    "eslint-config-next": "14.2.8",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-jsx-a11y": "^6.10.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.1",
    "eslint-plugin-react-hooks": "^4.6.2",
    "husky": "^8.0.3",
    "i": "^0.3.7",
    "jest": "^30.0.4",
    "jest-environment-jsdom": "^30.0.4",
    "lint-staged": "^15.2.10",
    "npm": "^10.9.0",
    "postcss": "^8.4.47",
    "prettier": "^3.3.3",
    "standard-version": "^9.5.0",
    "ts-node": "^10.9.2"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

Let me know if you need more info in the comments. Help appreciated.

Additional information

No response

Example

No response

[vitalets]

We had a similar issue before. The reason was that Cloudflare had cached a 404 response for one of the chunks.
To confirm this, check the cf-cache-status response header for the failing chunk. if it’s HIT, that’s the reason.
To fix the issue, open the Cloudflare dashboard and purge the cache for that chunk’s URL.

[DOOQUAN]

But we were facing the same issue when we had Route 53 set up, then we decided to move to cloudfare and still the issue persists. I will try this . Thanks

[icyJoseph]

I am re-working the error page shown for client-side-exception-occurred, I'll add this info too. Please do report back if this fixes your issue too, or if something else does.

[DOOQUAN]

Didnt get you

[icyJoseph]

Did it work @DOOQUAN - I am gathering community solutions or techniques to deal with this type of error, client-side-exception-occurred is the error shown, and it can be caused by various things, such as Chunk Load Errors.