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

Question

I have a class written in Javascript ES6. When I try to execute nodemon command I always see this error TypeError: Class constructor Client cannot be invoked without 'new'

The full error is mentioned below:

/Users/akshaysood/Blockchain/fabricSDK/dist/application/Transaction.js:45
        return (0, _possibleConstructorReturn3.default)(this, (FBClient.__proto__ || (0, _getPrototypeOf2.default)(FBClient)).call(this, props));
                                                                                                                              ^

TypeError: Class constructor Client cannot be invoked without 'new'
    at new FBClient (/Users/akshaysood/Blockchain/fabricSDK/dist/application/Transaction.js:45:127)
    at Object.<anonymous> (/Users/akshaysood/Blockchain/fabricSDK/dist/application/Transaction.js:195:14)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/akshaysood/Blockchain/fabricSDK/dist/routes/users.js:11:20)

What I am trying to do is, I have created a class and then created an instance of that class. Then I am trying to export that variable.

The class structure is defined below:

class FBClient extends FabricClient{

    constructor(props){
        super(props);
    }

<<< FUNCTIONS >>>

}

How I am trying to export the variable ->

var client = new FBClient();
client.loadFromConfig(config);

export default client = client;

You can find the full code here --> Link. Code generated by Babel --> Link.

I'm not sure that you can export the instance of a class. I think you have to export the class, import it in another, then create the instance there — bwalshy
– bwalshy, Commented Aug 15, 2018 at 13:54
@bwalshy - You can export any value, including an instance of a class. — T.J. Crowder
– T.J. Crowder, Commented Aug 15, 2018 at 13:55
@T.J.Crowder This code can not be run online as it requires Blockchain module. — Akshay Sood
– Akshay Sood, Commented Aug 15, 2018 at 13:58
@AkshaySood - The error is clearly not about blockchain stuff, it's about basic class definition and instantiation. Please read that MCVE link. You're not expected to post all your code. You're expected to work through a process producing a minimal replicating example. You haven't even shown us the class where the error is occurring. — T.J. Crowder
– T.J. Crowder, Commented Aug 15, 2018 at 14:03
Are you using Babel to transpile your code? (possibly related issue, but just a guess) — Pointy
– Pointy, Commented Aug 15, 2018 at 14:04

Estus Flask · Accepted Answer · 2020-05-19 11:57:36Z

124

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.

edited May 19, 2020 at 11:57

answered Aug 15, 2018 at 14:38

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Estus Flask Over a year ago

As the answer says. Change Babel configuration to not transpile to ES5. es2015 preset is responsible for this behaviour.

Akshay Sood Over a year ago

If I do not transpile ES6 into ES5 using Babel. It throws error :unexpected token import:

Estus Flask Over a year ago

The manual covers that, babeljs.io/docs/en/babel-preset-env . Use 'target node'.

Estus Flask Over a year ago

@jchook Technically it works like function A() { if (!new.target) throw new Error('cannot be invoked without new') }. A has its terms but it's definitely a function.

Estus Flask Over a year ago

@Haroldo_OK Indeed, at least if this means the support of legacy browsers (browser app shouldn't necessarily be ES5 in 2020). If there's a class that extends built-in class (Error, Promise, etc.), it should be extended in a special way to be compatible with ES5, this is covered in other questions on SO. If a class extends native ES6 class, it's the existence of untranspiled class in ES5 app that is a real issue.

|

KajMagnus · Accepted Answer · 2020-04-05 02:04:18Z

42

I was transpiling not Javascript but Typescript, and ran into the same problem.

I edited the Typescript compiler config file, tsconfig.json, to generate ES2017 Javascript code:

{
    "compilerOptions": {
        "target": "ES2017",

instead of whatever the default is, ES2015? — then all worked fine.

(Maybe this answer can be helpful for people who use Typescript and find this question when they search for the same error message, like I did.)

answered Apr 5, 2020 at 2:04

KajMagnus

11.8k17 gold badges87 silver badges133 bronze badges

2 Comments

Nadeesha Nawagaththegama Over a year ago

This worked for me as well. changed "target": "es5" to >> "target": "es2017"

Shemang David Over a year ago

this answer worked for me as well. i changed "target": "es5" to "target": "ES2020"

Devo · Accepted Answer · 2021-03-22 15:24:49Z

18

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 Mar 22, 2021 at 15:24

answered May 28, 2020 at 9:43

Devo

1,13412 silver badges10 bronze badges

Comments

Hakan Dilek · Accepted Answer · 2020-04-02 11:29:44Z

8

In package.json you can use targets configuration with @babel/preset-env. set the esmodules as 'true'.

Below is the example how I am using in my file:

  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "esmodules": true
          }
        }
      ],
      "@babel/preset-react",
      "@babel/preset-flow"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },

edited Apr 2, 2020 at 11:29

Hakan Dilek

2,2562 gold badges24 silver badges36 bronze badges

answered Apr 2, 2020 at 11:11

Chandan Aswal

891 silver badge2 bronze badges

Comments

TwaPaw · Accepted Answer · 2021-07-15 10:56:38Z

4

For Angular 9+ this can be probably a matter of using typescript compilation flags also:

downlevelIteration
importHelpers

More info hereL https://www.typescriptlang.org/tsconfig#downlevelIteration.

Try to use this flags in your tsconfig.josn:

{
    "compilerOptions": {
        ...
        "downlevelIteration": true,
        "importHelpers": true,
        ...
    }
}

Without "importHelpers": true it should also works.

This solution is mostly for Angular 9+ and ngcc compiler - this was an issue that occur for Angular 11. A custom configuration (custom ng-packgr config - Angular CLI library generating was introduced in Angular 6) for packages was maintained since there was Angular 4+ in the project. After miagration these packages to Angular 9+ libraries (projects folder) the error started occuring. I found that these flags (sctrictly downlevelIteration) solve exactly the problem.

edited Jul 15, 2021 at 10:56

answered Jul 14, 2021 at 19:28

TwaPaw

412 bronze badges

1 Comment

Xalion Over a year ago

And also target to es6

jizhihaoSAMA · Accepted Answer · 2020-07-04 01:18:09Z

1

If you are not using babel and simple typescript. I got the error in material. Try to reduce the versions and bring them down to similar versions. My packages were having variety of versions.I solved the issue by lowering the package versions of packages like cdk, material.

Check the image of my final package.json

edited Jul 4, 2020 at 1:18

jizhihaoSAMA

12.7k9 gold badges32 silver badges52 bronze badges

answered Jul 3, 2020 at 20:45

user3156438

111 bronze badge

Comments

Mohan Krishna · Accepted Answer · 2023-01-30 17:47:20Z

1

Check your "entities" array in appmodule.ts I also missed that. When I kept the entity name that is used in query, issue resolved. Hope this answer helps.

answered Jan 30, 2023 at 17:47

Mohan Krishna

111 bronze badge

Comments

Prakhar Singhal · Accepted Answer · 2023-07-05 18:01:41Z

1

i used wrote before my ObjectId in nextjs and it worked.

answered Jul 5, 2023 at 18:01

Prakhar Singhal

112 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Shawinder Jit Singh Over a year ago

I wrote new before ObjectId in my Mongodb insertMany(), and it removes my error

Tammar · Accepted Answer · 2024-02-15 13:08:14Z

0

If you have already all these configurations on tsconfig and still it doesn't work maybe you have tsconfig.base file. try to chenge it too.

answered Feb 15, 2024 at 13:08

Tammar

258 bronze badges

Comments

Adam Tal · Accepted Answer · 2024-03-24 11:00:50Z

You can wrap instead of extending if you're not in TypeScript

In my situation, I didn't want to change the babel configuration (yet) and wanted to make the logic just work. Understanding a transpiled class cannot extend a native ES6 class I decided to simply wrap the base class, add functions to it and expose it (shoulnd't work in TypeScript).

My original code was something like:

import BaseClass from 'other-library';
class MyClass extends BaseClass {
  constructor(options) {
    super(options);

    this.on('event', this.action);
  }

  action(args) {
    // Custom logic for extending the BaseClass
  }
  addedAction(args) {
    // Custom logic for extending the BaseClass
  }
};

new MyClass({ args: ... }); // This throws "Class constructor BaseClass cannot be invoked without 'new'"

And I changed inheritance to wrapping like this:

import BaseClass from 'other-library';
class MyClass {
  constructor(options) {
    this.wrapped = new BaseClass(options);
    this.wrapped.addedAction = this.addedAction.bind(this);
    this.wrapped.on('event', this.action);
  }

  action(args) {
    // Custom logic for extending the BaseClass
  }
  addedAction(args) {
    this.wrapped.doSomething();
  }
};

// To get the base instance:
new MyClass({ args: ... }).wrapped;

Notice that after creating an instance of MyClass I simply access .wrapped to get the BaseClass instance

Tyler2P · Accepted Answer · 2022-08-01 14:11:08Z

-10

I hope you have already been able to solve your problem, here is my solution for this error:

class indexRoutes
{
    
    public  router: Router= Router();
}
const INDEX_ROUTES = new indexRoutes();
export default INDEX_ROUTES.router;

edited Aug 1, 2022 at 14:11

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Oct 21, 2019 at 5:27

Alejandro

811 silver badge2 bronze badges

Collectives™ on Stack Overflow

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

11 Answers 11

11 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

11 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related