TypeError: Cannot read property 'babel' of undefined when going from v7 to v8

I’m submitting a bug report

Webpack Version: 4.x

Babel Core Version: 7.x

Babel Loader Version: 8.x

Please tell us about your environment: OSX 10.x

Current behavior:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
    at Object.module.exports (/html-engine/html-engine/node_modules/babel-loader/lib/index.js:104:35)

I tracked it down to this line of code

var globalOptions = this.options.babel || {};

This fixes the issue: var globalOptions = this.options && this.options.babel || {};

I wanted to fork and submit a PR but I couldn’t really find the code I wanted to change in the source.

Also wondering if this is a usage problem. I don’t believe it is.

Anyways here is my babelrc

{
  "presets": ["@babel/preset-env", "@babel/react"]
}

webpack.config

const fs = require("fs");
const path = require("path");
const webpack = require("webpack");
const Dotenv = require("dotenv-webpack");
const MinifyPlugin = require("babel-minify-webpack-plugin");


module.exports = (serverPath, clientPath) => {
  const getBabelPresetPath = name => {
    if (fs.existsSync(path.resolve(clientPath, "node_modules", name))) {
      return path.resolve(clientPath, "node_modules", name);
    } else if (fs.existsSync(path.resolve(serverPath, "node_modules", name))) {
      return path.resolve(serverPath, "node_modules", name);
    } else {
      return name;
    }
  };

  return {
    mode: 'production',
    entry: path.resolve(clientPath, "src", "index.js"),
    output: {
      filename: "bundle.js",
      path: path.resolve(clientPath, "dist"),
      publicPath: "/dist/"
    },
    resolve: {
      modules: [
        path.resolve(clientPath, "node_modules"),
        path.resolve(serverPath, "node_modules")
      ]
    },
    resolveLoader: {
      modules: [
        path.resolve(clientPath, "node_modules"),
        path.resolve(serverPath, "node_modules")
      ]
    },
    module: {
      rules: [
        {
          test: /\.(jsx|js)?$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/react', '@babel/env']
            }
          },
          exclude: /(demo|__tests__|__mocks__|__snapshots__|examples)/,
          include: path.resolve(clientPath, 'src'),

        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.(scss|sass)$/,
          use: ["style-loader", "css-loader", "sass-loader"],
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.svg$/,
          use: "url-loader?mimetype=image/svg+xml",
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.png$/,
          use: "url-loader?mimetype=image/png",
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.jpg$/,
          use: "url-loader?mimetype=image/jpg",
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.gif/,
          use: "url-loader?mimetype=image/gif",
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
          use: "url-loader?mimetype=application/font-woff",
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
          use: "url-loader?mimetype=application/font-woff",
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          use: "url-loader?mimetype=application/octet-stream",
          exclude: path.resolve(clientPath, "node_modules")
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          use: "file-loader",
          exclude: path.resolve(clientPath, "node_modules")
        }
      ]
    },
    plugins: [
      new webpack.NamedModulesPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.LoaderOptionsPlugin({ options: {} }),
      new webpack.EnvironmentPlugin({
        NODE_ENV: "production"
      }),
      new Dotenv({
        path: path.resolve(clientPath, ".env"),
        silent: true
      }),
      new MinifyPlugin({}, {})
    ]
  };
};

[benwiley4000]

I have the same issue - using babel 6. Is babel-loader 6 no good for webpack 4? I’m getting the issue keeping the same babel version but upgrading from webpack 1 to 4.

[loganfsmyth]

That option hasn’t existed since babel-loader@6.x, so it seems likely that you’re using an older version of babel-loader somehow. Can you check the version in node_modules/babel-loader/package.json?