Cannot transform ES6 React class

[bayov]

If I do not transpile down ES6 classes to ES5, I received:

Class constructors cannot be invoked without 'new'

Basically I have to use babel-plugin-transform-es2015-classes, even though Node.js and modern browsers already have support for ES6 classes.

Is there some way to work around this?

[gaearon]

This is very little context. Can you provide a project reproducing the issue?

[bayov]

I've forked the boilerplate example repo and removed Babel's transformation of ES2015 classes:
https://github.com/hagaiak/react-transform-boilerplate

Starting:

git clone https://github.com/hagaiak/react-transform-boilerplate
cd react-transform-boilerplate
npm install
npm start
open http://localhost:3000

Opening the URL above in the latest version of Google Chrome yields:

Uncaught TypeError: Class constructors cannot be invoked without 'new'

[Phoenixmatrix]

I just tripped this myself. Seems to be because the output code ends up trying to wrap the component in an invalid way:

const MyComponent = _wrapComponent('MyComponent')(class MyComponent extends....

The class definition ends up being used as an expression, which probably works with the transpiled version (it's just a normal function) but wouldn't work with a real class I guess.

[Phoenixmatrix]

nvm, it obviously works since you do it here
So probably related to the other code in the same file as the class in my case. I'll have to test a bit.

[Phoenixmatrix]

Ahh ok. It's from react-transform wrapping the class with _wrapComponent (that works fine), then calling .call on it (boom!)

EDIT: I'm getting myself confused with the Webpack code. I don't actually know what is trying to call the wrapped component.

[davej]

Ran into this too after switching from babel-preset-es2015 to the babel-preset-es2015-node5 preset (I'm in Electron).

@Phoenixmatrix: Did you find a workaround?

[gaearon]

Ah, that makes sense.

Yep, we currently don’t support native ES2016 classes.
The support is implemented in gaearon/react-proxy#42 but I haven’t had time to merge it and backport to 1.x branch which is used by react-transform-hmr.

I’ll leave this open for now. The workaround is to enable class transformation in Babel.

[davej]

Ah ok, that wasn't working for me initially but it was just a plugin-order issue with babel. If anybody else has this issue, I needed to move the class transform to my first preset so it was earlier in the plugin order.

[gaearon]

It is fixed in the latest version.