Question

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

升级我的反应版本（15.4.2 - ＆gt; 16.4.0）以及react-hot-loader（1.3.1 - ＆gt; 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": "^3.11.0"。

我的webpack配置设置为：

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

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

错误：模块＆＃39; ... \ node_modules \ react-hot-loader \ index.js＆＃39;不是装载机（必须具有正常或俯仰功能）

如何让react-hot-loader再次运行？

Answer 1

<强> TL; DR：

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

更全面的解释：

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

将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/,
      },
      ...
    ],
},

React 16 - ES6 - Webpack - 错误：模块不是加载器（必须具有正常或音调功能）

1 个答案: