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

Question

我有一个用 ES6 代码编写的 React 应用程序。

升级我的 React 版本 (15.4.2 -> 16.4.0) 以及 react-hot-loader (1.3.1 -> 4.3.0) 后出现此错误。

这是我之前的package.json：

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

这是我的 package.json 之后：

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

我的 webpack 版本设置为："webpack": "^3.11.0".

我的 webpack 配置设置为：

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

刷新我的应用程序后，我收到以下错误消息：

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

如何让 react-hot-loader 重新工作？

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.

更详尽的解释：

作为 react-hot-loader v4.3.1 中的文档 state,

将 react-hot-loader/babel 添加到您的 .babelrc:

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

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

更新您的 Webpack 配置以不使用 react-hot-loader 插件，因为 Babel 会为您完成：

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

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

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

javascript

reactjs

webpack

babeljs

react-hot-loader