$RefreshReg$ is not defined with ChildCompiler usage

See original GitHub issue

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 🤔

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:46 (19 by maintainers)

github_iconTop GitHub Comments

13reactions
sshmygcommented, Jan 27, 2021

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,
  },
12reactions
sshmygcommented, Aug 28, 2020

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

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

ReferenceError: $RefreshReg$ is not defined - Stack Overflow
In my case, this error was happening when overwriting Webpack's mode option. After removing the line below I stopped receiving the error.
Read more >
[Solved]-ReferenceError: $RefreshReg$ is not defined-Reactjs
Another thing I'm doing is I only import libraries at the top and any code that is used by both main and the...
Read more >
论如何填满webpack5 升级“天坑” - 一步一个 - SegmentFault
Uncaught TypeError: Cannot read property 'locals' of undefined ... $RefreshReg$ is not defined with ChildCompiler usage ...
Read more >
I am unable to start or build the application in the course React ...
Html Webpack Plugin: Error: Child compilation failed: Module.createRequire is not a function. child-compiler.js:169 childCompiler.
Read more >
TypeError: this[NS] is not a function at childCompiler.runAsChild
replace(/public/, "") } },{ test:/\.css$/, exclude: /(node_modules)/, include: /(src)/, use: [ "style-loader",MiniCssExtractPlugin.loader, 'css ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found