Extending FluxContainer instantiation error with Node v6.x and ES6

[nathankellenicki]

Hi,

When attempting to extend FluxContainer and create a class from it on the server side in Node v6.x, the component throws an error when instantiated:

TypeError: Class constructor OverviewComponent cannot be invoked without 'new'
    at PureFluxContainerClass.FluxContainerClass (/ProjectLocation/node_modules/flux/lib/FluxContainer.js:50:13)

The component looks like this:

class OverviewComponent extends React.Component {
   ...
}

module.exports = Flux.Container.create(OverviewComponent);

Note that this is not transpiled - this is executed natively with Node v6.x's ES6 support.

I believe this error is because Flux is expecting the component to be transpiled to ES5, and therefore be able to call the constructor be calling it directly, which it can't do in ES6. Is this correct?

[kyldvs]

I'm not sure if we will try to support this or suggest to just use transpiled files, but please provide more information to debug. What precisely is the line of code that is throwing?

[nathankellenicki]

Why would you suggest using transpiled files? ES6 should eventually be natively supported in runtimes, so Flux should follow the ES6 spec properly. It so happens that Node v6.x is there now.

I believe all the information necessary is displayed above. In FluxContainer.js on line 50 (Of the built version), it calls:

_Base.call(this, props);

Inside the create() function. _Base in this instance is the passed component - OverviewComponent in my case, so essentially the code is calling OverviewComponent.call(this, props), or effectively OverviewComponent(props).

In ES6 one cannot call the constructor directly, you must use "new" to instantiate the class.

[kyldvs]

Okay I was misunderstanding, you mean your code is not transpiled, the lib/FluxContainer code is transpiled.

This may just mean we need to turn on stricter options when building, can you try

1: Change this line to false: https://github.com/facebook/flux/blob/master/scripts/babel/default-options.js#L24
2: Run npm run prepublish
3: And then try to run your code again

[nathankellenicki]

Thanks for the response Kyle. I've just tried that and unfortunately I had the same results.

1. Fresh clone into my local node_modules
2. Change scripts/babel/default-options.js#L24
3. npm install

TypeError: Class constructor OverviewComponent cannot be invoked without 'new'
   at PureFluxContainerClass.FluxContainerClass (/ProjectDir/node_modules/flux/lib/FluxContainer.js:54:86)
   at new PureFluxContainerClass (/ProjectDir/node_modules/flux/lib/FluxContainer.js:177:90)
   at ReactCompositeComponentMixin._constructComponentWithoutOwner (/ProjectDir/node_modules/react/lib/ReactCompositeComponent.js:248:14)
   at ReactCompositeComponentMixin._constructComponent (/ProjectDir/node_modules/react/lib/ReactCompositeComponent.js:236:21)
   at ReactCompositeComponentMixin.mountComponent (/ProjectDir/node_modules/react/lib/ReactCompositeComponent.js:159:21)
   at wrapper [as mountComponent] (/ProjectDir/node_modules/react/lib/ReactPerf.js:66:21)
   at Object.ReactReconciler.mountComponent (/ProjectDir/node_modules/react/lib/ReactReconciler.js:39:35)
   at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/ProjectDir/node_modules/react/lib/ReactMultiChild.js:203:44)
   at ReactDOMComponent.Mixin._createContentMarkup (/ProjectDir/node_modules/react/lib/ReactDOMComponent.js:593:32)
   at ReactDOMComponent.Mixin.mountComponent (/ProjectDir/node_modules/react/lib/ReactDOMComponent.js:478:29) 

[lazy8]

If anyone else comes across this, here is a possible (ugly) workaround:

/// FluxContainerConverter.js

module.exports = {
    convert: function(containerClass) {
        const tmp = containerClass;
        containerClass = function(...args) {
            return new tmp(...args);
        };
        containerClass.prototype = tmp.prototype;
        containerClass.getStores = tmp.getStores;
        containerClass.calculateState = tmp.calculateState;
        return containerClass;
    }
};

Now you can use it to create your FluxContainer like this:

var fluxContainerConverter = require('./FluxContainerConverter');

Container.create(
    fluxContainerConverter.convert(MyComponent));

[murilobr]

Such a mess

[murilobr]

There is a sample in official docs page, but doesn't work!
It's brilliant.
http://facebook.github.io/flux/docs/flux-utils.html#container

[kyldvs]

@murilobr, the example does work on the client (most use cases), and there is a workaround on the server as mentioned above. I'm not sure why it's broken on the server, but PRs are welcome.

[gitsupersmecher]

Sad but true! Flux Containers is not working with es6. I do not understand why is not fixed till now, in this long period of time.

[gitsupersmecher]

@murilobr - thanks providing the workaround. It really helps.