Como resolver o erro Uncaught ChunkLoadError no Next.js após suspensão do PC?

[Isaias C]

Estou usando Next.JS versão 14.2.3 e quando eu inicio a aplicação aparece esse erro no console, mas a aplicação não quebra imeditamente:

Uncaught SyntaxError: Invalid or unexpected token (at layout.js:61:29)

E ocorre um erro quando fico com o servidor rodando por muito tempo aparece esse erro no console, e aplicação para de funcionar deixando apenas uma tela branca sem nenhum aviso adicional:

react-dom.development.js:9126 Uncaught 
ChunkLoadError
    at __webpack_require__.f.j (webpack.js?v=1720194667254:852:29)
    at webpack.js?v=1720194667254:155:40
    at Array.reduce (<anonymous>)
    at __webpack_require__.e (webpack.js?v=1720194667254:154:67)
    at fn.e (webpack.js?v=1720194667254:391:50)
    at loadChunk (react-server-dom-web…velopment.js:244:30)
    at preloadModule (react-server-dom-web…velopment.js:170:22)
    at resolveModule (react-server-dom-web…elopment.js:1813:17)
    at processFullRow (react-server-dom-web…velopment.js:1902:9)
    at processBinaryChunk (react-server-dom-web…velopment.js:2072:7)
__webpack_require__.f.j	@	webpack.js?v=1720194667254:852
(anônimo)	@	webpack.js?v=1720194667254:155
__webpack_require__.e	@	webpack.js?v=1720194667254:154
fn.e	@	webpack.js?v=1720194667254:391
Mostrar mais 6 frames
app-index.js:33 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

Fiz uma alterações meu arquivo next.config.mjs para tentar solucionar o problema, mas mesmo com as mudanças o erro não foi solucionado, aqui está meu arquivo de configuração do Next.JS:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: "/_next/static/:path*",
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=60, must-revalidate"
          }
        ]
      }
    ]
  },
  webpack : (config, { isServer }) => {
    if(!isServer) {
      config.output.publicPath = "/_next/"
      config.output.chunkFilename = "static/chunks/[name].js";
      config.optimization = {
        ...config.optimization, 
        splitChunks: {
          cacheGroups: {
            default: false,
            vendors: false
          }
        }
      }
    }
    return config;
  },
  images: {
    formats: ["image/avif", "image/webp"],
    domains: []
  },
};

export default nextConfig;

Observação importante durando a ocorrência do erro não aparece nada no terminal, e quando eu recarrego a página o erro some e volta depois de algum tempo. Me ajudem eu não sei mais o que fazer par solucionar o problema! estou aberto a testar todas as soluções.
 

[Esquecido]

O erro: Uncaught SyntaxError: Invalid or unexpected token (at layout.js:61:29) 
esta dizendo que possui um caractere inválido ou inesperado no arquivo layout.js na linha 61, coluna 29, veja se encontra algo sobre.
simplifique seu next.config.mjs para garantir que não haja problemas com a configuração do Webpack
dps atualize no terminal do seu projeito utilizando: npm update
 

[Isaias C]

11 minutos atrás, Esquecido disse:

O erro: Uncaught SyntaxError: Invalid or unexpected token (at layout.js:61:29) 
esta dizendo que possui um caractere inválido ou inesperado no arquivo layout.js na linha 61, coluna 29, veja se encontra algo sobre.
simplifique seu next.config.mjs para garantir que não haja problemas com a configuração do Webpack
dps atualize no terminal do seu projeito utilizando: npm update
 

Opa valeu pelas dicas para lidar com o Webpack. Mas tem uma coisa estranha primeiro meu arquivo se chama layout.tsx, ele não layout.js e ele só tem 55 linhas. Ao abrir esse arquivo no console ele me mostra um código gerado pelo navegador, não mostra o meu arquivo layout.tsx, se tiver alguma dicas aqui está ele:

import "./globals.css";
import type { Metadata } from "next";
import { Open_Sans } from "next/font/google";
import { Header } from "@/components/Header";
import { ToastContainer, Zoom } from "../components/Toastify";
import { useRouter } from "next/router";
import { useEffect } from "react";
import { toast } from "react-toastify";
import ErrorBoundary from "@/components/ErrorBoundary";

const openSans = Open_Sans({
  subsets: ["latin"],
  weight: ["400", "500", "700", "800"],
});

export const metadata: Metadata = {
  title: "Easy Sell app",
  description: "Generated by create next app",
};

const RootLayout = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  return (
    <html lang="pt-br">
      <body className={`${openSans.className} w-screen h-screen`}>
        <Header />
        <main className="w-screen min-h-screen flex flex-col items-center justify-center bg-neutral-900 pt-[90px] md:pt-20 text-white relative z-0 bg-main-gradient bg-fixed">
          {children}
        </main>
        <ToastContainer
          position="top-center"
          autoClose={2500}
          limit={3}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick={false}
          rtl={false}
          pauseOnFocusLoss={true}
          pauseOnHover={true}
          stacked
          theme="light"
          transition={Zoom}
          toastClassName={"bg-green-btn"}
        />
      </body>
    </html>
  );
};

export default RootLayout;