NextJS 15.2.2 ChunkLoadError: Loading chunk 2295 failed

[antonpanchenk0]

Summary

I have a production version of nextjs that are runing in standalone mode

I faced the next issue

Uncaught SyntaxError: Unexpected token '<'

ChunkLoadError: Loading chunk 2295 failed.
(missing: https://somesite.com/_next/static/chunks/app/(nextui)/(application)/(organizations)/choose-organization/page-b454073fbe962ee8.js)
    at r.f.j (webpack-18adaa73af8330a5.js:1:2997)
    at webpack-18adaa73af8330a5.js:1:1226
    at Array.reduce (<anonymous>)
    at r.e (webpack-18adaa73af8330a5.js:1:1205)
    at i (1684-d227fb5768204d34.js:1:153136)
    at 1684-d227fb5768204d34.js:1:165710
    at 1684-d227fb5768204d34.js:1:165914
    at t (1684-d227fb5768204d34.js:1:167167)

I checked the docker container and the page-b454073fbe962ee8.js exists.

/app/.next/static/chunks/app/(nextui)/(application)/(organizations)/choose-organization $ ls -la
total 16
drwxr-xr-x    2 nextjs   nodejs          38 Mar 20 00:52 .
drwxr-xr-x    4 nextjs   nodejs          94 Mar 20 00:52 ..
-rw-r--r--    1 nextjs   nodejs       15154 Mar 20 00:52 page-b454073fbe962ee8.js

I am running the base Dockerfile that can be found in the vercel examples repo.

Environment:

• node:20.17.0-alpine
• next ^15.2.2

The NextJS running behind the nginx proxy in EC2

The page have the next code:

'use client';

import { useCallback, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Avatar, Button } from '@heroui/react';
import { RiOrganizationChart } from 'react-icons/ri';
import RedirectingState from '@/app/(nextui)/(application)/(organizations)/_components/RedirectingState';
import { useGetCustomerAccountQuery } from '@/store/services/accountService';
import PageLoader from '@/components/PageLoader';

const ChooseOrganizationPage = () => {
  const router = useRouter();

  const { data: customerAccount, isLoading } = useGetCustomerAccountQuery();

  const [isRedirecting, setIsRedirecting] = useState(false);

  const handleChooseOrganization = useCallback(
    (domain: string) => {
      setIsRedirecting(true);
      router.push(`https://${domain}/posts/moderated`);
    },
    [router],
  );

  return (
    <div className="w-full min-h-screen p-6 flex justify-center items-center bg-background-light dark:bg-background-dark">
      {isLoading ? (
        <PageLoader />
      ) : (
        <div className="w-full max-w-[450px]">
          {isRedirecting ? (
            <RedirectingState />
          ) : (
            <>
              <h2 className="w-full text-center app-text-primary text-text-primary-dark dark:text-text-primary-light pb-[1.5rem]">
                Choose your organization
              </h2>
              <div className="w-full flex flex-col items-center justify-center gap-[15px]">
                {customerAccount?.organizations?.map((organization: Organization) => (
                  <Button
                    key={organization.id}
                    type="button"
                    color="primary"
                    variant="faded"
                    className="rounded-[5px] w-full"
                    startContent={
                      <Avatar
                        className="w-[18px] h-[18px] text-tiny absolute left-4 top-1/2 translate-y-[-50%]"
                        src={organization.logo}
                        name={organization.name}
                        fallback={<RiOrganizationChart />}
                      />
                    }
                    onPressStart={() => {
                      const primaryDomain = organization.domains.find(
                        (domain) => domain.isPrimary,
                      )!;

                      handleChooseOrganization(primaryDomain?.domain);
                    }}
                  >
                    {organization.name}
                  </Button>
                ))}
                <Button
                  href="/create-organization"
                  type="button"
                  as={Link}
                  color="primary"
                  className="w-full bg-gradient-1 text-text-default-light dark:text-text-default-dark font-semibold text-[14px] leading-[20px] rounded-[5px]"
                >
                  Create a new organization
                </Button>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
};

export default ChooseOrganizationPage;

How can I fix that issue?

Additional information

No response

Example

No response

[antonpanchenk0]

I added this to the middleware and its helped

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ]
}