When using any observer method, react throws invalid hook call error (electron-webpack)

[danielbischoff]

I try to build an application with electron-webpack, mobx, react and mobx-react-lite.
Hooks work with this setup.
But when I wrap a component using hooks in an observer, or use any of the other methods (useObserver, <Observer />) react fails with an "Invalid hook call" error.

When you remove the observer from the component everything works fine.
So it seems like it is not a problem with electron-webpack and hooks.

I created a basic application with this error.

https://github.com/danielbischoff/electron-webpack-quick-start

(you can see my changes in the latest commit)

To run this application

• yarn install
• yarn dev

Uncaught Error: 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
    at resolveDispatcher (/Users/danielbischoff/Documents/projects/electron-webpack-quick-start/node_modules/react/cjs/react.development.js:1590)
    at Object.useState (/Users/danielbischoff/Documents/projects/electron-webpack-quick-start/node_modules/react/cjs/react.development.js:1618)
    at useForceUpdate (/Users/danielbischoff/Documents/projects/electron-webpack-quick-start/node_modules/mobx-react-lite/dist/index.js:143)
    at useObserver (/Users/danielbischoff/Documents/projects/electron-webpack-quick-start/node_modules/mobx-react-lite/dist/index.js:165)
    at wrappedComponent (/Users/danielbischoff/Documents/projects/electron-webpack-quick-start/node_modules/mobx-react-lite/dist/index.js:211)
    at renderWithHooks (react-dom.development.js?61bb:16260)
    at updateFunctionComponent (react-dom.development.js?61bb:18347)
    at updateSimpleMemoComponent (react-dom.development.js?61bb:18285)
    at updateMemoComponent (react-dom.development.js?61bb:18188)
    at beginWork$1 (react-dom.development.js?61bb:20248)

[danielkcz]

Thanks for filling the issue with proper reproduction. It is indeed strange behavior.

It is crashing here and React dispatcher is not set at that point for some reason. Almost looks like the Electron itself would have multiple copies of React in memory, but that's a long shot.

mobx-react-lite/src/utils.ts

Line 10 in 8e60bea

const [, setTick] = useState(0)

At this point, it's probably better to create an issue with React itself. I don't think we are doing anything wrong here.

[danielbischoff]

Hi Fredy,
thank you for taking your time to look at this issue.
What is really strange is that hooks work without observer. I have also added a button to increment the number produced by useState() and it works.

So I would guess, that point 1 and 2 are not the problem.

But when I add the observer or use any other method (useObserver, <Observer />) it breaks.
Is there a chance, that using observer converts it into a class component or anything like that?
Does mobx-react-lite work with hot module reloading?

It is really strange behavior, I agree.

[danielkcz]

Does mobx-react-lite work with hot module reloading?

Not sure really, personally I don't use HMR because it's usually root of weird problems. However, I don't think it's this case because I tried yarn dist and behavior is the same (0 is not printed on screen).

I tried to debug more deeply into React. I am no expert, but for some reason, the react-dom is using a different instance of react and this is the problem because they are accessing a global variable to make everything work. It's definitely strange that regular useState call works just fine.

Sorry, it's out of my expertise. React team might have some ideas hopefully, so please open the issue with them.

[danielbischoff]

I switched from electron-webpack to electron forge starter template and it works now. So I think the problem has sth. to do with electron-webpack.
I will close this issue, as it has nothing to do with mobx-react-lite.

Thank you for your help!

[altschuler]

I fixed this issue by applying this: react-dnd/react-dnd#1566 (comment)

Basically add this to package.json:

"electronWebpack": {
    "renderer": {
        "webpackConfig":  "webpack.renderer.additions.js"
    }
},

And add this to the file webpack.renderer.additions.js:

module.exports = {
    externals: ['react', 'react-dom'],
};