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

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:

node -v: 8.7.0
npm -v: 5.5.1

Then, specify:

Operating system: Ubuntu 16.04 LTS
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

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 2
Comments: 16

Commits related to this issue

fix: RHL babel plugin will ignore react and react-hot-loader, fixes #900 — committed to gaearon/react-hot-loader by theKashey 6 years ago
fix: RHL babel plugin will ignore react and react-hot-loader, fixes #900 — committed to gaearon/react-hot-loader by theKashey 6 years ago
fix: RHL babel plugin will ignore react and react-hot-loader, fixes #900 — committed to gaearon/react-hot-loader by theKashey 6 years ago
Merge pull request #1003 from gaearon/webpack4-babel-cycle fix: RHL babel plugin will ignore react and react-hot-loader, fixes #900 — committed to gaearon/react-hot-loader by theKashey 6 years ago

Most upvoted comments

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

czebe on Mar 25, 2018

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!

EddyVinck on Sep 30, 2018

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

theKashey on Jul 2, 2018

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 on Mar 20, 2018