BabelDetectComponent logic doesn't work for consumers about react-refresh-webpack-plugin HOT 5 CLOSED

I suspect this is also the cause of #11.

from react-refresh-webpack-plugin.

First, thank you so much for your work on this project. I'm so excited to use it! 💙

While setting it up, I noticed what I think is an issue with the current logic around BabelDetectComponent.

The detection works by checking whether a "component" in BabelDetectComponent.js (part of the react-refresh-webpack-plugin aka RRWP runtime) was transformed by react-refresh/babel. Note that, when RRWP is installed by a consumer, BabelDetectComponent.js will end up in node_modules/@pmmmwh/react-refresh-webpack-plugin/src/runtime/.

The issue is that, in general, the react-refresh/babel transform shouldn't be applied to node_modules/. (For example, the example in the readme applies the transform to a webpack rule that excludes /node_modules/.) Unless a RRWP consumer has their build configured incorrectly, BabelDetectComponent.js will never get transformed, and the "refresh check" check will always fail.

The example in this repo happens to work because it uses a local version of the runtime so the runtime modules don't match the loader exclusion rule.

For now, I can work around this by setting disableRefreshCheck: true.

Yes - I am fully aware of this. #17 tries to fix this by making the error non-blocking, but unfortunately I cannot think of a robust way to detect a Babel transform being applied. I would appreciate if anyone have any ideas on that.

from react-refresh-webpack-plugin.

Yes - I am fully aware of this. #17 tries to fix this

Sorry, I checked for issues but not PRs.

I would appreciate if anyone have any ideas on that.

Haven't written a webpack plugin so I don't know if this is possible, but could the plugin inject the content of BabelDetectComponent.js directly into the consumer's webpack entry point module before it gets processed by loaders, and then later check whether that module was transformed to reference the runtime?

Or is there a way for the plugin to fake the existence of a module at a local path (./BabelDetectComponent.js relative to the entry file), and inject an import to that path in the entry file?

from react-refresh-webpack-plugin.

Could the plugin inject the content of BabelDetectComponent.js directly into the consumer's webpack entry point module before it gets processed by loaders, and then later check whether that module was transformed to reference the runtime?

I would rather not do it that way - content injection will most likely screw up users' setup and also source maps.

Or is there a way for the plugin to fake the existence of a module at a local path (./BabelDetectComponent.js relative to the entry file), and inject an import to that path in the entry file?

Symlinks could work, but users will have to ignore that file or we have to somehow delete it, then it would raise the problem of false-positives by deleting users' files.

For reference, I am testing to use @babel/core to grab the config and see if it is possible to check what plugins have been injected. I have been quite fully occupied by work the past week, so I can't guarantee I can sort this out quickly.

from react-refresh-webpack-plugin.

#60 makes this obsolete because the checking have been removed.

from react-refresh-webpack-plugin.