$RefreshReg$ is not defined with ChildCompiler usage

This is a follow up to https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/36#issuecomment-665036157.

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 🤔

[sshmyg]

Solution for storybook

Create file .storybook/preview-head.html:

<script>
  // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213
  window.$RefreshReg$ = () => {};
  window.$RefreshSig$ = () => () => {};
</script>

Storybook support fast refresh since 6.1 version 😉 Add this to .storybook/main.js

reactOptions: {
    fastRefresh: true,
  },

[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