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

Posted 2023-03-23

【中文标题】React 16 - ES6 - Webpack - 错误：模块不是加载器（必须具有正常或俯仰功能）

【英文标题】：React 16 - ES6 - Webpack - Error: Module is not a loader (must have normal or pitch function)

【发布时间】：2018-11-19 19:23:23

【问题描述】：

我有一个用 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/,
      ,
      ...
    ],
,

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

错误：模块 '...\node_modules\react-hot-loader\index.js' 不是加载器（必须具有正常或俯仰功能）

如何让 react-hot-loader 再次工作？

【参考方案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/,
      ,
      ...
    ],
,