React-hot-loader: Super expression must either be null or a function, not undefined

[apieceofbart]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

What you are reporting:
I am either reporting a bug or documentation is misleading.

Expected behavior

What you think should happen: I should be able to build a production version of my app with react-hot-loader and RHL should not be executed in production as it says in docs.

Actual behavior

What actually happens:

I have created simple setup using webpack 4 and react-hot-loader 4. When I run my build script (which is just a standard webpack command) and run app in browser I receive error from RHL:
Uncaught TypeError: Super expression must either be null or a function, not undefined

This error goes away when I remove react-hot-loader/babel from plugins entry in .babelrc. This leads me to believe I should actually have a separate babel setup for production and development.

Environment

React Hot Loader version: 4.0.0

Run these commands in the project folder and fill in their results:

1. node -v: 8.7.0
2. npm -v: 5.5.1

Then, specify:

1. Operating system: Ubuntu 16.04 LTS
2. Browser and version: Chrome 65

Reproducible Demo

Please take the time to create a new project that reproduces the issue.

You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.

Push to GitHub and paste the link here.
https://github.com/apieceofbart/react-hot-loader-webpack-4-example

[theKashey]

I'll double check.

[apieceofbart]

Thanks, maybe I'm missing something. If you need any help, let me know.

[theKashey]

So the problem - React.Component is undefined.
The root of the problem - React-Hot-Loader/babel patches React, adding React-Hot-Loader in the beginning. And requiring React...
The root cause - one have to ask babel-loader to not touch node_modules, ie add exclude: /node_modules/ in your webpack.conf.

Actually - I've fixed this a few months ago, but problem returns.

[theKashey]

Yeah, this is due migration to rollup. Currently we could not target "small" internals, not bound to any external files, and creating a loops in case of babel in node_modules.

@neoziro - how you recon - does it worth to went back to simple structure as we have before?

[gregberge]

I think we can solve it using Rollup, but I do not see what is the source of the problem. Can you give me the link to the PR you previously solved it with or describe what we need?

[theKashey]

“The fix” was simply - if Babel plugin could not register anything - it will not add any extra code.
That prevent webpack internals from being patched by RHL. Just by luck, you know.
But the goal is still the same - the code we inject in Babel should not have any side effects. Even require external modules.
Ps: and currently RHL will inject itself into RHL, but webpack could handle it.

[czebe]

We're experiencing the same problem while setting up a new webpack4 build config.

[theKashey]

Easiest possible solution - filter out all node_modules inside RHL's babel plugin.

[theKashey]

And that's is the only thing we could and should do. Rollup is not the root cause - not only AppContainer is using "external" modules.

[apieceofbart]

@theKashey I'm sorry but I don't see this fixing my example even when installing RHL ver 4.3.3

[theKashey]

🤷‍♂️ I'll double check then.

[apieceofbart]

@theKashey Btw, I don't this is necessarily a bug - I think it's ok to tell people RHL only makes sense in development so they should remove it from production code. I think you just need to communicate it clearly in docs.

[theKashey]

I thought that was clear, and it should remove itself when environment is not dev or hmr is not active.

[EddyVinck]

I was also getting this error. I noticed that removing "react-hot-loader/babel" from my .babelrc file's plugins got rid of the error, however this removed my HMR which is obviously not ideal.

I then checked the documentation for babel-loader and noticed you can add plugins in your Webpack config as well.

So I tried adding the plugin in my Webpack config...

// webpack.config.js
{
   test: /\.jsx?$/,
   loader: 'babel-loader',
   exclude: '/node_modules/',
+  options: {
+    plugins: ['react-hot-loader/babel'],
+  },
},

And this worked!
I can now have HMR when using the Webpack development server and react-hot-loader is no longer included in my production build (it is not included in webpack.prod.js) which gets rid of the error!

[apieceofbart]

@EddyVinck yeah, that's what I was trying to write in issue description. I think you could also leave it in .babelrc just mark it as "dev" setting only:

{
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ],
    }
  }
}

[creatorrr]

Could be caused by a circular dependency. Similar error and response from @ljharb on this issue

That usually happens when you're extending something that's a circular dependency. I'd recommend updating enzyme first, before upgrading React - that way you'll know for sure which thing caused the breakage.