Using `<FocusScope>` results in 'nodeToRestore' being set on Undefined (NEXT.js)

[rafzan]

🐛 Bug Report

Trying to run any useSelect example from https://react-spectrum.adobe.com/react-aria/useSelect.html results in TypeError: Cannot set properties of undefined (setting 'nodeToRestore'). Searching for this error doesn't really return anything useful anywhere.

Wrapping on SSRProvider does nothing. Commenting <FocusScope /> and running the application works, but you lose almost all functionality related to dismissing popovers.

🤔 Expected Behavior

Example code should run without problems.

😯 Current Behavior

Unhandled Runtime Error
TypeError: Cannot set properties of undefined (setting 'nodeToRestore')

Call Stack
eval
../../node_modules/@react-aria/focus/dist/module.js (393:0)
commitHookEffectListMount
../../node_modules/react-dom/cjs/react-dom.development.js (23150:0)
invokeLayoutEffectMountInDEV
../../node_modules/react-dom/cjs/react-dom.development.js (25120:0)
invokeEffectsInDev
../../node_modules/react-dom/cjs/react-dom.development.js (27351:0)
commitDoubleInvokeEffectsInDEV
../../node_modules/react-dom/cjs/react-dom.development.js (27327:0)
flushPassiveEffectsImpl
../../node_modules/react-dom/cjs/react-dom.development.js (27056:0)
flushPassiveEffects
../../node_modules/react-dom/cjs/react-dom.development.js (26984:0)
commitRootImpl
../../node_modules/react-dom/cjs/react-dom.development.js (26935:0)
commitRoot
../../node_modules/react-dom/cjs/react-dom.development.js (26682:0)
performSyncWorkOnRoot
../../node_modules/react-dom/cjs/react-dom.development.js (26117:0)
flushSyncCallbacks
../../node_modules/react-dom/cjs/react-dom.development.js (12042:0)
eval
../../node_modules/react-dom/cjs/react-dom.development.js (25651:0)

🔦 Context

I'm trying to have JSX elements inside a custom <Select> component, just like in the StyledComponents example.
But any of the examples will crash.

💻 Code Sample

Can't seem to be able create a Next.js app on codesandbox as of now.
Locally, I just ran yarn create-next-app --ts myApp, copied the files to a folder and yielded the same error.

[adamstambouli]

Just came across this too and downgrading from React 18 to 17.x helps run the example.

[devongovett]

Make sure you aren't using React StrictMode

[reidbarber]

Just confirmed it works when strict mode is off. With Next.js, you can set reactStrictMode: false in next.config.js.

[rafzan]

That was it. Thank you guys!

[yanndinendal]

Hi, should this issue be reopened? So we can track if this will be fixed one day? Thanks.

[snowystinger]

We're tracking StrictMode here #779

[char502]

Hi, any progress on this, I've created a reusable component using datepicker for this which I'm now having to abandon because my team are not comfortable with developing an App without strict mode.

At the very least, could it please be mentioned prominently in: https://react-spectrum.adobe.com/react-spectrum/getting-started.html so people are aware of it?

[reidbarber]

This was fixed by #3878 and will be included in the next release. It should be fixed in the nightly build now.

[char502]

@reidbarber I'm still getting the same problem with datepicker

[reidbarber]

@char502 I just confirmed locally that this is fixed in Next.js with the nightly build. Be sure you're using the nightly release in your package.json. If there is still an issue, feel free to post more information about your setup.

[char502]

@reidbarber I think I put this in the wrong group, I'm using CRA not Next.js, is there a CRA group reporting this problem and is it fixed there?

[reidbarber]

@char502 This fix is related to React Strict Mode, so it applies to both CRA and Next.js when they have strict mode enabled.