Class constructor cannot be invoked without 'new' - typescript with commonjs

Question

I am making server side chat with colyseus (node game server framework). Im using typescript with module:commonjs because colyseus is built upon commonjs.

I have class ChatRoom that extends Colyseus.Room. At run-time I get this error:

Class constructor Room cannot be invoked without 'new'.

And the trouble in javascript:

function ChatRoom() {
   return _super !== null && _super.apply(this, arguments) || this;
}

from typescript class:

import {Room} from "colyseus";

export class ChatRoom extends Room {

    onInit(options) {
        console.log("BasicRoom created!", options);
    }

    onJoin(client) {
        this.broadcast(`${ client.sessionId } joined.`);
    }

    onLeave(client) {
        this.broadcast(`${ client.sessionId } left.`);
    }

    onMessage(client, data) {
        console.log("BasicRoom received message from", client.sessionId, ":", data);
        this.broadcast(`(${ client.sessionId }) ${ data.message }`);
    }

    onDispose() {
        console.log("Dispose BasicRoom");
    }
  }

The error is easily skipped when troubled row is removed after compilation. But the base class is not created and this is not a complete solution.

I googled the issue and it seems to relate to babel transpiler, though I don't use babel. I only use tsc / tsconfig.json.

Estus Flask · Accepted Answer · 2020-09-12T07:03:58.523

73

TypeScript transpiles a class to its ES5 counterpart, but this way it's necessary that entire class hierarchy is transpiled to ES5.

In case parent class is untranspiled (native class or imported ES6 class, including the ones that were transpiled with Babel), this won't work, because TypeScript relies on var instance = Parent.call(this, ...) || this trick to call parent constructor, while ES6 classes should be called only with new.

This problem should be solved in Node.js by setting TypeScript target option to es6 or higher. Modern Node.js versions support ES6 classes, there is no need to transpile them.

The same problem applies to Babel.

edited Sep 12 '20 at 07:03

answered May 06 '18 at 19:10

Estus Flask

206,104
70
425
565

8

Thanks. This works: tsconfig.compilerOptions: {target : "es6",..} – Александър К. May 06 '18 at 19:27
4

...or also, in case you need es5 support, making sure that all the hierarchy is compiled with target: es5. my two cents! – cancerbero Mar 02 '19 at 07:29
1

Here's a table of which `target` to use for your version of Node https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping – Tamlyn Jul 22 '22 at 13:36

score 26 · Answer 2 · edited Dec 21 '21 at 15:02

26

For those who are using ts-node, it could be possible that your tsconfig.json is unable to be loaded by ts-node.

Make sure you've set the below option for tsconfig.json:

{
    "compilerOptions": {
        "target": "ES6",
        ...
    }
}

Try ts-node --script-mode or use --project to specify the path of your tsconfig.json.

edited Dec 21 '21 at 15:02

Audwin Oyong

2,247
3
15
32

answered May 28 '20 at 09:37

Devo

1,004
11
10

2

This solved my issue! I had to switch over from ES5 to ES6 and it worked – Megan Apr 26 '21 at 05:35
Thanks a lot for the answer. I tried this but I am unable to follow what you are mentioning in `Step-2`. I am using `Nuxt.js`. https://stackoverflow.com/q/69915969/7584240 – BATMAN_2008 Nov 10 '21 at 15:40
@BATMAN_2008 Are you using ts-node? When using ts-node, we call something like `ts-node ./index.ts` to start our app. And according to my answer, we can use `ts-node --script-mode ./index.ts` instead. – Devo Nov 13 '21 at 10:26
Using `ts-node --project tsconfig.json` did it for me! – Daniel Hair Jan 31 '22 at 12:06
Unfortunately, I created a tsconfig.json as you suggested but I am still getting that error. – Alaska Nov 15 '22 at 01:35

score 4 · Answer 3 · answered Mar 11 '19 at 01:36

I came across the same problem using javascript, webpack, and babel (but no TypeScript).

I found a solution based on ES6/Babel Class constructor cannot be invoked without 'new'

I needed to explicitly include colyseus in my babel loader. Below is the snippet in my webpack config file:

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: /colyseus/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },

Class constructor cannot be invoked without 'new' - typescript with commonjs

3 Answers3

Linked