First of all, I'd like to know if react-refresh is even supposed to work properly with data store solutions like Mobx?
I noticed that some of my components update properly while others don't. I am trying to track down why. I use react-refresh-webpack-plugin
EDIT 1:
It seems that the components that won't update are the components that are using mobx-react inject with observer, like: inject('rootStore')(observer(MyComponent))
I do get the console logs of an update:
[HMR] bundle rebuilding
client.js?9cea:250 [HMR] bundle rebuilt in 530ms
process-update.js?e135:51 [HMR] Checking for updates on the server...
process-update.js?e135:125 [HMR] Updated modules:
process-update.js?e135:127 [HMR] - ./src/application/App/Private/UserProfile/UserProfile.js
process-update.js?e135:132 [HMR] App is up to date.
But there is no update in the page.
My libs versions:
- react: 16.13.1
- mobx: 6.0.1
- mobx-react: 7.0.0
- webpack: 4.44.2
- webpack-dev-middleware: 3.7.2
- webpack-hot-middleware: 2.25.0
- @pmmmwh/react-refresh-webpack-plugin: 0.4.2
Context:
- I am updating from react-hot-loader v3.
- I could never get ROL v4 work properly with mobx, same kind of issue (some components update, some don't)
I am switching to react-refresh due to ROL v3 not being maintained anymore and will be incompatible with newer React versions.