browser-esbuild target set to ES2022 and useDefineForClassFields false not working

[wesselvdv]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

non esbuild builder

Description

I get the warning [WARNING] [plugin angular-compiler] TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. when building using browser-esbuild. But when looking at the output, it seems as if the useDefineForClassFields is set to true.

This setting causes the following example to be compiled/transpiled incorrectly, causing undefined errors:

class XYZ extends W {
private readonly whatever = this.query.watch(
    {},
    {
      fetchPolicy: 'network-only',
    },
  );

  constructor(
    private readonly query: GetSomething
  ) {
    super();
  }
}

var _XYZ = class extends W {
  constructor(query) {
    super();
    __publicField(this, "query");
    __publicField(this, "whatever", this.query.watch({}, {
      fetchPolicy: "network-only"
    }));
    this.query = query;
}

As can be seen in the above example the constructor assignment is done last. I initially thought it was due to esbuild, so I had already opened an issue there which pointed me to the typescript config. (evanw/esbuild#2738 (comment))

I am not sure if this is correct behaviour from typescript (the wrong order of assignment), or if this just isn't supported anymore?

Minimal Reproduction

Here's a typescript example with target: ES2021:

https://www.typescriptlang.org/play?useDefineForClassFields=true&target=8#code/MYGwhgzhAEAaCaAtaBTAHgFxQOwCYwHVoBvAKAAcAnASwDcwtpKUxcB7bEAT2gHcALBilopK0ALzQM-ahAB0ARwCuornN4Ng-ABSlo+kgF8ANHoNkDBgGYoMWgApsQ1YFwBc0AOTZbvNpQBrAFoObk9TSxMzAEoAblIzYA4IDEolYAx-XUsqOiEmFnZOHmVVDwBxWwBlNgBbWxlsAHMYkjN9CCVyUW04s0NSAYwubuhKjBr66WpmiWgwbC5SXBRQMGZoejECDwWloA

And here's one with ES2022 as target

https://www.typescriptlang.org/play?useDefineForClassFields=true&target=99#code/MYGwhgzhAEAaCaAtaBTAHgFxQOwCYwHVoBvAKAAcAnASwDcwtpKUxcB7bEAT2gHcALBilopK0ALzQM-ahAB0ARwCuornN4Ng-ABSlo+kgF8ANHoNkDBgGYoMWgApsQ1YFwBc0AOTZbvNpQBrAFoObk9TSxMzAEoAblIzYA4IDEolYAx-XUsqOiEmFnZOHmVVDwBxWwBlNgBbWxlsAHMYkjN9CCVyUW04s0NSAYwubuhKjBr66WpmiWgwbC5SXBRQMGZoejECDwWloA

Exception or Error

No response

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.0.3
Node: 19.1.0 (Unsupported)
Package Manager: npm 8.19.3
OS: linux x64

Angular: 15.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.3 (cli-only)
@angular-devkit/build-angular   15.0.3
@angular-devkit/core            15.0.3
@angular-devkit/schematics      15.0.3
@angular/cdk                    15.0.2
@schematics/angular             15.0.3 (cli-only)
rxjs                            7.6.0
typescript                      4.9.4
webpack                         5.75.0

Anything else relevant?

No response

[alan-agius4]

@wesselvdv can you please share your TypeScript configuration files? Can you verify that you are not explicitly setting useDefineForClassFields to true?

[wesselvdv]

@alan-agius4 I am not explicitly setting useDefineForClassFields:

../../tsconfig.json

{
  "compilerOptions": {
    "downlevelIteration": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "declaration": true,
    "skipLibCheck": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "preserveSymlinks": true,
    "moduleResolution": "node16",
    "noEmit": false,
    "lib": ["es2022"],
    "sourceMap": true,
    "declarationMap": true,
    "strict": true,
    "noImplicitReturns": false,
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "noEmitOnError": false,
    "noErrorTruncation": false,
    "incremental": true,
    "allowJs": false,
    "checkJs": false,
    "forceConsistentCasingInFileNames": true,
    "suppressImplicitAnyIndexErrors": true,
    "stripInternal": true,
    "isolatedModules": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noUncheckedIndexedAccess": true,
    "strictNullChecks": true,
    "target": "ES2022",
    "module": "Node16",
    "typeRoots": ["./node_modules/@types"]
  },
  "exclude": ["node_modules", "build", "lib", "dist", ".vscode", ".direnv", ".cache"]
}

../tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "declaration": false,
    "declarationMap": false,
    "importHelpers": true,
    "lib": [
      "es2018",
      "dom",
      "dom.iterable"
    ],
    "emitDecoratorMetadata": false,
    "sourceMap": true,
    "plugins": [
      {
        "transform": "@effect-ts/tracing-plugin"
      }
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ],
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "disableTypeScriptVersionCheck": true,
    "strictTemplates": true
  },
  "references": [
    {
      "path": "../../packages/effect"
    },
    {
      "path": "../../packages/graphql"
    }
  ]
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app"
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

[alan-agius4]

I am not able to replicate this using the configuration provided.

Here is the output:

import {
  __commonJS
} from "./chunk-RSJERJUL.js";

// src/main.ts
var require_main = __commonJS({
  "src/main.ts"(exports) {
    Object.defineProperty(exports, "__esModule", { value: true });
    var XYZ = class extends W {
      query;
      whatever = this.query.watch({}, {
        fetchPolicy: "network-only"
      });
      constructor(query) {
        super();
        this.query = query;
      }
    };
  }
});
export default require_main();
//# sourceMappingURL=main.js.map

Note: I noticed you are using Node16 as module format. This is not recommended to be used for Web applications.

Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[wesselvdv]

I think I found the culprit, I added the following overrides:

    "target": "ES2015",
    "module": "ES2020"

It now seems to give me correct output.

[alan-agius4]

closing as per above.

[alan-agius4]

The root cause of the incorrect input is that when the target in the tsconfig is set to es2022 we will not automatically set useDefineForClassFields to false.

We only set useDefineForClassFields to false when targeting ES2021 or lower. The reason for this is to retain backwards compatibility for code which was written in older versions. useDefineForClassFields offers a way for users to migrating to the upcoming standard version of class fields.

See: https://www.typescriptlang.org/tsconfig#useDefineForClassFields

[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.}