21

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>
Simon Gowing
  • 241
  • 1
  • 2
  • 10
  • Can you show what's your actual `pages` folder structure? The `pathname` value in your `Link` doesn't match the pages paths you referenced before. – juliomalves Aug 27 '21 at 21:43
  • @juliomalves thanks! The 'path from content root' is pages/[cinemaId]/events/detail/[...slug].tsx – Simon Gowing Aug 30 '21 at 08:24
  • I'm seeing the same thing. I tried adding the URL in the 'as' attribute of the Link component, but that did not help. My use-case is a Link with dynamic URL to download files. – w. Patrick Gale Sep 16 '21 at 19:06
  • 1
    In case it helps anyone else: I got a very similar error that ended up being caused by using `router.push` to navigate to an external url (Next.js recommends using `window.location` for external navigation). – bryanbraun Mar 10 '22 at 17:01

4 Answers4

5

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}`}>
Jan Hommes
  • 5,122
  • 4
  • 33
  • 45
2

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).

Shamar Yarde
  • 747
  • 1
  • 7
  • 19
  • Thanks @ShamarYarde, this has been very helpful and close to solving it. The link is definitely the problem as you say. In the first instance, I managed to avoid the error by simply replacing the href with a template literal ie This navigates correctly to the detail page but then clicking the 'back' button in the browser is disabled. The URL updates to the correct address but the content does not re-render. – Simon Gowing Aug 27 '21 at 08:30
  • Regarding adding the 'as' prop to the link. I'm not sure I am getting this right. The file structure from the route is 'pages/[cinemaId]/events/detail/[...slug]' but the url I am trying to access is (for example) `localhost:3000/${cinemaId}/events/detail/${date}/${showtime.eventTypeId}`. Could you please help me understand what should go in the h-ref and what in the as. Or is there a file structure problem that I need to resolve? – Simon Gowing Aug 27 '21 at 09:53
  • "The URL updates to the correct address but the content does not re-render." - That's probably because new content is not getting fetched on client-side navigation, it's not an issue with the `Link` but rather with the code inside that page's component. – juliomalves Aug 27 '21 at 21:47
  • @juliomalves thanks. What I mean is that when the browser 'back' button is clicked, the URL goes back to that of the [date] page we were on before but the content remains as that of the [slug] page that we clicked through to. It feels like the change in URL is not triggering the page change. But why would that be different from when I access that page in the first place? – Simon Gowing Aug 30 '21 at 08:31
  • @SimonGowing i have the same question → https://stackoverflow.com/q/69332663/6141587. did you solve it? – deadcoder0904 Sep 26 '21 at 07:22
0

my problem was that I an import for my component but the component was completely empty.

Chris R
  • 29
  • 2
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/34528569) – Whit Waldo Jun 16 '23 at 20:01
-1

I had the same problem. Came here to find the solution, turns out, swapping the Link component from next/link to a simple a tag would do the trick.

Sobhan Jahanmard
  • 821
  • 5
  • 16