Apps: WebpackPluginServe HMR not working

[rossbulat]

HMR (hot module reloading) is not working on my dev build.

Consulted with https://libraries.io/npm/webpack-plugin-serve, adding hmr: true in new WebpackPluginServe within apps/packages/apps/config.webpack.js with no effect.

Unsure why this is the case - css-loader is also clearly configured but no CSS updates are happening either.

Interested if anyone else's HMR is not working, or whether I am experiencing an edge case.

[jacogr]

You beat me to logging it. It is due to using the serve plugin introduced recently - it just doesn’t seem to reload in changes. (And probably a simple config issue for it)

[jacogr]

It may be the order - serve plugin last?

[rossbulat]

serve plugin last?

Still no joy.

[jacogr]

Yes, tried as well. (And took a brief look at some samples, nothing _looks_ obviously missing). It should indeed be last, but what else if missing, have no idea atm. Will have to circle back soon-ish after the critical issues are out of the way.

[Stefie]

It could also be a problem with the plugin itself or one of the dependencies. I'm getting this error message when I'm trying to save changes.

[jacogr]

Exactly the same issue. It is somewhere in the way HMR is being used and it just doesn't seem to know what to do. The order is def significant (it should be last, not first), but as @rossbulat said, that gets us closer, but doesn't solve it.

[Stefie]

I figured out what the cause of the bug was.
HMR needs a root component to identify the outer wrapper of the application.
The root component in /apps/ isn't a react component but a function, that's the 0 on chain[6] in my screenshot. HMR just continues to bubble up until it doesn't find a component to reload anymore.
https://github.com/shellscape/webpack-plugin-serve/blob/74af036b42d1da94a7b4962ee1f45af31dc654bc/recipes/react-ssr/client/index.js#L11

And secondly we need to either write our own module.hot.accept('./Apps', () => {}) function or wrap ./Apps, the outermost component , into the hot loader as seen here: https://github.com/shellscape/webpack-plugin-serve/tree/74af036b42d1da94a7b4962ee1f45af31dc654bc/recipes/react/src

I fixed the error by moving the createApp() function, turning into a React.Component and wrapping <Apps /> in hot from the react-hot-loader module.

[rossbulat]

HMR is still not working on my end, can anyone confirm that it is working?

[Stefie]

It's working for me with the latest master, I just tested it in Chrome and Firefox.
Try removing the node_modules folder and the yarn.lock file from the root ./apps and then run yarn install again

rm -rf node_modules
rm yarn.lock
yarn install

[polkadot-js-bot]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.