Changing tsconfig compilerOptions.target doesn't change build from es2015 to es6

[nparoski]

Current Behavior

I keep getting error in console because of usage of es6 classes and code gets transpiled to es5

Uncaught (in promise) TypeError: Class constructor Actor cannot be invoked without 'new'

I have player.ts

import { Actor, ActorArgs, Color, Engine, vec } from 'excalibur';
import { idleAnimation, runAnimation } from './animations';

export default class Player extends Actor {
  constructor(actorProps: ActorArgs, game: Engine) {
    super({
      width: 96,
      height: 96,
      color: Color.DarkGray,
      pos: vec(game.halfDrawWidth, game.halfDrawHeight),
      ...actorProps,
    });
  }

  onInitialize(engine: Engine) {
    console.log(engine);

    this.graphics.use(idleAnimation);
    this.graphics.add('run', runAnimation);
  }
}

Which compiles to

//....
var Player = function(Actor) {
            function Player(actorProps, game) {
                return Actor.call(this, player_extends({
                    width: 96,
                    height: 96,
                    color: __webpack_exports__Color.DarkGray,
                    pos: __webpack_exports__vec(game.halfDrawWidth, game.halfDrawHeight)
                }, actorProps))
            }
            return !function(subClass, superClass) {
                if ("function" != typeof superClass && null !== superClass)
                    throw TypeError("Super expression must either be null or a function");
                subClass.prototype = Object.create(superClass && superClass.prototype, {
                    constructor: {
                        value: subClass,
                        writable: !0,
                        configurable: !0
                    }
                }),
                superClass && player_set_prototype_of(subClass, superClass)
            }(Player, Actor),
//....

Expected Behavior

I expect with tsconfig.json compilerOptions.target = es6 to get something similar to:

class Entity {
    constructor(n = 1) {
        this.type = 0;
        this.type = n;
    }
    onInitialize() {
        console.log(1);
    }
}
class Actor extends Entity {
    constructor(n = "actor") {
        super(2);
        this.name = "";
        this.name = "actor";
    }
}
class Player extends Actor {
    constructor() {
        super("player");
        this.tag = "";
        this.tag = "p";
    }
}
const p = new Player();
//# sourceMappingURL=main.js.map

GitHub Repo

https://github.com/nparoski/web-game/tree/feature/es6-classes

Steps to Reproduce

1. Change any of tsconfig.json (e.g tsconfig.base.json, apps/game/tsconfig.app.json, apps/game/tsconfig.json) compilerOptions.target to es6 instead of es2015
2. nx run game:serve
3. Look at bundle

Nx Report

Node   : 16.15.0
   OS     : win32-x64
   npm    : 9.2.0

   nx                 : 16.7.2
   @nx/js             : 16.7.1
   @nx/jest           : 16.7.1
   @nx/linter         : 16.7.1
   @nx/workspace      : 16.7.1
   @nx/cypress        : 16.7.1
   @nx/devkit         : 16.7.1
   @nx/eslint-plugin  : 16.7.1
   @nx/nest           : 16.7.1
   @nx/node           : 16.7.1
   @nx/react          : 16.7.1
   @nrwl/tao          : 16.7.2
   @nx/web            : 16.7.1
   @nx/webpack        : 16.7.1
   nx-cloud           : 16.4.0-beta.1
   typescript         : 5.1.6
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nx/js@16.7.1
     - @nrwl/js@16.7.1
     - @nx/jest@16.7.1
     - @nrwl/jest@16.7.1
     - @nx/linter@16.7.1
     - @nrwl/linter@16.7.1
     - @nx/workspace@16.7.1
     - @nrwl/workspace@16.7.1
     - @nx/cypress@16.7.1
     - @nrwl/cypress@16.7.1
     - @nx/devkit@16.7.1
     - @nrwl/devkit@16.7.1
     - @nx/eslint-plugin@16.7.1
     - @nrwl/eslint-plugin-nx@16.7.1
     - @nx/nest@16.7.1
     - @nrwl/nest@16.7.1
     - @nx/node@16.7.1
     - @nrwl/node@16.7.1
     - @nx/react@16.7.1
     - @nrwl/react@16.7.1
     - @nx/web@16.7.1
     - @nrwl/web@16.7.1
     - @nx/webpack@16.7.1
     - @nrwl/webpack@16.7.1

Failure Logs

No response

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[jaysoo]

@nparoski If you add a .swcrc file in apps/game with the following then it should work:

{
  "jsc": {
    "target": "es2016"
  }
}

The reason why tsconfig didn't work is because SWC does not use the target defined there. Maybe we need to generate this file by default to it's more obvious.

[nparoski]

@jaysoo Thanks error is resolved, I would very much appreciate if you guys can add .swcrc at root of app/lib and/or document it. As this was very much a blocker.

Thanks for the fast reply.

[jaysoo]

Yes, we will generate it with defaults so it is more clear on where to change the target. I'll see if we need to add this to docs as well.

[nparoski]

@jaysoo what is the purpose of .babelrc in root if swc is used?

[jaysoo]

There is no purpose. Looks like a bug in the @nx/web:app generator that we need to patch.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.