Skip to content

Doesn't work in React 18 #2

Description

@derwaldgeist

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)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions