I want to hide the error overlay in Nextjs

Question

I am developing market place for solana NFTs by using Next.js.

And I want to hide the error overlay like the following image.

How to do that?

Aryn

Answer 1

Adding to global.css helped:

nextjs-portal {
  display: none;
}

source https://github.com/vercel/next.js/discussions/13387#discussioncomment-5694715

Consequent

Answer 2

The solution provided by @Alan Svits is not good. The popup will add inline style overflow: hidden and padding-right: 15px when it appears. If you can't see the popup, you will be stuck with overflow hidden, since you can't close it.

Normally you should be able to close the popup, and the overflow hidden will go away. If someone outside of you will work with this "implementation", it will be a pain for him to debug and understand why he has overflow hidden in the body.

I know that I will receive downvotes for this but... Solve your code problems if you don't want to have Nextjs Error popups, especially the usual Hydration problems.

Sent

Answer 3

The error overlay appears in dev mode, you probably want that not hidden to view the errors and stacktrace.

When deploying to a higher environment like prod, use next build and follow the deployment guide.

However, if you have other reasons to hide the errors, others have tried with partial success - see here

Shawnna

Specifically, this reply: github.com/vercel/next.js/discussions/… – Askja

Answer 4

The answer provided by Alan can be improved to prevent the overflow and padding problem, by adding additional styles for the body. So the result will be:

nextjs-portal {
  display: none;
}

body {
  padding: 0 !important; 
  overflow: auto !important;
}

Matins