Next.js Unhandled Runtime Error "Failed to load script: /_next/static/chunks/..." only triggered in dev mode

Question

I am running... a next.js app in dev mode. I have a page that maps through JSON data from the backend and renders a component 'EventListItem' for every 'event' object contained.

List page:

• http://localhost:3000/6/events/2021-08-26
• (http://localhost:3000/[cinemaId]/events/[[...date]])
• Path from content root: 'pages/[cinemaId]/events/[[...date]]'

This list item is clickable so that the user can navigate to a detail page that holds all the details of the 'event' object.

Detail page:

• http://localhost:3000/6/events/detail/2021-08-26/152430
• (http://localhost:3000/[cinemaId]/events/detail/[[...date]]/[[...slug]])
• Path from content root: 'pages/[cinemaId]/events/detail/[...slug]'

In dev mode... when I click on the link, I momentarily trigger an error before the browser navigates to the right page and renders all information correctly:

Unhandled Runtime Error
Error: Failed to load script: /_next/static/chunks/pages/%5BcinemaId%5D/events/detail/%5Bdate%5D/%5BeventTypeId%5D.js
Call Stack
appendScript/</script.onerror
node_modules/next/dist/client/route-loader.js (83:51)

But, as I said, the error flashes up briefly and then the content of the detail page renders correctly.

When I navigate directly to the URL without clicking on the link… everything renders correctly with no error.

When I try git bisect... This error has resisted my attempts to find the cause using git bisect. The first occurance I can recall was three days ago, yet when I checkout commits from over a week ago, the error is there. I cannot be 100% sure, but I do not remember seeing this error when those commits were made.

When the code is run in production... I cannot replicate the code and everything runs smoothly

ServerSideRendering Currently neither page has more than barebones SSR code. Currently, all the data fetching is being done on the client-side. This will change.

Thank you for reading. Any insight would be very welcome. The code is here below for reference...

The Link in the component:

<Link
href={{pathname: "/[cinemaId]/events/detail/[date]/[eventTypeId]",
query: {cinemaId: cinemaId, date: date, eventTypeId: showtime.eventTypeId}
}}
>
<a className="font-bold text-lg">{showtime.name}</a>
</Link>

Answer 1

I didn't test this, but the comment section isn't the area for this. It looks like you have to use the Link component's as property, because your method of routing is likely causing the server to not recognise the page for a short period. Try something similar to the following:

<Link href={`/${cinemaId}/events/`} as={`/${cinemaId}/events/`}>
                                            <a className="opacity-50 hover:text-cyan hover:opacity-100">{t('Programm')}</a>
                                        </Link>

and then check if you have the correct link before rendering. Something similar to the following:

if (pathname === '/${cinemaId}/events/') {
    app.render(req, res, '/user/signup', query)
}

The last two links provided are what my answer is from, but the remaining thread has some more explanations.

References:

Getting strange 404 before page loads. (Github). https://github.com/vercel/next.js/issues/2208. (Accessed 26 August 2021).

Getting strange 404 before page loads. (Github). https://github.com/vercel/next.js/issues/2208#issuecomment-341107868. (Accessed 26 August 2021).

Getting strange 404 before page loads. (Github). https://github.com/vercel/next.js/issues/2208#issuecomment-341939582. (Accessed 26 August 2021).

Answer 2

For anyone who googled (as me) and missed the details of the communication by @SimonGowing and @juliomalves: I had a similar error and used the following next/link:

<Link
  href={{
  pathname: "/categories/[category]",
  query: {
    category: category.path,
  },
}}>

Changing this to a string literal resolved the issue and I also have no back button issues:

<Link href={`/categories/${category.path}`}>