The current implementation of the node_modules rule causes a runtime error in the browser when used alongside react-refresh/babel, that has already been identified, here: https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/92
My guess is that you've included the
react-refresh/babelplugin to processnode_modules. This will break because some code (as used by Webpack and WDS) will inevitably run before the plugin.
_Originally posted by @pmmmwh in https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/92#issuecomment-628960771_
Essentially, we need to allow a few more files to not be processed by babel-loader.
This can be fixed by changing this:
(https://github.com/rails/webpacker/blob/master/package/rules/node_modules.js#L8)
https://github.com/rails/webpacker/blob/d099e066931b14277726fe83339332ddd25a50ab/package/rules/node_modules.js#L8
to this:
exclude: /(?:@?babel(?:\/|\\{1,2}|-).+)|regenerator-runtime|core-js|^webpack$|^webpack-assets-manifest$|^webpack-cli$|^webpack-sources$|^@rails\/webpacker$/|sockjs|url\.js|events\.js/,
I just threw this together really fast, so I'm not entirely sure about the consequences of not passing those 3 libs thru the babel-loader, but they seem to work fine on my machine. If we're OK with this approach, I'd be happy to whip up a PR.
_Edit_: It seems like the files that we need to ignore change based upon your webpack version, so this might not be all that simple.
I'm pretty certain that this issue should have been solved in 0.4.0 betas of the Webpack plugin - can you test it out?
Feel free to open issues there if it still fails for you - provide a repro and I'll look into it.
@seanders, this issue should be fixed via https://github.com/rails/webpacker/pull/2624
@pmmmwh this problem is no more reproducible with latest version of plugin.
Can't thank you enough for your time and effort!