$RefreshReg$ is not defined with ChildCompiler usage

[donaldpipowitch]

This is a follow up to #36 (comment).

I created a demo where you can reproduce the error: https://github.com/donaldpipowitch/react-refresh-webpack-plugin-RefreshSig-bug

---

It looks to happen because of a child compiler. I use html-webpack-plugin to prerender a React component into an index.html file. (This will render some placeholder graphics in our real app until the app has loaded completely.) Normally the template you use for html-webpack-plugin can use all the loaders you have configured for the rest of your source code which is quite convenient. But I guess we'd need to disable ReactRefreshWebpackPlugin for this somehow 🤔

[pmmmwh]

This is not really related to enabling/disabling this plugin - it's more about the Babel plugin.

For example, if you intentionally exclude react-refresh/babel from being able to process the file you'd import from the html template your setup would be working fine. This is more of a "limitation" of what you can do with templating - html-webpack-plugin inherits all the loaders but would not clone the plugins used, and does not allow you to add plugins to the pipeline without using their custom hooks (I'm not sure what is possible with them).

The solution to this would be to exclude your entire code path from being processed by react-refresh/babel (for example you can use another instance of babel-loader). Yes it is more config and it might be potentially expensive (depending on the project) but for stuff like that I think it warrants a separate Babel config: it is outside of your main bundle, served and consumed differently, and you don't really need HMR for it?

[gaearon]

Shouldn’t prerendering be done in production mode?

[pmmmwh]

Shouldn’t prerendering be done in production mode?

From my understanding this is more of an "edge" case - this is using React as a "templating language" and injecting the created DOM tree into a template (kinda like how SSG works) during compilation to set default content of the index.html.

I see a general form of this problem: there's some code within a repo yields a separate "branch" of execution (e.g. WebWorkers, Electron Prerender) controlled by some other plugin and that code is stored in close proximity with the other source code (since most of the time Babel configuration can be shared and will be shared). This idea fails when we apply react-refresh/babel, because implicitly it requires the Webpack plugin to transform it's generated code to work, but more often than not these code "branches" does not allow plugin execution (they might inherit the loader chain though).

[donaldpipowitch]

Shouldn’t prerendering be done in production mode?

It's partially prerendering. I basically just use html-webpack-plugin for "Output Management". But I don't want to duplicate styles and want render something like placeholder layout. For that I require and render some components in my index.html template.

Not sure if this needs to be fixed on the side of html-webpack-plugin. There doesn't seem to be a way to override loaders, so they aren't inherited.

[pmmmwh]

Not sure if this needs to be fixed on the side of html-webpack-plugin. There doesn't seem to be a way to override loaders, so they aren't inherited.

Yea I would agree that this is a limitation of html-webpack-plugin. Not sure this is something that they should support because opening a new hole would introduce quite a bit of complexity to both the maintainers and the users.

I think the workaround I've highlighted above (to use separate Babel configs) is the best way for you to move forward.

I'll add a section to the troubleshooting docs in #189 to talk about how to handle cases like this that introduces indirection.

[donaldpipowitch]

to use separate Babel configs

I'm not sure I know, how to do that. As html-webpack-plugin inherits all loaders also the Babel configs will be inherited, I guess. I can't use include/exclude patterns as well, because my HTML file and my application code potentially import the same files. ☹️ I fear I need to create some meta.json which contains all my generated chunk names and I'll need to generate the HTML file in a completely separate process/step. :/

[pmmmwh]

Yes, I do understand the frustration. It is an unfortunate constraint.

Though, I think you might be able to workaround this:

window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => () => {};

It is quite a hack, but for your purposes (i.e. code paths where HMR does not make sense share files with code paths where HMR is useful) it would suffice.

[sshmyg]

I resolved the problem in such a way:

• move fast-refresh plugin from babelrc to babel-loader
• include it to loader and to plugins via additional argument

[pmmmwh]

I resolved the problem in such a way:

* move fast-refresh plugin from babelrc to babel-loader

* include it to loader and to plugins via additional argument

This actually seems quite a smart way of handling it! I don't have time to test it out, but env.FAST_REFRESH would be undefined when using child compilers?

[sshmyg]

I resolved the problem in such a way:

* move fast-refresh plugin from babelrc to babel-loader

* include it to loader and to plugins via additional argument

This actually seems quite a smart way of handling it! I don't have time to test it out, but env.FAST_REFRESH would be undefined when using child compilers?

Hi, yes it's undefined for any others scripts, and webpack doesn't include it to babel config. In other case it extend babel.config.js with options from webpack config.

[pmmmwh]

Hi, yes it's undefined for any others scripts, and webpack doesn't include it to babel config. In other case it extend babel.config.js with options from webpack config.

I'll test it later today/tomorrow and add this to the new troubleshooting guide if I don't hit any issues!

[donaldpipowitch]

@sshmyg I tried it in my example here, but it doesn't seem to work. Any idea why?

[akphi]

@pmmmwh do you think this workaround (if it does work) applicable to #24 ?

[sshmyg]

@sshmyg I tried it in my example here, but it doesn't seem to work. Any idea why?

I don't import babel config inside webpack. Babel loader should extend it by itself.