"Nothing hot updated" issue [Mobx?]

[AoDev]

I've been trying to switch from react hot loader (v3, cause v4 never really worked for me)

When I do an edit, Webpack seems to detect it but no changes are applied in the browser.
Sometimes I have an additional message "Nothing hot updated", sometimes not. In any case, nothing is updated.

[HMR] bundle rebuilding
client.js?9cea:250 [HMR] bundle rebuilt in 359ms
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/Public/SignIn/SignIn.js
// Sometimes: "Nothing hot updated".
process-update.js?e135:132 [HMR] App is up to date.

I have read the troubleshoot section but there are so many ways to config things that even from the docs I am not sure what I should change. I have this public repo where Webpack configs are available. https://github.com/AoDev/bard-app

The most relevant file would be https://github.com/AoDev/bard-app/blob/master/webpack.config.development.js

[AoDev]

Somehow this problem of not refreshing seems related to Mobx.

One hypothesis I have is that in certain cases which I don't fully understand yet, an observer component simply seems to not rerender. I dont know how react refresh works under the hood but maybe the component does not rerender because the observable values it's tracking haven't changed...

[AoDev]

I have this small utility function that turns a component into observer and inject some props in it.

If I use the plain component instead of turning it into an observer then I have a browser update. But of course if it's not an observer, it breaks the app since it's meant to be used with observables from Mobx.

export default function withVM(Component, VM) {
  const ObserverComponent = mobxReact.observer(Component) // <-- this breaks react-refresh

  const VMProvider = (props) => {
    const {rootStore, ...otherProps} = props
    const [vm] = React.useState(() => new VM(props))
    React.useEffect(() => () => {
      if (typeof vm.destroyVM === 'function') {
        vm.destroyVM()
      }
    })
    return <ObserverComponent vm={vm} {...otherProps} />
  }
  VMProvider.displayName = `${getComponentDisplayName(Component)}WithVM`
  return mobxReact.inject('rootStore')(React.memo(VMProvider))
}

[pmmmwh]

Related facebook/react#20417?

What version of mobx and mobx-react are you using?

[AoDev]

I have tried with multiple versions.

First time with a webpack 4 setup then upgraded everything to webpack 5.
Regarding mobx I have tried these versions:

-    "mobx": "6.0.5",
-    "mobx-react": "7.0.6",
+    "mobx": "6.1.5",
+    "mobx-react": "7.1.0",