Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SSRProvider causes an error when conditionally rendering an Overlay (Next.js)

See original GitHub issue

🐛 Bug Report

When wrapping the whole application with SSRProvider and then conditionally rendering an Overlay or OverlayContainer component with the useOverlayTriggerState state hook, an Unhandled Runtime Error is thrown.

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'contains')

It doesn’t happen when the SSRProvider is removed in _app.tsx.

I’ve tried all sorts of different things like reimplementing a Modal in different ways with react-aria. I’ve followed the official documentation etc. It all seems to be tied to the SSRProvider component somehow. I don’t understand the code well enough to find a solution myself.

🤔 Expected Behavior

I expect the SSRProvider not to cause unhandled runtime errors when conditionally rendering react-aria components.

😯 Current Behavior

Conditionally rendering the Overlay component from react-aria causes an Unhandled Runtime Error.

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'contains')

Call Stack
eval
node_modules/@react-aria/overlays/dist/module.js (1102:0)
Array.some
<anonymous>
MutationObserver.eval
node_modules/@react-aria/overlays/dist/module.js (1102:0)

💻 Code Sample

The code sample is a standard Nextjs setup. Relevant files are components/modal.tsx and pages/index.tsx. https://codesandbox.io/p/sandbox/react-aria-conditional-overlay-ssrprovider-7rvohm?file=%2Fpages%2Findex.tsx

🌍 Your Environment

Software	Version(s)
react-aria	3.21.0
react-stately	3.19.0
Browser	Chrome
Operating System	Macbook Pro, Ventura 13.0.1

Issue Analytics

State:
Created 10 months ago
Comments:6 (1 by maintainers)

Top GitHub Comments

4reactions

reidbarbercommented, Nov 25, 2022

I confirmed this in our Next.js test app build too. You can see it if you open the ComboBox and check the console. Not seeing it in any other React Spectrum overlays interestingly.

We can fix this with a change to node?.contains here:

https://github.com/adobe/react-spectrum/blob/168ca5a5cd53589bae6620fba1602e18240efc46/packages/%40react-aria/overlays/src/ariaHideOutside.ts#L97

but we probably need to figure out why that ref is null for a render in the first place.

0reactions

sephi-devcommented, Dec 26, 2022

Same error here with same stack 👀

Top Results From Across the Web

OverlayContainer createPortal(contents, document.body) ...

An error occurred when using OverlayContainer and Next.js in combination. ... Perhaps you could conditionally render your Overlay only when ...

usePreventScroll causes useLayoutEffect warning in Nextjs

If you don't want to dynamically import the component just to work around SSR, then render your Layout component conditionally when process.

How to fix SSRProvider warning in React Native and NextJS

Terminal/Console Error. “When server rendering, you must wrap your application in an to ensure consistent ids are generated between the client and server....

Data Fetching: getServerSideProps

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data ......

next/react-dev-overlay

A development-only overlay for developing React applications.. Latest version: 13.1.1, last published: 17 hours ago. Start using @next/react-dev-overlay in ...