NextJs has sporadic issue when serving from a load balancer with multiple nodes

Question

This is a problem where we get only when running on multiple nodes.

Our application is hosted on AWS ECS docker containers with Auto Scaling Group attached managed by an Application Load Balancer.

The NextJs application works fine when it only serves with one node. But to ensure high availability we need to server from multiple nodes. Since it has multiple build IDs, we added the following configuration to the next.config.js file

const nextConfig = {
  generateBuildId: async () => "default-build",
  experimental: {
    isrMemoryCacheSize: 0,
  },
};

module.exports = nextConfig;

The following issue occurs then enter image description here

The browser console error logs are as follows

Failed to load resource: the server responded with a status of 404(Not Found)

ChunkLoadError: Loading chunk 84 failed.
(error: http://replaced-this-url/_next/static/chunks/app/%5Blang%5D/layout-332c238ae51cc7a7.js)
    at d.f.j(webpack - 8b6d851d58492f7f.js: 1: 3285)
    at webpack - 8b6d851d58492f7f.js: 1: 1427
    at Array.reduce(<anonymous>)
        at d.e (webpack-8b6d851d58492f7f.js:1:1393)
        at self.__next_chunk_load__ (488-4c8bbce90f9d2c06.js:1:3713)
        at 488-4c8bbce90f9d2c06.js:9:5403
        at 488-4c8bbce90f9d2c06.js:9:5813
        at N (488-4c8bbce90f9d2c06.js:9:6016)
        at t (488-4c8bbce90f9d2c06.js:9:8912)

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 iv (2443530c-01613f55fe4aacb8.js:9:113059)
        at oR (2443530c-01613f55fe4aacb8.js:9:90030)
        at 2443530c-01613f55fe4aacb8.js:9:89879
        at oD (2443530c-01613f55fe4aacb8.js:9:89886)
        at ow (2443530c-01613f55fe4aacb8.js:9:87588)
        at ok (2443530c-01613f55fe4aacb8.js:9:86450)
        at E (488-4c8bbce90f9d2c06.js:25:1398)
        at MessagePort.C (488-4c8bbce90f9d2c06.js:25:1951)

ChunkLoadError: Loading chunk 84 failed.
        (error: http://replaced-this-url/_next/static/chunks/app/%5Blang%5D/layout-332c238ae51cc7a7.js)
        at d.f.j (webpack-8b6d851d58492f7f.js:1:3285)
        at webpack-8b6d851d58492f7f.js:1:1427
        at Array.reduce (<anonymous>)
            at d.e (webpack-8b6d851d58492f7f.js:1:1393)
            at self.__next_chunk_load__ (488-4c8bbce90f9d2c06.js:1:3713)
            at 488-4c8bbce90f9d2c06.js:9:5403
            at 488-4c8bbce90f9d2c06.js:9:5813
            at N (488-4c8bbce90f9d2c06.js:9:6016)
            at t (488-4c8bbce90f9d2c06.js:9:8912)
            window.console.error @ 488-4c8bbce90f9d2c06.js:1
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

I know Enabling Stickiness solves this issue. But since this is a static web application, it's not the best practice as we need to ensure the load is balanced. Hence the issue should be sorted from application logic side

Dockerfile

ARG base_image_build="node:18.17.1"
ARG base_image_run="node:18.17.1-slim"

FROM ${base_image_build} AS builder
WORKDIR /opt/app
COPY . .

RUN yarn install --frozen-lockfile --production

FROM ${base_image_run} AS runner
ENV NODE_ENV=production
USER node
WORKDIR /opt/app

COPY --chown=node:node --from=builder /opt/app /opt/app
COPY --chown=node:node --from=builder /opt/app/node_modules ./node_modules
CMD ["yarn", "docker"]

yarn docker: yarn build && yarn start

"Since it has multiple build IDs" Why does it have multiple build IDs? Are you building the application on container startup? You should be building the application before or during the docker image creation, not during container startup. Can you add your Dockerfile to the question? — Mark B
– Mark B, Commented Nov 1, 2023 at 11:33
Yes, we are building the application on the container startup. It was due to CICD limitation that we have to reuse build image in multiple container environments. If we include built folder in the image, then the environment variables cant be change. Therefore, the same image cannot be reused — Supun Kandambige
– Supun Kandambige, Commented Nov 2, 2023 at 3:42
It sounds like you really need to rethink your image build strategy. Building your application at container start time is an anti-pattern and results in issues like you are now facing. — Mark B
– Mark B, Commented Nov 2, 2023 at 10:48
I agree with you. However, in here, what we are focusing is whether it's resolvable from NextJs build end. Like the generateBuildId, I want to know whether it's supported for chunks loading as well! — Supun Kandambige
– Supun Kandambige, Commented Nov 6, 2023 at 7:06

Supun Kandambige · Accepted Answer · 2023-11-09 04:39:27Z

0

when building the application in the container startup, it generates distinct .next folder for each node with different artifacts, leading this separation results in chunk not found errors. Renaming the filenames and chunks on the client side in the webpack configuration will be able to keep the same artifacts across all builds will helps to resolve chunk not found issue. Adding the following on next.config.js solved the chunk loading issue, and ultimately, solved the issue.

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!isServer) {
      config.output.filename = 'static/chunks/[name].js';
      config.output.chunkFilename = 'static/chunks/[name].js';
    }
    return config;
  }

answered Nov 9, 2023 at 4:39

Supun Kandambige

114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextJs has sporadic issue when serving from a load balancer with multiple nodes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related