react-spectrum: Using `` results in 'nodeToRestore' being set on Undefined (NEXT.js)

🐛 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.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 26 (11 by maintainers)

Most upvoted comments

Make sure you aren’t using React StrictMode

+10

devongovett on Sep 14, 2022

We’re tracking StrictMode here https://github.com/adobe/react-spectrum/issues/779

snowystinger on Oct 3, 2022

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

reidbarber on Sep 14, 2022

https://www.npmjs.com/package/@internationalized/date?activeTab=versions

but I’m not sure what the type error is that you’re seeing. If there is one, would you mind opening a separate issue?

snowystinger on Feb 17, 2023

@snowystinger thanks for taking another look and for confirming re the date hooks, I appreciate it, I’m having to go with another option for now but I will take another look when I get the chance

char502 on Feb 9, 2023

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

char502 on Feb 7, 2023

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?

char502 on Feb 7, 2023