not able to transform arrow functions while bundling js

Bug report

What is the current behavior? I can see a new feature called dependOn is added to webpack which fits in rightly for my requirement. As I moved my webpack version from 4.43.0 to 5.0.0-beta.16, for some reasons the transformation of arrow function in bundle.js is not happening.

If the current behavior is a bug, please provide the steps to reproduce. Let me share my configurations.

Package.json

`

{
  "name": "root",
  "private": true,
  "workspaces": [
    "compositions/*"
  ],
  "dependencies": {
    "classnames": "^2.2.6",
    "core-js": "3",
    "react": "^16.10.2",
    "react-dom": "^16.10.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.6",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.6",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "@emcm-ui/stylelint-config": "^1.2.2",
    "@storybook/react": "^5.3.18",
    "babel-core": "7.0.0-bridge.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-styled-components": "^1.10.7",
    "babel-polyfill": "^6.26.0",
    "compression-webpack-plugin": "^3.1.0",
    "css-loader": "^3.5.3",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "es6-promise": "^4.2.8",
    "eslint": "^6.8.0",
    "fs-extra": "^9.0.0",
    "isomorphic-fetch": "^2.2.1",
    "lerna": "^3.20.2",
    "mini-css-extract-plugin": "^0.9.0",
    "module": "^1.2.5",
    "npm-run-all": "^4.1.5",
    "postcss": "^7.0.27",
    "postcss-calc": "^7.0.2",
    "postcss-css-variables": "^0.17.0",
    "prettier": "^1.19.1",
    "reduce-css-calc": "^2.1.7",
    "regenerator-runtime": "^0.13.5",
    "style-loader": "^1.2.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "5.0.0-beta.16",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.11"
  },
  "scripts": {
    "build": "yarn format && webpack --mode production",
    "start": "start-storybook -p 5555",
    "npmScript": "webpack --mode production",
    "postcss": "node scripts/buildVars.js",
    "cleanup": "./cleanup.sh",
    "format": "yarn internal:prettier \"./*.{js,jsx,json,md}\" \"./**/*.{js,jsx,json,md}\" --write",
    "internal:lint:js": "eslint --ext .js,.jsx --ignore-path .eslintignore",
    "internal:prettier": "prettier",
    "lint": "npm-run-all lint:*",
    "lint:format": "yarn internal:prettier --list-different \"./*.{js,jsx,json,md}\" \"./**/*.{js,jsx,json,md}\"",
    "lint:js": "yarn internal:lint:js .",
    "lint:js:fix": "yarn internal:lint:js . --fix"
  }
}

`

webpack.config.js

`

const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
const webpack = require("webpack");
const getPackages = require("./scripts/getPackages");
const localPackage = require("./package.json");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  entry: {
    icons: path.resolve(__dirname, "node_modules", "@emcm-ui/icons")
  },
  output: {
    filename: "[name].js"
  },
  devServer: {
    inline: true,
    port: 3002
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  useBuiltIns: "entry",
                  corejs: { version: 3, proposals: true }
                }
              ],
              "@babel/preset-react"
            ],
            plugins: [
              "@babel/plugin-proposal-class-properties",
              "@babel/plugin-transform-arrow-functions",
              "@babel/plugin-transform-runtime"
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          // This is executed in reverse order #important
          MiniCssExtractPlugin.loader,
          // "style-loader",
          "css-loader" // this is used to understand the import statement in js for css
        ]
      }
    ]
  },
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      generateStatsFile: true,
      openAnalyzer: false,
      statsOptions: {
        source: false
      }
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css"
    }),
    new DuplicatePackageCheckerPlugin()
  ]
};
`

**polyfill.js**

`
import "regenerator-runtime/runtime";
import "core-js/es";
import "isomorphic-fetch";
import es6Promise from "es6-promise";

es6Promise.polyfill();

`

What is the expected behavior? I should see my bundle.js transformed into without arrow function in them as most of the browsers cannot read them. The same works when I downgrade my webpack version to 4.43.0

Other relevant information: webpack version: 5.0.0-beta.16 Node.js version: v12.16.2 Operating System: Windows 32 Additional tools: VSCode

Any help would be appreciated

[vankop]

@anooj-curator probably you need to decrease ecmaVersion, take a look https://github.com/webpack/changelog-v5#improved-code-generation

[branchard]

Putting output.ecmaVersion: 2009 seems to work.