Search code examples
javascriptreactjsmobx-react

react + mobx: "Invalid hook call" in 1 of my 2 machines

I've been following this Mobx tutorial:

The code works fine on 1 of my 2 machines. On the other machine, I get an error message when I run "npm start":

    Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

    Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (react.development.js:1622:1)
    at useObserver (useObserver.ts:29:1)
    at observerComponent (observer.ts:104:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at updateSimpleMemoComponent (react-dom.development.js:19425:1)
    at updateMemoComponent (react-dom.development.js:19284:1)
    at beginWork (react-dom.development.js:21673:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

Any idea why this is happening? The machines have almost identical setups...

  • npm 8.13.2 (doesn't work on this one)
  • npm 8.11.0 (works on this machine)

Both machines have the same version for the following:

  • react 18.2.0
  • mobx-react 7.5.2
  • mobx-react-lite 3.4

The error goes away as long as I don't wrap the functions using observer.

Solution

  • Somehow things work fine after uninstalling and reinstalling mobx

    npm uninstall mobx-react
npm install mobx-react --save
npm audit fix