React 16 - ES6 - Webpack - Error: Module is not a loader (must have normal or pitch function)

Question

I have a react app written in ES6 code.

I get this error after upgrading my react version (15.4.2 -> 16.4.0), along with react-hot-loader (1.3.1 -> 4.3.0).

This is my package.json before:

"dependencies": {
    ...
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    ...
},
"devDependencies": {
    ...
    "react-hot-loader": "^1.3.1",
    ...
}

This is my package.json after:

"dependencies": {
    ...
    "react": "^16.4.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0",
    ...
},
"devDependencies": {
    ...
    "react-hot-loader": "^4.3.0",
    ...
}

My webpack version is set to : "webpack": "^3.11.0".

My webpack config is set to:

module: {
    rules: [
      {
        test: /\.js$/,
        use: ['react-hot-loader', 'babel-loader', 'eslint-loader'],
        exclude: /node_modules/,
      },
      ...
    ],
},

After I refreash my app, I get the following error message:

Error: Module '...\node_modules\react-hot-loader\index.js' is not a loader (must have normal or pitch function)

How can I get react-hot-loader to work again?

Answer 1

TL;DR:

Remove react-hot-loader from any loaders in your Webpack config, and add react-hot-loader/babel to the plugins section of your .babelrc instead.

More thorough explanation:

As the docs in react-hot-loader v4.3.1 state,

Add react-hot-loader/babel to your .babelrc:

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

Note: Put the react-hot-loader/babel plugin to the most left of the plugins list above.

Update your Webpack config to not use the react-hot-loader plugins since Babel will do that for you:

module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader', 'eslint-loader'],
        exclude: /node_modules/,
      },
      ...
    ],
},