title: Next.js Unhandled Runtime Error "Failed to load script: /_next/static/chunks/..." only triggered in dev mode
body: <p><strong>I am running...</strong>
  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.</p>
  <p>List page:</p>
  <ul>
  <li>http://localhost:3000/6/events/2021-08-26</li>
  <li>(http://localhost:3000/[cinemaId]/events/[[...date]])</li>
  <li>Path from content root: 'pages/[cinemaId]/events/[[...date]]'</li>
  </ul>
  <p>This list item is clickable so that the user can navigate to a detail page that holds all the details of the 'event' object.</p>
  <p>Detail page:</p>
  <ul>
  <li>http://localhost:3000/6/events/detail/2021-08-26/152430</li>
  <li>(http://localhost:3000/[cinemaId]/events/detail/[[...date]]/[[...slug]])</li>
  <li>Path from content root: 'pages/[cinemaId]/events/detail/[...slug]'</li>
  </ul>
  <p><strong>In dev mode...</strong>
  when I click on the link, I momentarily trigger an error before the browser navigates to the right page and renders all information correctly:</p>
  <pre><code>Unhandled Runtime Error
  Error: Failed to load script: /_next/static/chunks/pages/%5BcinemaId%5D/events/detail/%5Bdate%5D/%5BeventTypeId%5D.js
  Call Stack
  appendScript/&lt;/script.onerror
  node_modules/next/dist/client/route-loader.js (83:51)
  </code></pre>
  <p>But, as I said, the error flashes up briefly and then the content of the detail page renders correctly.</p>
  <p><strong>When I navigate directly to the URL without clicking on the link…</strong> everything renders correctly with no error.</p>
  <p><strong>When I try git bisect...</strong>
  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.</p>
  <p><strong>When the code is run in production...</strong>
  I cannot replicate the code and everything runs smoothly</p>
  <p><strong>ServerSideRendering</strong>
  Currently neither page has more than barebones SSR code. Currently, all the data fetching is being done on the client-side. This will change.</p>
  <p>Thank you for reading. Any insight would be very welcome. The code is here below for reference...</p>
  <p><strong>The Link in the component:</strong></p>
  <pre><code>&lt;Link
  href={{pathname: &quot;/[cinemaId]/events/detail/[date]/[eventTypeId]&quot;,
  query: {cinemaId: cinemaId, date: date, eventTypeId: showtime.eventTypeId}
  }}
  &gt;
  &lt;a className=&quot;font-bold text-lg&quot;&gt;{showtime.name}&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>