[Bug]: class-static-block works different on node 12 and 14+ after 7.14.0

[JounQin]

💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

const doSomethingWith = (value: number) =>
  /* istanbul ignore next */
  value >= 80 ? 'good' : value >= 60 ? 'ok' : 'bad'

// eslint-disable-next-line @typescript-eslint/no-extraneous-class
export class C {
  static #x = 42
  // eslint-disable-next-line @typescript-eslint/member-ordering
  static y: string
  static {
    try {
      // eslint-disable-next-line @babel/no-invalid-this
      this.y = doSomethingWith(this.#x)
    } catch {
      /* istanbul ignore next */
      // eslint-disable-next-line @babel/no-invalid-this
      this.y = 'unknown'
    }
  }
}

Configuration file name

babel.config.js

Configuration

const MINIMAL_NODE_VERSION = 14

module.exports = {
  presets: [
    'proposal-typescript',
    '@babel/typescript',
    [
      '@babel/env',
      {
        loose: true,
        targets: {
          node: true,
        },
      },
    ],
  ],
  plugins: [
    +process.versions.node.split('.')[0] < MINIMAL_NODE_VERSION
      ? [
          '@babel/syntax-record-and-tuple',
          {
            syntaxType: 'hash',
          },
        ]
      : undefined,
    [
      '@babel/proposal-decorators',
      {
        legacy: true,
      },
    ],
  ].filter(Boolean),
}

Current and expected behavior

Works on Node 14+, build failed on Node 12

un-ts/babel-preset-proposal-typescript#115

Environment

  System:
    OS: macOS 11.3.1
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
  npmPackages:
    @babel/eslint-parser: ^7.13.14 => 7.13.14 
    @babel/eslint-plugin: ^7.13.16 => 7.13.16 
    @babel/helper-plugin-utils: ^7.13.0 => 7.13.0 
    @babel/plugin-proposal-async-do-expressions: ^7.14.0 => 7.14.0 
    @babel/plugin-proposal-class-properties: ^7.13.0 => 7.13.0 
    @babel/plugin-proposal-class-static-block: ^7.13.11 => 7.13.11 
    @babel/plugin-proposal-do-expressions: ^7.14.0 => 7.14.0 
    @babel/plugin-proposal-function-bind: ^7.12.13 => 7.12.13 
    @babel/plugin-proposal-function-sent: ^7.12.13 => 7.12.13 
    @babel/plugin-proposal-json-strings: ^7.13.8 => 7.13.8 
    @babel/plugin-proposal-optional-chaining: ^7.13.12 => 7.13.12 
    @babel/plugin-proposal-partial-application: ^7.12.13 => 7.12.13 
    @babel/plugin-proposal-pipeline-operator: ^7.12.13 => 7.12.13 
    @babel/plugin-proposal-private-methods: ^7.13.0 => 7.13.0 
    @babel/plugin-proposal-private-property-in-object: ^7.14.0 => 7.14.0 
    @babel/plugin-proposal-record-and-tuple: ^7.13.0 => 7.13.0 
    @babel/plugin-proposal-throw-expressions: ^7.12.13 => 7.12.13 
    @babel/plugin-syntax-decorators: ^7.12.13 => 7.12.13 
    @babel/plugin-syntax-dynamic-import: ^7.8.3 => 7.8.3 
    @babel/plugin-syntax-typescript: ^7.12.13 => 7.12.13 
    babel-jest: ^26.6.3 => 26.6.3 

Possible solution

No idea for now.

Additional context

It was just working previously for babel@7.12.0.

https://github.com/rx-ts/babel-preset-proposal-typescript/runs/2472758787#step:8:38

[babel-bot]

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

[JounQin]

Besides, the loose option of @babel/preset-env also works different too, it is not required previously or on Node 14+ currently.

https://github.com/rx-ts/babel-preset-proposal-typescript/runs/2557448207?check_suite_focus=true#step:8:29

Maybe it is related.

[JLHwung]

The error is expected. Note that unlike plugins, the presets are applied in an order of last to first (https://babeljs.io/docs/en/presets/#preset-ordering), in your cases, preset-env runs before proposal-typescript.

In Babel 7.14, private-methods will be enabled by default (because it is already in ES2022), and since Node.js 12 does not support private methods, preset-env will enable private-methods for you. Now in your failing test case, the relevant plugin order is:

1. private-methods (from preset-env, skipped on Node.js 14)
2. static-block (from proposal-typescript)
3. private-methods (from proposal-typescript)

So error is thrown because static-block should run before private-methods.

Since TypeScript already supported private methods and properties, I would suggest do a major release for babel-preset-proposal-typescript removing private-methods, class-properties from src/index.ts. There are more proposals you may consider remove now, examples are optional chaining, nullish coalescing, logical assignments. These proposals have become standard and supported natively in latest TS versions.

[JounQin]

@JLHwung #12691 blocks me removing some related plugins. And private-methods is not supported by TypeScript yet.

There are more proposals you may consider remove now, examples are optional chaining, nullish coalescing, logical assignments.

They are already removed, but I forgot to remove them in package.json, thanks for point out.

[nicolo-ribaudo]

@JounQin Until that other issue is fixed, could you try checking if moving proposalClassStaticBlock to the end of the plugins list in your presets fixes the problem?

[JounQin]

@nicolo-ribaudo Thanks for your advice, but it seems not working.

Incorrect plugin order, @babel/plugin-proposal-class-static-block should be placed before class features plugins

Not end.

[JounQin]

Note that unlike plugins, the presets are applied in an order of last to first (babeljs.io/docs/en/presets/#preset-ordering)

@JLHwung Thanks for pointing out that. It works correctly now although class-properties is still required due to #12691.