Optimization build moves private class fields before the super() call for third party dependencies

[Julien-Marcou]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I don't think so

Description

When you import a third party dependecy that uses private class fields (Native private class features), they end up being inserted into the constructor before the super() call.

🔬 Minimal Reproduction

• Create a new Angular project
• Add a third party library that uses private class fields ( npm install scrollable-component@1.2.0)
• Import the library (import 'scrollable-component'; inside your main.ts)
• Build the project (ng build or ng serve --configuration production, optimization should be set to true inside your angular.json)
• The generated code is incorrect

(here is the third party imported file)

🔥 Exception or Error

Uncaught ReferenceError: must call super constructor before using 'this' in derived class constructor
vendor.js

🌍 Your Environment

@angular-devkit/architect       0.1301.3
@angular-devkit/build-angular   13.1.3
@angular-devkit/core            13.1.3
@angular-devkit/schematics      13.1.3
@angular/cli                    13.1.3
@schematics/angular             13.1.3
rxjs                            7.5.2
typescript                      4.5.4

Anything else relevant?

The bug only occurs when your build configuration contains the "optimization": true (or does not contain the "optimization": false) rule, which is the default for the production configuration.

From what I can understand, something like this happens:

// Before optimization
class Test extends HTMLElement {
  #privateField;
  constructor() {
    super();
  }
}

// After optimization
class Test extends HTMLElement {
  constructor() {
    __definePrivateField(this, privateField);
    super();
  }
}

I found this issue evanw/esbuild#1918 which may be related and tried several options in my tsconfig.json, like:

• "target": "esnext"
• "module": "esnext"

but I haven't been able to make it work (the problem also occurs with private class methods).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}