Webpacker: `node_modules` rule causes error when using `react-refresh/babel` plugin.

Created on 25 Jun 2020  路  3Comments  路  Source: rails/webpacker

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/babel plugin to process node_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.

All 3 comments

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

christianrojas picture christianrojas  路  3Comments

pioz picture pioz  路  3Comments

towry picture towry  路  3Comments

eriknygren picture eriknygren  路  3Comments

FrankFang picture FrankFang  路  3Comments