Solve - is not a Constructor TypeError in JavaScript

avatar

Borislav Hadzhiev

Tue Oct 19 20213 min read

banner

Photo by Daniel Lord

Solve - is not a Constructor TypeError #

The "is not a constructor" TypeError occurs for multiple reasons:

  1. Attempting to use a value that is not a constructor as a constructor.
  2. Mixing up default and named imports.
  3. Using an arrow function as a constructor.
  4. Calling Promise.resolve() and Promise.reject() with the new operator.

typeerror is not a constructor

Here's an example of how the error occurs.

index.js
const obj = {}; // โ›”๏ธ TypeError: obj is not a constructor const p = new obj();

We tried to instantiate a value that is not a constructor as a constructor, which caused the error.

To solve the "is not a constructor" TypeError in JavaScript, make sure to only use the new operator on valid constructors, e.g. classes or constructor functions. Note that arrow functions cannot be used as constructors.

index.js
// โœ… Class constructor class Person { constructor(first, last) { this.first = first; this.last = last; } getName() { return `${this.first} ${this.last}`; } } const p = new Person('James', 'Doe'); // โœ… Function constructor function Animal(color) { this.color = color; } const a = new Animal('green');

The first example shows a valid class constructor and the second - a function constructor.

Note that arrow functions cannot be used as constructors. Arrow functions have the this keyword bound to the enclosing scope.
index.js
const Animal = color => { this.color = color; }; // โ›”๏ธ TypeError: Animal is not a constructor const a = new Animal('green');

Instead, you should either use a class or a named function as a constructor, like in the example above.

Similarly, the ES6 object method shorthand also can't be used as a constructor.

index.js
const obj = { // ๐Ÿ‘‡๏ธ named function person: function Person(first) { this.first = first; }, // ๐Ÿ‘‡๏ธ arrow function animal: color => { this.color = color; }, // ๐Ÿ‘‡๏ธ shorthand movie(title) { this.title = title; }, }; // โœ… Works const p = new obj.person('James'); // โ›”๏ธ obj.animal is not a constructor const a = new obj.animal('green'); // โ›”๏ธ obj.movie is not a constructor const m = new obj.movie('example');

Another common cause of the "is not a constructor" TypeError is trying to use the Promise.resolve and Promise.reject methods with the new operator.

index.js
// โ›”๏ธ Promise.resolve is not a constructor const res = new Promise.resolve('yay'); // โ›”๏ธ Promise.reject is not a constructor const rej = new Promise.reject('boom');

Instead, omit the new operator when using the Promise.resolve and Promise.reject methods.

index.js
// โœ… Works const res = Promise.resolve('yay'); // โœ… Works const rej = Promise.reject('boom');

Lastly, the error also commonly occurs when mixing up default and named imports in a codebase.

Always make sure to import default exports without curly braces and named exports with curly braces.

You can use default imports/exports with ES6 modules in the following way:

index.js
// ๐Ÿ‘‡๏ธ default export export default function sum(a, b) { return a + b; }

And import the function in the other file.

another-file.js
// ๐Ÿ‘‡๏ธ default import import sum from './index.js'; console.log(sum(5, 5)); // ๐Ÿ‘‰๏ธ 10

Notice that we do not use curly braces to import a default export.

You can only have 1 default export per file.

Here's how you use named imports/exports.

index.js
// ๐Ÿ‘‡๏ธ named export export function sum(a, b) { return a + b; }

And now we use a named import in the other file.

another-file.js
// ๐Ÿ‘‡๏ธ named import import {sum} from './index.js'; console.log(sum(5, 5)); // ๐Ÿ‘‰๏ธ 10

Notice the curly braces, this is how we import a named export.

You have to be consistent with your imports and exports. Don't use curly braces when importing default exports and use curly braces when importing named exports.

You can also mix and match, here's an example.

index.js
// ๐Ÿ‘‡๏ธ named export export const num = 50; // ๐Ÿ‘‡๏ธ default export export default function sum(a, b) { return a + b; }

And here are the imports.

another-file.js
// ๐Ÿ‘‡๏ธ default and named imports import sum, {num} from './index.js'; console.log(sum(5, 5)); // ๐Ÿ‘‰๏ธ 10 console.log(num); // ๐Ÿ‘‰๏ธ 50

We used a default import to import the sum function and a named import to import the num variable.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee