[Bug]: Class Private field throws error "Module parse failed: Private field '#key' must be declared in an enclosing class"

[gaebalgombal]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

class Test {
    #key = '';

    constructor() {}

    get key() {
        return this.#key;
    }
}

Configuration file name

No response

Configuration

"dependencies": {
"webpack": "^5.45.1",
"babel-loader": "^9.1.3",
"@babel/preset-env": "^7.15.6",
"@babel/plugin-transform-class-properties": "^7.22.5",
"@babel/plugin-transform-private-methods": "^7.22.5",
"@babel/plugin-transform-private-property-in-object": "^7.22.11",
}

Current and expected behavior

1. current behavior

When build, it throws below error.
"Module parse failed: Private field '#key' must be declared in an enclosing class (13:9)
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."

2. expected behavior
   As fas as I know, my code - class Test - does not have any syntax error,
   cuz I already declared private field in an enclosing class.
   so I suspect this might be something related to babel.

Am I missing something, or confusing here ?

Environment

Node: v18.14.2
weback: 5.45.1
babel-loader: 9.1.3

Possible solution

No response

Additional context

I imported all those babel/preset-env and babel-plugins, included it in the babel.config.js and I updated babel-loader but it still throws error.

[babel-bot]

Hey @gaebalgombal! 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.

[nicolo-ribaudo]

What is your Babel config, webpack config, and full error stack trace?

[gaebalgombal]

babel.config.js

module.exports = function (api) {
    api.cache(true);

    const presets = [
        [
            '@babel/preset-env',
            {
                targets: {
                    browsers: ['Chrome > 90', 'Firefox > 90', 'Edge > 90', 'Safari > 12', 'IE 11'],
                },
                useBuiltIns: 'usage',
                corejs: 3.19,
                debug: false,
            },
        ],
    ];

    const plugins = [
'@babel/plugin-transform-class-properties',
'@babel/plugin-transform-private-methods',
'@babel/plugin-transform-private-property-in-object'
// and other unrelated plugins
];

    return {
        presets,
        plugins,
    };
};

webpack.config.js

module.exports = () => {
    const preset = {
        entry: ['./src/main.js'],
        output: {
            path: path.resolve(__dirname, './dist'),
            publicPath: '/dist/',
            filename: 'build.js',
        },
        stats: {
            errorDetails: true,
            children: true,
        },
        target: ['web', 'es5'],
        plugins: [
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                template: 'index_template.html',
                filename: 'index.html',
            }),
        ],
        module: {
            rules: [
                {
                    test: /\.?js$/,
                    exclude: {
                        and: [/node_modules/],
                        not: [
                            /swiper/,
                            /dom7/,
                            /vue-spinner/,
                            /docx/,
                            /file-saver/,
                        ],
                    },
                    loader: 'babel-loader',
                },
            ],
        },
        optimization: {
            minimize: false,
            minimizer: [
                new TerserPlugin({
                    exclude: /smarteditor2/,
                }),
            ],
            nodeEnv: processEnv,
        },
    };

    return preset;
};

full error stack trace

ERROR in ./src/utils/test.js 13:9
Module parse failed: Private field '#key' must be declared in an enclosing class (13:9)
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.
|   function Test(key) {
|     (0, _classCallCheck2["default"])(this, Test);
>     this.#key = key;
|   }
|   (0, _createClass2["default"])(Test, [{
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/pages/TempTest.vue?vue&type=script&lang=js& 7:12-38
 @ ./src/pages/TempTest.vue?vue&type=script&lang=js& 1:0-168 1:184-187 1:189-354 1:189-354
 @ ./src/pages/TempTest.vue 2:0-60 3:0-55 3:0-55 9:2-8
 @ ./src/routes/index.js 197:15-41
 @ ./src/main.js 11:37-56

At first, I thought this has something to do with babel plugin or babel-loader version, but I updated babel versrion to 9.x, and imported babel plugin-transform-private-property-in-object, but it still isn't working.

[nicolo-ribaudo]

Repoening as #16135 makes the error better, but does not solve your problem.

For some reason, your configuration is not applying the class properties transform but it enabling the class properties one.

1. all the plugins you are enabling are already included in @babel/preset-env: you can remove them
2. Can you add debug: true to your preset-env options, and show the output?