Not working with react-redux hooks API

[irudoy]

Invalid hook call. Hooks can only be called inside of the body of a function component.
    at /esx-repro-rr/node_modules/react-dom/cjs/react-dom-server.node.development.js:1136:26
    at resolveCurrentlyRenderingComponent (/esx-repro-rr/node_modules/react-dom/cjs/react-dom-server.node.development.js:1139:5)
    at Object.useContext (/esx-repro-rr/node_modules/react-dom/cjs/react-dom-server.node.development.js:1284:3)
    at Object.useContext (/esx-repro-rr/node_modules/esx/lib/hooks/compatible.js:51:21)
    at useContext (/esx-repro-rr/node_modules/react/cjs/react.development.js:1633:21)
    at useReduxContext (/esx-repro-rr/node_modules/react-redux/lib/hooks/useReduxContext.js:31:44)
    at useSelector (/esx-repro-rr/node_modules/react-redux/lib/hooks/useSelector.js:121:28)
    at A (/esx-repro-rr/app.esx.js:19:16)
    at renderComponent (/esx-repro-rr/node_modules/esx/index.js:516:18)
    at resolveChildren (/esx-repro-rr/node_modules/esx/index.js:956:25)

Repro: https://github.com/irudoy/esx-repro-rr

[davidmarkclements]

looking into this

[irudoy]

any news?

[davidmarkclements]

so the issue in this specific case is the package-lock.json enforcing multiple versions of React

if you remove the package-lock (and rm -fr node_modules) reinstall it will run but create a different error:

/esx-repro-rr/node_modules/esx/lib/hooks/compatible.js:51
    : reactDispatcher.useContext(context)
                      ^

TypeError: Cannot read property 'useContext' of null
    at Object.useContext (/esx-repro-rr/node_modules/esx/lib/hooks/compatible.js:51:23)
    at useContext (/esx-repro-rr/node_modules/react/cjs/react.development.js:1493:21)
    at useReduxContext (/esx-repro-rr/node_modules/react-redux/lib/hooks/useReduxContext.js:27:44)
    at useSelector (/esx-repro-rr/node_modules/react-redux/lib/hooks/useSelector.js:114:28)
    at A (/esx-repro-rr/app.esx.js:19:16)
    at renderComponent (/esx-repro-rr/node_modules/esx/index.js:523:18)
    at resolveChildren (/esx-repro-rr/node_modules/esx/index.js:964:25)
    at Object.childPropsGetter [as children] (/esx-repro-rr/node_modules/esx/index.js:533:27)
    at Provider (/esx-repro-rr/node_modules/react-redux/lib/components/Provider.js:21:23)
    at Object.renderComponent (/esx-repro-rr/node_modules/esx/index.js:523:18)

Which needs to be addressed separately.

The reason for the failure is that hooks/compatible.js loads whichever react is available to esx and then overrides internals to deal with these hooks constraints. If there's two versions of react in the tree, then there's a chance that it will override the react instance which isn't being used in the actual application. Unfortunately package-lock files make the chances of two react instances being installed more likely.

The reason for the new failure, I think, is that react internals have changed slightly and we need to sync the way we override to make this work.

[prograhammer]

Cannot read property 'useContext' of null

I encountered this when using a context provider and a child inside with useContext.

After a big deep dive today, I was starting to conclude this as well:

The reason for the new failure, I think, is that react internals have changed slightly and we need to sync the way we override to make this work.

[catamphetamine]

On my machine, Next.js didn't work if, in Windows Terminal, the disk letter (for example, C:) of the "current directory" was written in lowercase (as c: in this example).

After I changed the current directory from c:\dev\project to C:\dev\project, the error went away.

Source: vercel/next.js#7626 (comment)