Radium wrapping not compatible with native classes?

[epsitec]

I've been successfully using Radium with the standard es2015 Babel preset.

Since our generated code runs on Node 5, I wanted to try out babel-preset-node5. With this preset, Babel is no longer translating class to ES5 constructs, since Node 5 supports classes out of the box.
However, when wrapping our component classes with Radium, I get this error:

TypeError: Class constructors cannot be invoked without 'new'

Here is a code snipped which reproduces the error:

import React from 'react';
import radium from 'radium';

class Foo extends React.Component {
  render () {
    return <div>Hello</div>;
  }
}

const WrappedFoo = radium (Foo);

new WrappedFoo (); // TypeError: Class constructors cannot be invoked without 'new'

My .babelrc:

{
  "presets": ["stage-0", "node5", "react"]
}

There seems to be some logic in the Radium wrapper that is not compatible with
real ES2015 classes.

[Skywalker13]

In order to prevent the full es2015 preset, my workaround :-( :

  "plugins": [
        ...
        ["transform-class-properties"],
        ["transform-es2015-classes"],
        ...
  ]

[ianobermiller]

Yeah, Radium currently does not support native classes. I assume the fix would be similar to this: gaearon/react-proxy#42

[yornaath]

Having the same issue

[asvetliakov]

Can't you just provide separate es6 build?
i.e. import Radium from 'radium/es6'
The problem that super(...arguments) in ehnancer is being transformed by babel to:
var _this2 = _possibleConstructorReturn(this, _ComposedComponent.apply(this, arguments));

[eXaminator]

Are there any news on this? We just started creating an App on electron and are also using native classes and would like to use radium. I might get away with the above workaround for a while, but I really hope this will be fixed in the near future...

[ianobermiller]

The problem that super(...arguments) in ehnancer is being transformed by babel to:
var _this2 = _possibleConstructorReturn(this, _ComposedComponent.apply(this, arguments));

@kittens @thejameskyle Any idea if there is a workaround for this problem?

[jamiebuilds]

What's the problem? I don't follow

[asvetliakov]

Radium uses class inheritance. When trying to extend native ES6 class the _ComposedComponent will be native es6 class and both these lines will fail (which are transpiled result of extends/super())

      _classCallCheck(this, RadiumEnhancer);

      var _this2 = _possibleConstructorReturn(this, _ComposedComponent.apply(this, arguments));

[jamiebuilds]

Yeah, there isn't a way to make these interoperable. It's not possible to give the super class a context while instantiating it like this

[ianobermiller]

Thanks @thejameskyle, that helps. Alright, we have two options: bundle them together or publish a new NPM module with the untransformed code (somewhat risky, since you'd have to use all the same transforms we do). Another option would be for you to continue transpiling classes even where they are natively supported. Is that so bad?

[asvetliakov]

@ianobermiller
Please don't push fully untransformed code. Transform it to full es6 please. I'm using typescript for example and it can't transpile object rest spread for now.