Error toast hides the background

[mrassili]

Bug report

Describe the bug

The new toast introduced in v9.4 seems intrusive and doesn't hide which makes it difficult to see the background when simulating the mobile viewport in chrome

To Reproduce

1. You should have an error in the console
2. Simulate responsive viewport in chrome

Expected behavior

it should be closable or not show at all

Screenshots

System information

• OS: macOS
• Browser (if applies): chrome
• Version of Next.js: 9.4.0
• Version of Node.js: 12.11.1

Additional context

Add any other context about the problem here.

[Timer]

Fixing the error will cause this toast to go away. Once there has been an error, you shouldn't really be interacting with your application any longer.

[zwhitchcox]

I'm trying to fix an unrelated error, and the toast notification is in the way.
Also you can't hide the toast notifications with a style, because it is apparently in an iframe or something, and the only thing you can do is hide the error box entirely.

This is bad design.

[mrassili]

same here. had to downgrade to the last version without this new feature

[mrassili]

Fixing the error will cause this toast to go away. Once there has been an error, you shouldn't really be interacting with your application any longer.

sometimes I have an error that I don't necessarily want to fix at that moment

[wereHamster]

@mrassili are those typescript errors or others? You can disable typescript errors during dev and/or production builds through some options in next.config.js.

[mrassili]

@mrassili are those typescript errors or others? You can disable typescript errors during dev and/or production builds through some options in next.config.js.

I am not using TypeScript, I couldn't find an option to disable the new error overlay/toast or fast refresh. I ended up downgrading for a few hours :(

[emelyanov-dev]

I look at the console. Why do I need an uninformative red square in the interface?

I just added:

useEffect(() => {
  if (process.env.NODE_ENV === "development") {
    setInterval(() => {
      document.querySelector("body > nextjs-portal")?.remove();
    }, 10);
  }
}, []);

[YogeshYKG]

I believe I will have to downgrade till I discover a solution that turns off built-in toast in the development environment because I am having the same problem with the latest release.

I looked for potential solutions, but none of them were effective.

showing up in both page routing and app routing
Clashing with the component of a shadcn sheet

I would like this built-in nextJS badge to be disabled or removed.