TypeScript浏览器游戏项目中Colyseus.js报“Class constructor Room cannot be invoked without 'new'”错误的解决咨询

我之前也碰到过完全一样的问题，跟你分析的原因完全吻合——Colyseus.js默认打包的dist版本是面向ES5兼容的UMD包，用了原型链模拟类的写法，而你的TypeScript代码编译成ES6原生class后，两者的继承逻辑就冲突了，才会抛出这个Class constructor Room cannot be invoked without 'new'错误。下面是我亲测有效的几个解决方案：

1. 优先加载Colyseus.js的ES模块版本 #

Colyseus.js官方提供了ES模块版本（colyseus.esm.js），这个版本用原生ES6语法编写，和你的TS代码兼容性更好。只需要修改Webpack的resolve配置，让它优先读取package.json里的module字段：

resolve: {
  extensions: [".ts", ".html", ".css"],
  mainFields: ['module', 'browser', 'main'] // 优先加载ES模块版本
}

这个配置会让Webpack自动选择colyseus.js的ES模块版本，而不是默认的ES5 UMD包，从根源上解决类继承的兼容性问题。

2. 强制转译Colyseus.js文件 #

如果上面的方法没生效，你可以让ts-loader转译node_modules里的colyseus.js（默认ts-loader会跳过所有node_modules文件）。修改Webpack的module规则：

module: {
  rules: [
    {
      test: /\.ts?$/,
      use: [
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
          },
        },
      ],
      exclude: /node_modules\/(?!colyseus\.js)/, // 不排除colyseus.js，让ts-loader处理它
    },
  ]
}

这样ts-loader会把Colyseus.js的代码和你的TS代码统一转译为目标ES版本，确保两者的类语法完全一致。

3. 调整TS编译的模块配置 #

检查你的tsconfig.json，确保module字段和Webpack的模块处理逻辑匹配。建议明确设置为ES6或者ESNext：

{
  "compilerOptions": {
    "target": "es6",
    "module": "ES6", // 明确指定模块系统为ES6
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

这个配置能让TS输出的模块语法和Colyseus的ES模块版本更好地配合，避免模块加载时的额外兼容处理。

其他开发者的常见做法 #

我在Colyseus社区看到大部分开发者都会优先采用第一种方案——用ES模块版本的Colyseus.js配合Webpack的mainFields配置。另外，也有部分用户会切换到babel-loader代替ts-loader，通过Babel统一转译所有代码（包括node_modules里的Colyseus），这样兼容性问题会更少。如果你愿意尝试的话，可以配置@babel/preset-typescript和@babel/preset-env来处理TS编译和ES版本兼容。

内容的提问来源于stack exchange，提问作者Sebastian Hätälä