react + mobx：我的 2 台机器中的 1 台出现“无效的钩子调用”

Question

I've been following this Mobx tutorial:

• Tutorial: https://blog.logrocket.com/introduction-to-mobx-with-react/
• Code: https://github.com/limistah/mobx-react

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 .

Answer 1

Somehow things work fine after uninstalling and reinstalling mobx

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