[Bug]: [7.16.10] [target:node:12] Class fields are not enabled

[jlowcs]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

With the following configuration:

module.exports = (api) => {
	api.cache(false);

	return {
		sourceType: 'unambiguous',
		presets: [
			[
				'@babel/preset-env',
				{
					useBuiltIns: 'entry',
					corejs: 3,
					loose: false,
					targets: { node: '12' },
				},
			],
			'@babel/preset-typescript',
		],
	};
};

And a simple file like this one:

export class Test {
	private foo: unknown = {};
}

Compilation fails:

Configuration file name

babel.config.js

Configuration

module.exports = (api) => {
	api.cache(false);

	return {
		sourceType: 'unambiguous',
		presets: [
			[
				'@babel/preset-env',
				{
					useBuiltIns: 'entry',
					corejs: 3,
					loose: false,
					targets: { node: '12' },
				},
			],
			'@babel/preset-typescript',
		],
	};
};

Current and expected behavior

The following file should compile, but I'm getting an error:

export class Test {
	private foo: unknown = {};
}

Environment

System:
OS: macOS 11.6.2
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
npmPackages:
@babel/cli: ^7.16.8 => 7.16.8
@babel/core: ^7.16.10 => 7.16.10
@babel/node: ^7.16.8 => 7.16.8
@babel/parser: ^7.16.10 => 7.16.10
@babel/plugin-syntax-import-meta: ^7.10.4 => 7.10.4
@babel/plugin-transform-runtime: ^7.16.10 => 7.16.10
@babel/preset-env: ^7.16.10 => 7.16.10
@babel/preset-react: ^7.16.7 => 7.16.7
@babel/preset-typescript: ^7.16.7 => 7.16.7
@babel/register: ^7.16.9 => 7.16.9
@babel/runtime: ^7.16.7 => 7.16.7
@babel/traverse: ^7.16.10 => 7.16.10
babel-jest: ^27.4.6 => 27.4.6
babel-loader: ^8.2.3 => 8.2.3
babel-plugin-styled-components: ^2.0.2 => 2.0.2
eslint: ^8.7.0 => 8.7.0
jest: ^27.4.7 => 27.4.7
webpack: ^4.46.0 => 4.46.0

Possible solution

No response

Additional context

Might be related to #14169?

Changing the target to node 14 or 16 fixes the issue, but that opens another can of worms for me...

[babel-bot]

Hey @jlowcs! 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]

Could you check if @babel/preset-env 7.16.11 fixes this bug?

[jlowcs]

@nicolo-ribaudo not quite

It does fix that specific error in the sense that it doesn't fail anymore, but it still returns code that includes the field, which is not supported by node 12 afaik:

And that results in an error when using webpack 4 and babel-loader.

That actually looks like the "can of worms" I mentioned above. It seems to be related to the version of acorn that webpack 4 uses that doesn't support that specific feature.

[jlowcs]

For reference, here's what the previous version of babel returns:

[JLHwung]

And that results in an error when using webpack 4 and babel-loader.

Webpack 4 does not support ES2022, you need to upgrade to webpack 5 or always enable @babel/plugin-proposal-class-properties.

[jlowcs]

Oh, right, apparently node 12 does support private class fields.

I guess explicit @babel/plugin-proposal-class-properties is the way to go until we have the bandwidth to migrate to webpack 5.

[jlowcs]

thank you both

[nicolo-ribaudo]

I'm closing this issue since Babel now produces code that it still valid according to your targets, even if this might look like a regression (because it throws with webpack 4).

We might introduce a webpack: X target in the future, but for now yes I suggest enabling @babel/plugin-proposal-class-properties explicitly!

[jlowcs]

We might introduce a webpack: X target in the future

I love that idea!