X is not a constructor
JavaScript Programming Language
Severity: ModerateWhat Does This Error Mean?
This error means you used the new keyword on something that cannot be constructed. Only functions and ES6 classes can be called with new. Arrow functions, plain objects, and most built-in values are not constructors.
Affected Models
- Chrome DevTools
- Firefox DevTools
- Node.js
- React
- Vue.js
Common Causes
- Using new with an arrow function, which is never a constructor
- Calling new on a value that is undefined (e.g., the import failed or the name is misspelled)
- Using new on an async function — async functions are not constructors
- Importing a module's default export that is a plain object, not a class
- A CommonJS module exports a value but is imported using ES module syntax incorrectly
How to Fix It
-
Check whether the value you are calling new on is actually a class or function.
console.log(typeof MyThing) — it must be 'function'. If it logs 'object' or 'undefined', it cannot be constructed.
-
Replace arrow functions with regular functions if you need to use new.
const Foo = () => {} cannot be constructed. Use function Foo() {} or class Foo {} instead.
-
Verify your import statement is bringing in what you expect.
console.log(MyImportedThing) right after the import. If it is undefined, your import path or export is wrong.
-
Check how the library exports its class — CommonJS and ES modules handle default exports differently.
If the library uses module.exports = MyClass, you may need: const MyClass = require('lib') instead of import { MyClass } from 'lib'.
-
Remove new if the function is a factory that returns an object without new.
Some libraries are designed to be called as Foo() not new Foo(). Check the library's documentation for the correct usage.
When to Call a Professional
This is a JavaScript coding bug and does not require outside help to fix. If it appears in a library you did not write, check the library's GitHub issues — it may be a known bug with a workaround.
Frequently Asked Questions
Why can't arrow functions be used as constructors?
Arrow functions do not have their own 'this' binding and do not have a prototype property. Both are required for the new keyword to work. This is a deliberate design decision — arrow functions are lightweight and not meant for object creation.
Can async functions be constructors?
No. Async functions always return a Promise, which conflicts with how new works. If you need an async factory, create a static async method on a class instead: const obj = await MyClass.create().
How do I check if something is a valid constructor before calling new?
There is no built-in 100% reliable way in JavaScript. The practical approach is: check typeof x === 'function' and that x.prototype is defined. Alternatively, wrap the new call in a try-catch and handle the TypeError.