24

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>
Improve this question
4
  • 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. Commented Aug 27, 2021 at 21:43
  • @juliomalves thanks! The 'path from content root' is pages/[cinemaId]/events/detail/[...slug].tsx Commented Aug 30, 2021 at 8: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. Commented Sep 16, 2021 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). Commented Mar 10, 2022 at 17:01

5 Answers 5

Reset to default
6

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}`}>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This also solved Loading failed for the <script> with source ... error and hard page refresh for me too. Do you know why first case fails?
@markokraljevic sorry I have no idea. Maybe an issue on next/link.
I use next 13.2.7 but it still shows an issue
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).

Improve this answer

5 Comments

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 <Link href={/${cinemaId}/events/detail/${date}/${showtime.eventTypeId}} > 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.
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?
"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 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?
@SimonGowing i have the same question → stackoverflow.com/q/69332663/6141587. did you solve it?
0

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

Improve this answer

1 Comment

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review
0

I had this issue in Production. I deleted the .next folder and npm run build again an restarted the app with pm2 and then it worked.

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.