Colyseus.js class constructor cannot be invoked without 'new' despite target: "es6"

Question

I have a TypeScript browser game setup that uses Colyseus.js as a multiplayer framework and webpack 5 & ts-loader for bundling.

When I run the code, I get this error message:

Uncaught (in promise) Error: Class constructor Room cannot be invoked without 'new'
    at new MatchMakeError (colyseus.js:4752)
    at Client.<anonymous> (colyseus.js:4888)
    at step (colyseus.js:90)
    at Object.next (colyseus.js:71)
    at fulfilled (colyseus.js:61)

I already read plenty of posts about how this can be fixed by compiling TypeScript to ES6. However, my tsconfig.json already looks like this:

{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

With webpack I use:

resolve: {
  extensions: [".ts", ".html", ".css"],
},

module: {
  rules: [
    {
      test: /\.ts?$/,
      use: [
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
          },
        },
      ],
    },
  ]
}

Now I saw in the webpack output that it's using this:

../../node_modules/colyseus.js/dist/colyseus.js 213 KiB [built] [code generated]

My guess is, that Colyseus.js is compiled to target ES5 and uses the var _this = _super.call(this, message) || this; hack. I then compile my code to ES6 and copy the Colyseus.js code which all in all is not compatible.

How can I resolve this? I already tried setting the target in my tsconfig to es5 without great difference. How do others use Colyseus.js with webpack?

Answer 1

Just figured this out: Actually this is the response from the server side code (which I have in node.js) that until now compiled to es5. The client/ browser is generating this log because Colyseus works the way that a request is sent to the backend and in case of an exception it is passed to the client as a result.