How to make react-refresh auto-update components properly with mobx?

453 views Asked by At

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.

0

There are 0 answers