Flux Utils TypeError: Class constructor App cannot be invoked without 'new'

Question

I am trying to implement a Flux Util container on the following React component:

class App extends React.Component<{},AppState> {
 constructor(props:Readonly<{}>){
    super(props);   
 }
 static getStores(){
    return [ArticlesStore];
 }

 static calculateState(prevState:AppState):AppState{
    return {
        articles:ArticlesStore.getState()
    }
 }
 render() {
    return (
        <main>
            <Navbar></Navbar>
            <Routes></Routes>
        </main>
    );
 }
}


interface AppState{
 /**
  * Articles retrived from the ArticlesState to be used in the rendering of the page
  */
 articles:ArticlesStoreState;
}

export default Container.create(App);

In implementing the required code for creating a container, I followed both the example provided on the flux website and some other code found on GitHub as reference. But when running this code, I get the following error:

`TypeError: Class constructor App cannot be invoked without 'new'.` 

(I am using typescript)

Does anyone have any idea what might cause this error this error? Thanks in advance!

Answer 1

I ran into this same issue and it's possible that is happening for you because you're trying to run Flux in ES6 like I am.

If that is the case, then, according to this issue in their GitHub repo, Flux Containers still don't support ES6 yet.

The possible (ugly) workaround as seen in the comments is to do the following:

/// 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));