next.js on GAE: 404 Chunk Load Error – Loading chunk <number> failed

Question

When deploying my next.js application to Google App Engine (Standard Environment), one specific js chunk cannot be loaded but throws a 404 error and makes the app crash. Happens everytime when I load a specific route for that the chunk is needed.

What is weird though: When I build and deploy the app locally in dev environment, NextJS does serve this specific file without problems. I made sure that this specific file indeed is included in the app build that it is being uploaded (which would also rule out all cache-specific issues like looking for long gone files from earlier builds.)

My current workaround is to serve the files for _next statically via app.yaml. That is working, the 404 error is gone (because the file is in fact there, only next.js won't find or serve it.) Of course I would rather make the next.js server handle it.

- url: /_next
  static_dir: build

- url: /.*
  secure: always
  script: auto

Maybe it has something to do with the dynamic segments in the routes, @modal and [documentId]? I realize that there have been earlier issues with dynamic routes on NextJS but they are said to be fixed.

Thanks in advance for any idea on how to fix this.

ansonthecaptain82 · Accepted Answer · 2025-04-07 21:04:13Z

FWIW, I am answering my own question: Problem was the @ in the URL. It seemed not properly encoded on GAE. So I added a server.js as described here (https://github.com/vercel/next.js/issues/62479) and added the line .replaceAll('@', '%40') to make sure that the @ is properly encoded. Leaving it here for anyone who has a Chunk Load Error with parallel routes on Google App Engine. Now my server.js looks like this:

import { parse } from 'url'
import next from 'next'

const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    createServer((req, res) => {
        let reqUrl = req.url
            .replaceAll(/\[/g, '%5B')
            .replaceAll(/]/g, '%5D')
            .replaceAll('%5b', '%5B')
            .replaceAll('%5d', '%5D')
            .replaceAll('@', '%40')
        const parsedUrl = parse(reqUrl, true)
        handle(req, res, parsedUrl)
    }).listen(port)

    console.log(
        `> Server listening at http://localhost:${port} as ${dev ? 'development' : process.env.NODE_ENV
        }`
    )
})```

Collectives™ on Stack Overflow

next.js on GAE: 404 Chunk Load Error – Loading chunk <number> failed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related