反应16 - ES6 - Webpack -错误:模块不是装载机(必须有正常或螺距功能)

Question

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

在升级我的react版本(15.4.2 -> 16.4.0)以及(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/,
      },
      ...
    ],
},

在我重新使用我的应用程序之后，我会得到以下错误消息：

错误:模块‘.\node_modules\react-热加载程序\index.js’不是加载程序(必须具有正常或螺距函数)

我怎么才能让反应热烈的装载机重新开始工作呢？

Answer 1

TL;DR: 从Webpack配置中的任何加载程序中删除react-hot-loader，然后将react-hot-loader/babel添加到.babelrc的插件部分。

更详细的解释：

作为react-hot-loader v4.3.1 状态中的文档，

将react-hot-loader/babel添加到.babelrc中

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

注意:将react-hot-loader/babel插件放在上面插件列表的最左边。

更新Webpack配置，不要使用react-hot-loader插件，因为Babel会为您提供这样的功能：

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