[Bug]: @babel/preset-env not including plugins for shippedProposals

[arasmussen]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

I created a very simple repo here: https://github.com/arasmussen/babel-repro

Configuration file name

No response

Configuration

const path = require("path");

const webpack = require("webpack");
const TerserJSPlugin = require("terser-webpack-plugin");

const WebpackConfig = {
  entry: {
    app: "./index.js",
  },

  mode: "production",

  module: {
    rules: [
      {
        test: /\.(ts|tsx|js)$/,
        include: [__dirname],
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    bugfixes: true,
                    corejs: "3.36",
                    debug: true,
                    loose: true,
                    shippedProposals: true,
                    useBuiltIns: "usage",
                  },
                ],
              ],
            },
          },
        ],
      },
    ],
  },

  output: {
    filename: "[name].js",
    path: path.resolve(`${__dirname}/build`),
    publicPath: "https://example.com",
  },
};

module.exports = WebpackConfig;

Current and expected behavior

Source file:

class Foo {
  property = true;
}

Current behavior:

ERROR in ./index.js 2:11
Module parse failed: Unexpected token (2:11)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| class Foo {
>   property = true;
| }

Expected behavior:

• code compiles with no issue
  • using @babel/preset-env and shippedProposals: true so class properties should be loaded with no issue

Environment

• Babel version: 7.23.9
• Node version: 18.17.0
• npm version: 9.8.1
• OS: 13.0
• webpack version: 4.47.0

Possible solution

I found #11796 which seems very similar. Except that was an issue with how @babel/preset-env was being included/configured. I seem to be configuring it properly.

The docs for @babel/plugin-transform-class-properties say that This plugin is included in @babel/preset-env, in ES2022.

This is my list of targets that .browserslistrc compiles to:

{
  "android": "120",
  "chrome": "109",
  "edge": "120",
  "firefox": "115",
  "ios": "15.6",
  "opera": "105",
  "opera_mobile": "73",
  "safari": "16.6",
  "samsung": "22"
}

All of these browsers appear to support ES2022. Any help would be greatly appreciated, thank you.

Additional context

No response

[babel-bot]

Hey @arasmussen! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[arasmussen]

Even if I tighten the .browserslistrc all the way to just chrome > 120 the issue still happens.

[nicolo-ribaudo]

All your targets support class fields, so Babel is not compiling them. Then, you are using an old version of webpack that throws when it sees class fields. I suggest either updating webpack, or changing your targets to that Babel compiles class fields.

I'd like to support using webpack as a target to compute which features to compile in the future, but we don't support it yet: #14963

[arasmussen]

So helpful, thank you @nicolo-ribaudo! Going to close this out.