Next.js: React 17.0.0-rc.0 breaks error reporting

[Winwardo]

Bug report

Describe the bug

When upgrading from 16.13.1 to 17.0.0-rc.0, the runtime error overlay does not display at all.

To Reproduce

In a component, throw an error. This can be either on the server, or purely in the browser. The type of error does not seem to matter - merely that it would be one that triggers the dev error box.

I've tried to make this repo as minimal as possible - using create-next-app and removing unnecessary parts.

https://github.com/Winwardo/nextjs-react-17-error-failure/blob/master/pages/index.js
https://github.com/Winwardo/nextjs-react-17-error-failure/blob/master/package.json

Expected behavior

Screenshot using React 16.13.1

Screenshots

Screenshot using React 17.0.0-rc.0, with console scrolled to where I believe the issue is in NextJS. (Note how the page is completely blank - anything that was previously rendered will be removed.)

System information

• Browser: Tested on both Chrome (with an assortment of installed extensions like React devtools, which spits out errors too) and Firefox (with no extensions installed that I'm aware of)
• Version of Next.js: 9.5.2 (I've experienced this on 9.5.1 as well)
• Version of Node.js: 12.16.3

Additional context

This happens with recent experimental versions of React as well, but it didn't seem worth making an issue for them as they're not meant to be supported.

This happens even if I have my own error boundary catching the error (I use https://github.com/bvaughn/react-error-boundary) though I believe that's part of Next's philosophy to capture any and all errors, even handled ones.

[hamlim]

I think I ran into this as well, however I also see the following error additionally:

Uncaught at ensureListeningTo

This error continues to get hit, flooding the console with the errors and flashing the screen, it seems to point to this code:

if (!(rootContainerElement != null && rootContainerElement.nodeType === ELEMENT_NODE)) {
  {
    throw Error( "ensureListeningTo(): received a container that was not an element node. This is likely a bug in React." );
  }
}

rootContainerElement there seems to be a document-fragment, which _I think_ is coming from the <nextjs-portal> custom element appended to the root of the page (is this the error overlay modal?)

I am using the latest experimental version of React 17.0.0-alpha.0-experimental-94c0244ba and Next.js version 9.3.7-canary.18 (I can try upgrading my version of next locally to see if that still reproduces the issue)

[eps1lon]

@hamlim This particular bug is already fixed in React's master branch (https://github.com/facebook/react/pull/15894).

[hamlim]

Thanks!

[gaearon]

Fixed in 17.0.0-rc.1.

[Winwardo]

Just tested with 17.0.0-rc.1, looks good to me.

[flybayer]

Thank you @gaearon! Will you be publishing a new experimental release soon that includes this fix?

[gaearon]

Probably not until the actual release.