Es6/Babel Class Constructor Cannot Be Invoked Without 'New'

Babel error: Class constructor Foo cannot be invoked without 'new'

Due to the way ES6 classes work, you cannot extend a native class with a transpiled class. If your platform supports native classes, my recommendation would be, instead of using the preset es2015, use es2015-node5, assuming you're on Node 5. That will cause Babel to skip compiling of classes so that your code uses native classes, and native classes can extend other native classes.

ES6/Babel Class constructor cannot be invoked without 'new'

I ran into the exact same issue while extending Quill’s BaseTheme.

As Bergi correctly pointed out in the comments above, this has to do with the fact that babel-loader isn’t transpiling Quill’s modules because they're inside node_modules/, which is excluded.

You can either update the exclude option in your Webpack config and use a regex to skip the node_modules/quill/ folder or use include instead:

{
test: /\.js$/,
loader: 'babel-loader',
include: [
path.join(__dirname, '../src'), // + any other paths that need to be transpiled
/\/node_modules\/quill/,
]
}

Javascript ES6 TypeError: Class constructor Client cannot be invoked without 'new'

The problem is that the class extends native ES6 class and is transpiled to ES5 with Babel. Transpiled classes cannot extend native classes, at least without additional measures.

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

results in something like

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

Since ES6 classes should be only called with new, NativeBar.call results in error.

ES6 classes are supported in any recent Node version, they shouldn't be transpiled. es2015 should be excluded from Babel configuration, it's preferable to use env preset set to node target.

The same problem applies to TypeScript. The compiler should be properly configured to not transpile classes in order for them to inherit from native or Babel classes.

TypeError: Class constructor model cannot be invoked without 'new'

Note: Check the Why section in the end! If you want to know.

Problem

The problem is ES6 classes => are not transpilled with there full features to ES5! Sequelize is relying on some features

Or

Using Sequelize.import in place of require! Don't! (Babel or any transpiler works with require (or es import) and how sequelize.import work is causing problem!)!

Answer

I guess you are using

export class Course extends Model {} // <== ES6 classes

Course.init({

Your babel configuration is what's causing that!

You can check that on this github thread comment

This worked for the guy

{
"presets": [
["env", {
"targets": {
"node": "current"
}
}]
]
}

Or

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

comment

Making babel use ES6 classes!

Note that if in the other hand you just stick with sequelize.define() way

export const User = sequelize.define('User', {
// Model attributes are defined here
firstName: {
type: DataTypes.STRING,
allowNull: false
},

It will work just right in ES5!

Don't use Sequelize.import to import Models

If you are doing then don't! Use require or es import! The transpiler doesn't handle Sequelize.import directly! And it seems to cause problem

Comment showing that

For me it was because of ES6 with Typescript

Typescript

Default target was ES5!

Change that to ES6+! And all start working!

For example

"target": "ES2021", 

ES5 with sequelize.define works

Know that ES5 with sequelize.define works just fine!

Sample Image

ES5 with Class extends doesn't work

Sample Image

Illustration

Sample Image

ES6+ works always

Sample Image

Sample Image

Why! Babel doesn't normally transpile right!! ???

You can see that in this github comment

It turns out that an ES6-class transpiled by babel can't extend a real ES6 class (The Sequelize.Model ES6-class for example).

So class MyEntity extends Sequelize.Model { ... } won't work if MyEntity is transpiled into ES5.

And here the stackoverflow answer explaining better:
https://stackoverflow.com/a/36657312/7668448

Due to the way ES6 classes work, you cannot extend a native class with a transpiled class. If your platform supports native classes

You can see more depth elements about the why and how possibly such a transpilation of ES6 Class to ES5 can be done to support full features and compatiblity! in the links bellow:

https://github.com/microsoft/TypeScript/issues/17088

https://github.com/microsoft/TypeScript/issues/15397

And here an article (comparing-different-ways-of-transpiling-es6-class-to-es5) that go in more details about the subject

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

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.

Class constructor cannot be invoked without 'new' for TSdx package

You can just set --target node to fix the issue (since the default value is browser).

$ npx tsdx build --target node

Alternatively you can add a Babel configuration file .babelrc to your TDdx project and setup your target environment.

{
"presets": [
["@babel/preset-env", { "targets": { "esmodules": true } }]
]
}

Class constructors cannot be invoked without 'new'

This is because Babel's transpiled ES6 classes cannot be used to extend a real ES6 class. If you want to use mongorito, you would have to blacklist Babel's es6.classes transform so that your Listing class was also a native ES6 class.



Related Topics



Leave a reply



Submit