reactjs - 模块构建失败：TypeError：无法读取未定义的属性“babel”

Question

我刚回到我 2 年前做的一个 React 项目，并试图让它在本地工作/弄清楚我是如何让它工作的。我在运行时收到以下错误消息webpack-dev-server。

Entrypoint main = transformed.js
[./app/index.js] 196 bytes {main} [built] [failed] [1 error]

ERROR in ./app/index.js
Module build failed: TypeError: Cannot read property 'babel' of undefined
    at Object.module.exports (/Users/mattharris/dscovr/node_modules/babel-loader/lib/index.js:103:35)
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] 866 bytes {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
        + 1 hidden module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-app@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 2

包.json

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-1": "^6.22.0",
    "express": "^4.16.3",
    "html-parser": "^0.11.0",
    "lodash": "^4.17.10",
    "mobx": "^3.1.0",
    "mobx-react": "^4.1.0",
    "radium": "^0.24.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-html-parser": "^2.0.2",
    "react-slick": "^0.23.1",
    "superagent-jsonp": "^0.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.1.8",
    "babel-preset-react": "^6.22.0",
    "html-webpack-plugin": "^3.1.0",
    "superagent": "^3.8.3",
    "webpack": "^4.8.2",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js

   var HTMLWebpackPlugin = require('html-webpack-plugin');
    var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
      template: __dirname + '/app/index.html',
      filename: 'index.html',
      inject: 'body'
    });

    module.exports = {
      entry: __dirname + '/app/index.js',
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query:
              {
                presets:['es2015','react']
              }
          }

        ]
      },
      output: {
        filename: 'transformed.js',
        path: __dirname + '/build'
      },
      node: { fs:'empty',
              net: 'empty',
              tls: 'empty',
              child_process: 'empty'
            },
      plugins: [HTMLWebpackPluginConfig]
    };

.babelrc

{
presets: [
  'react',
  'es2015',
  'stage-1'
],
  plugins: ["transform-decorators-legacy"]
}

有任何想法吗？

标签： reactjsbabel-loader