Analysis and Solutions for JavaScript ES6 Class Constructor Invocation Error

Error Background and Phenomenon

During JavaScript ES6 development, when using transpilation tools like Babel to process subclasses inheriting from native ES6 classes, developers often encounter the runtime error TypeError: Class constructor cannot be invoked without 'new'. This error typically occurs during class instantiation, particularly when using development tools like nodemon.

Error Mechanism Analysis

The root cause of this error lies in the fundamental differences between ES6 class and ES5 constructor inheritance mechanisms. ES6 classes must be invoked using the new keyword, while when Babel transpiles ES6 classes to ES5 code, the generated inheritance code attempts to call the parent class constructor using ParentClass.call(this).

Consider the following ES6 code example:

class TranspiledFoo extends NativeBar {
  constructor() {
    super();
  }
}

After Babel transpilation, the code is converted to ES5 form similar to:

function TranspiledFoo() {
  var _this = NativeBar.call(this) || this;
  return _this;
}

Since native ES6 class NativeBar can only be invoked using the new operator, directly using NativeBar.call(this) triggers the type error, which is precisely what the error message cannot be invoked without 'new' indicates.

Solutions

Babel Configuration Optimization

For Node.js environments, modern versions natively support ES6 class features, making Babel transpilation of the es2015 preset unnecessary. It's recommended to use @babel/preset-env configured for Node environment:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

This configuration intelligently determines which features need transpilation based on the current Node version, avoiding unnecessary transpilation of natively supported ES6 classes.

TypeScript Configuration Adjustment

For TypeScript projects, similar issues can occur. The solution involves adjusting the compilation target in tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2017"
  }
}

Setting the compilation target to a newer ECMAScript version (like ES2017) ensures that class inheritance code maintains its native ES6 form, preventing compatibility issues.

Best Practice Recommendations

During development, it's advisable to consistently check whether transpilation tool configurations match the target runtime environment. For Node.js projects, if the target version supports ES6 features, avoid transpiling class syntax whenever possible. Additionally, regularly update development toolchains to ensure that used Babel or TypeScript versions can properly handle the latest ECMAScript standards.

Through proper tool configuration and version management, developers can effectively avoid compilation errors like Class constructor cannot be invoked without 'new', thereby improving development efficiency and code quality.