NextJS cryptic React error on refresh

Support
,
1

Hi all,

I have this NextJS app running that runs just fine most of the time but in a specific case I get an error which only happens when deployed to Netlify.

At first I thought it could be a logic error within the site but and although I’m not ruling out that option the issue simply does not happen on a local build. I’ve also ran it containerized to see it that would trigger the error.

Since I’m not sure what else to try and a colleague suggested that it could have to do with Netlify redirects I was wondering if the community here could help, any tips or suggestions are deeply appreciated.

How to replicate

Unfortunately I am not allowed to share the name of the site just yet (I know this isn’t helpful and I’m sorry!). Here’s how this error manifests in case anyone has come across it:

  1. Access a NextJS view that makes use of React hooks
  2. If the view renders, refresh the page
  3. The error should show (see below for output)
{
  "errorType": "Runtime.UnhandledPromiseRejection",
  "errorMessage": "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.",
  "trace": [
    "Runtime.UnhandledPromiseRejection: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:",
    "1. You might have mismatching versions of React and the renderer (such as React DOM)",
    "2. You might be breaking the Rules of Hooks",
    "3. You might have more than one copy of React in the same app",
    "See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.",
    "    at process.<anonymous> (/var/runtime/index.js:35:15)",
    "    at process.emit (events.js:314:20)",
    "    at processPromiseRejections (internal/process/promises.js:209:33)",
    "    at processTicksAndRejections (internal/process/task_queues.js:98:32)"
  ]
}

If anyone has come across that type of error output before and has ideas on what to try please let me know, would be really grateful for any suggestions. :pray:

I’ve also issued a ticket to the support team but thought it might be best to share a thread with everyone else in case someone needs help as well.

Thanks a lot!

2

Hi @cristiano

There are a similar thread Runtime.UnhandledPromiseRejection on my Next.js app that might help here (though I don’t believe it is solved yet.)

1 Like
3

Nice one, will give this a try and update the thread, thanks Coel!

4

Didn’t do the trick for me but I appreciate the response. I’ll keep looking into it. :pray:

5

Hi @cristiano,

I understand you’re not able to share your actual project, but could you make a simple reproduction? A bare minimum that can reproduce the error would help the team debug this further.

6

Apologies Hrishikesh but I don’t think I’ll be able to do that. I have issues a support ticket to Netlify which does include the name of the site if you have access to that!

However I did narrow it down and it has to do with the next-iron-session package and this line seems to trigger the error:

import { Session, withIronSession } from "next-iron-session";

For reference, the error is:

I’m still looking at a solution but I think this narrows it further down at least.

8

Seems to be related with the following issues:

Preventing the page from reloading and routing it back to the page that causes the problem has the exact same effect.

  useBeforeunload((event: any) => {
    event.preventDefault();
    router.push("/login");
  });

Still looking into it. :sweat_smile:

10

Hey there, @cristiano :wave:

I spoke with one of our Next.JS experts, and it looks like you found a resolution here: v4 beta release · Discussion #706 · netlify/next-runtime · GitHub

For anyone else following along, I fully recommend checking out the beta release discussion linked above!

1 Like
11

Hi Hillary, appreciate it!

That’s the thread I was following today, really helpful and it fixed it. Here’s how:

  1. Installed the Beta version of the Netlify’s NextJS Plugin @netlify/plugin-nextjs@4.0.0-beta.2
  2. Because in my case the build was throwing an error on exceeding the allowed size I followed Matt’s advice and built the site locally with Netlify CLI and checked if there were dependencies exceeding the size shown in the failed build logs (netlify build then zipinfo .netlify/functions/___netlify-handler.zip | sort)
  3. Electron was a dependency that was too large and had to remove it in order to deploy with no issues.

After deploying successfully the error on refresh went away completely without having to change any code in the app itself.

Thank you very much for the help. :pray:

2 Likes
12

Thanks so much for sharing those details, they will be beneficial for future Forums members who encounter something similar. Glad everything is working for you now!! :netliconfetti:

1 Like