Next/link triggering momentary 'Unhandled Runtime Error' only in dev mode

[simongowing1]

What version of Next.js are you using?

11.1.0

What version of Node.js are you using?

14.15.3

What browser are you using?

Firefox

What operating system are you using?

macOS

How are you deploying your application?

Issue refers to Dev mode only

Describe the Bug

In dev mode, I am getting a momentary runtime error when I click on a dynamic next/link. The error appears for a couple of seconds then the required page renders correctly.
NB the error cannot be replicated in production.

Error

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

Link

<Link
href={`/${venueId}/events/detail/${date}/slug=${eventId}`}
as={`/${venueId}/events/detail/${date}/${eventId}`}
>
<a className="font-bold text-lg">{name}</a>
</Link>

File Structure to page I am trying to reach:
pages/[venueId]/events/detail/[...slug].tsx

The error persists if I attempt to replicate the file structure in my href. Same error with the code as follows:

href={`/${venueId}/events/detail/${eventId}`}
as={`/${cinemaId}/events/detail/${date}/${eventId}`}

The one thing that does get rid of the error is if I simply paste the template literal from the 'as' prop in the 'href' and remove the 'as' prop:

href={`/${venueId}/events/detail/${date}/${eventId}`}

This renders the required page swiftly and flawlessly without error. BUT when I try to navigate 'back' to the previous page using the browser 'back' button, it changes the URL to the correct address for the previous page, but remains on the same page.

Expected Behavior

As a user I want to be able to click on a dynamic 'event' link in a list and have the respective 'detail' content rendered without an error temporarily flashing up.

When I have finished with the information, I want to be able to click the browser's 'back' button and be returned to the previous page with the list of dynamic links.

To Reproduce

Link in question

<Link
href={`/${venueId}/events/detail/${date}/slug=${eventId}`}
as={`/${venueId}/events/detail/${date}/${eventId}`}
>
<a className="font-bold text-lg">{name}</a>
</Link>

File Structure to page I am trying to reach:
pages/[venueId]/events/detail/[...slug].tsx

[roncodingenthusiast]

+1 multiple of my projects are running into this issue too

[roncodingenthusiast]

@simongowing1 We downgraded to 11.0.1 and it worked for us so it seems like a temporary workaround if this is a blocker for you

[simongowing1]

@simongowing1 We downgraded to 11.0.1 and it worked for us so it seems like a temporary workaround if this is a blocker for you

Thanks for the tip @roncodingenthusiast ! I appreciate that. The code does work, just with the error in dev mode. And even without it in production. But I'd really like to know whether theres something I could improve in the code for future. Or if this is an issue with Next more broadly. It's really bugging me.

[roncodingenthusiast]

@simongowing1 We downgraded to 11.0.1 and it worked for us so it seems like a temporary workaround if this is a blocker for you

Thanks for the tip @roncodingenthusiast ! I appreciate that. The code does work, just with the error in dev mode. And even without it in production. But I'd really like to know whether theres something I could improve in the code for future. Or if this is an issue with Next more broadly. It's really bugging me.

Yeah I definitely agree. Mine is only in dev mode too. I also don't think it is a code issue if downgrading to 11.0.1 works and I have seen the issue in multiple projects and downgrading seems to fix it. Hopefully they will have an answer for us soon 🤞🏾

[bhardy]

We had this same issue but we realized that we had some casing mismatches on our filepaths and our hrefs. We had pages/[orderId] while the link href had [orderID]

note: you may want to fix this in your apps (if the mismatch is your issue). we were experiencing full-page reloads instead of client-side loads on page transitions that threw the error in dev mode.

[florianmutter]

Seems to me that the overall behavior did not change in next: First it tries to load the chunk and gets a 404 because the chunk for the different page was not compiled yet. Then it full page loads the requested page which triggers the compilation of the chunk. After that it works because the chunk is there. Next 11.0.1 seems to not show an error when it gets a 404 for the chunk but next 11.1.x shows the "Unhandled Runtime Error".

[atuttle]

To add some additional context; I am upgrading an older app from Next 8 to 11 and ran into this issue, too.

This app doesn't use dynamic routes (/foo/[bar].js) but does use dynamically created links to static pages with url params:

<Link href={`/checkin/attendees?e=${eventGuid}`}>
    <a className="linkList">{/* a bunch of content here; divs/etc. */}</a>
</Link>

Downgrading to 11.0.1 does seem to make the "failed to load script" error in dev mode stop.

[danielwaltz]

I've been running into this every time I try to update to the latest version of Next. 😞 I'm suck on v10 (or I guess v11.0.1 at least based on above info) for now until this is resolved.

I will say, to add to the discussion, for me I believe it's related to links to dynamic routes. I have a page pages/expenses/[...all].tsx that expects a path of /expenses/[expenseId]/[itemId]. Normal links to /expenses/[expenseId] and shallow links to /expenses/[expenseId]/[itemId] all raise this error and trigger a full reload, which is especially frustrating when clicking between items on this page as it should be a shallow navigation.

Happy to provide any additional info that might be helpful for debugging this!

[ijjk]

Hi, this has been updated in v12.0.5-canary.3 of Next.js, please update and give it a try!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.