I'd love to use this component, but I couldn't make it work in React 18.3.1, which we're currently using.
I'm getting this error stack:
installHook.js:1 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem. Error Component Stack
at LanguageSelector (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:136816:23)
at div (<anonymous>)
at modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:56481:23
at ErrorBoundary (ErrorBoundary.js:8:5)
at div (<anonymous>)
at modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:55635:27
at div (<anonymous>)
at div (<anonymous>)
at modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:55684:23
at div (<anonymous>)
at Transition (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:82394:30)
at modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:55525:24
at DialogTransition (<anonymous>)
at modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:80113:24
at modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:55159:23
at Modal (Modal.tsx:23:5)
at GenerateExperience (GenerateExperience.tsx:36:11)
at Experiences (Experiences.tsx:21:49)
at Route (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:85229:29)
at AppLayout (AppLayout.js:9:12)
at AppContent (AppContent.tsx:42:19)
at App (App.tsx:10:21)
at Route (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:85229:29)
at Switch (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:85431:29)
at Router (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:84848:30)
at ConnectedRouter (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:86165:7)
at ConnectedRouterWithContext (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:86289:25)
at ConnectFunction (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:63138:22)
at MainRoutes (<anonymous>)
at LocaleSwitch (LocaleSwitch.js:5:25)
at LocaleProvider (LocaleProvider.js:9:27)
at Provider (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:62845:20)
at GlobalStateProvider (GlobalStateProvider.js:6:32)
at AppContainer (<anonymous>)
overrideMethod @ installHook.js:1
resolveDispatcher @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:138188
process.env.NODE_ENV.exports.useState @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:138933
LanguageSelector @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:136860
renderWithHooks @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:26767
mountIndeterminateComponent @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:31384
beginWork @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:32907
callCallback @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:15445
invokeGuardedCallbackDev @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:15494
invokeGuardedCallback @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:15558
beginWork$1 @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:38771
performUnitOfWork @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:37877
workLoopSync @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:37786
renderRootSync @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:37754
performSyncWorkOnRoot @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:37405
flushSyncCallbacks @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:23323
flushSyncCallbacksOnlyInLegacyMode @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:23302
batchedUpdates$1 @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:37468
batchedUpdates @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:15272
dispatchEventForPluginEventSystem @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:20568
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:17746
dispatchEvent @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:17738
dispatchDiscreteEvent @ modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:17711Understand this error
modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:138933 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at process.env.NODE_ENV.exports.useState (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:138933:33)
at LanguageSelector (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:136860:39)
at renderWithHooks (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:26767:18)
at mountIndeterminateComponent (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:31384:13)
at beginWork (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:32907:16)
at HTMLUnknownElement.callCallback (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:15445:14)
at Object.invokeGuardedCallbackDev (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:15494:16)
at invokeGuardedCallback (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:15558:31)
at beginWork$1 (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:38771:7)
at performUnitOfWork (modules.js?hash=ec136403450d211dc4694d907ca79c71a1c039d7:37877:12)
I'd love to use this component, but I couldn't make it work in React 18.3.1, which we're currently using.
I'm getting this error stack: