Unexpected “Uncaught TypeError: XXX is not a constructor” errors with Babel and ES6

Question

I am giving a try to Webpack, and am giving a try to the instructions in this tutorial, give or take a few custom things.

This is simple code, really, but I\'m quite

Answer 1

It's not the problem in this particular question, but for some reasons, babel does not hoist classes in the same file.

So if you declare your class Token at the top of the file, and write later new Token(), it will run.

If you declare your class after the constructor call, you will have the xxx is not a constructor error

Answer 2

Although this is not the cause of your particular issue, I ran into a very similar problem when trying to rip babel out of an existing node app that was using ES6's import and export syntax, so this post is to help out anyone else struggling with this in the future.

Babel will resolve any circular dependencies between one module and another, so you can use ES6's import and export with reckless abandon. However, if you need to get rid of babel and use native node, you will need to replace any import and exports with require. This can reintroduce a latent circular reference issues that babel was taking care of in the background. If you find yourself in this situation, look for an area in your code that looks like this:

File A:

const B = require('B');

class A {
  constructor() {
    this.b = new B();
  }
}
module.exports = A;

File B:

const A = require('A'); // this line causes the error

class B {
  constructor() {
    this.a = new A();
  }
}
module.exports = B;

There are several different ways to resolve this issue depending on how you structured your code. The easiest way is probably to pass B a reference to A instead of creating a new instance of class A. You could also dynamically resolve the reference when loading A. There are a myriad of other alternatives, but this is a good place to get started.

Answer 3

What could I be missing?

Babel assigns default exports to the default property. So if you use require to import ES6 modules, you need to access the default property:

const Button = require('./Components/Button.js').default;

Answer 4

You can just put export var __useDefault = true; just after exporting your Class.

export default class Header {
...
} 
export var __useDefault = true;

Answer 5

I realize that you already have an answer. However I had a similar issue to which I found an answer. Starting my own question and answering it seems weird. So I'm just going to leave this here.

I had the same error as you got. However, I managed to solve it by changing my

export default {Class}

to

export default Class

I don't know why I wrapped the Class in an object but I remember having seen it somewhere so I just started using it.

So instead of the default returning a Class it returned an object like this {Class: Class}. This is completely valid yet it will break webpack+babel.

EDIT: I've since come to know why this probably breaks babel+webpack. The export default is meant to only have 1 export. A javascript-object can contain many properties. Which means it can have more than 1 export. (See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export).

For multiple exports use: export {definition1, definition2}.

Use-case: I've used this in a situation where I've created a library which exported different types of an editor (while the underlying code was the same, the appearance of the editor changes depending on which export you use).

Answer 6

I was able to fix this by adding babel-plugin-add-module-exports to the .babelrc file

npm install babel-plugin-add-module-exports --save-dev

{
  "presets": ["@babel/env"],
  "plugins": ["add-module-exports"]
}

this adds

module.exports = exports.default;

to the last line when compiling the class with babel.