TypeError: Class constructor FormApp cannot be invoked without 'new'を解決したい

Question

前提・実現したいこと

現在Reactの勉強をしています。
flux-utilを使ってみようと思い、以下のコードを参考にして実行したところエラーになりました。

参考サイト

TypeError: Class constructor FormApp cannot be invoked without 'new'

解決方法が知りたいです。もしわかる方がいればよろしくお願いいたします。

コードは以下です
https://github.com/k49977/flux-app

▼index.js

// @ts-nocheck
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { Dispatcher } from 'flux';
import { ReduceStore, Container } from 'flux/utils';

// Dispatcher
const dispatcher = new Dispatcher();

// Action
const act = {
  SEND: 'send'
};

const FormAction = {
  send(val) { // ...[6]
    dispatcher.dispatch({
      type: act.SEND,
      value: val
    });
  }
};

// Store
class FormStore extends ReduceStore {

  getInitialState() {
    return {
      'value': null // ...[1]
    };
  }

  reduce(state, action) {
    switch (action.type) { // ...[7]
      case act.SEND:
        return {
          'value': action.value // ...[8]
        };
    }
  }

};

// Storeのインスタンス生成
const formStore = new FormStore(dispatcher);

// View (React Component)
class FormApp extends Component {
  static getStores() {
    return [formStore]; // ...[9]
  }
  static calculateState(prevState) {
    return formStore.getState(); // ...[10]
  }
  render() {
    console.log(this.state);
    return (
      <div>
        <FormInput />
        <FormDisplay data={this.state.value} /> // ...[11]
      </div>
    );
  }
};

class FormInput extends Component {
  _send(e) { // ...[4]
    e.preventDefault();
    // @ts-ignore
    FormAction.send(this.refs.myInput.value.trim()); // ...[5]
    this.refs.myInput.value = '';
    return;
  }
  render() {
    return (
      <form>
        <input type="text" ref="myInput" defaultValue="" /> /* ...[2] */
        <button onClick={this._send.bind(this)}>Send</button> /* ...[3] */
      </form>
    );
  }
};

class FormDisplay extends Component {
  render() {
    return (
      <div>{this.props.data}</div> /* ...[12] */
    );
  }
};

// Container
const FormAppContainer = Container.create(FormApp);


ReactDOM.render(
  <FormAppContainer />,
  document.getElementById('root')
);

▼package.json

{
  "name": "flux_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "flux": "^4.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "devDependencies": {},
  "author": "",
  "license": "ISC"
}

試したこと

TypeError: Class constructor FormApp cannot be invoked without 'new'
で検索し、変換する必要があるのかと推敲。その方法を調査中

https://stackoverflow.com/questions/51860043/javascript-es6-typeerror-class-constructor-client-cannot-be-invoked-without-ne
上記の記事を見つけたが、自分の環境にどのようにしたら適用できるだろうか。

Answer 1

そして、starter-react-fluxの環境のApp.jsに以下を記述したところ無事画面表示され、投稿のflux-utilのコードが表示できた。（下記にもリファクタ版を転載）
一旦flux-utilを使ったアプリを実行したいというゴールは達成できたので、回避策としてDONE

▼App.js

// @ts-nocheck
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Dispatcher } from 'flux';
import { ReduceStore, Container } from 'flux/utils';

// Dispatcher
const dispatcher = new Dispatcher();

// Action
const act = {
  SEND: 'send'
};

const FormAction = {
  send(val) { // ...[6]
    dispatcher.dispatch({
      type: act.SEND,
      value: val
    });
  }
};

// Store
class FormStore extends ReduceStore {

  getInitialState() {
    return {
      'value': null // ...[1]
    };
  }

  reduce(state, action) {
    switch (action.type) { // ...[7]
      case act.SEND:
        return {
          'value': action.value // ...[8]
        };
    }
  }

};

// Storeのインスタンス生成
const formStore = new FormStore(dispatcher);

// View (React Component)
class FormApp extends Component {
  static getStores() {
    return [formStore]; // ...[9]
  }
  static calculateState(prevState) {
    return formStore.getState(); // ...[10]
  }
  render() {
    console.log(this.state);
    return (
      <div>
        <FormInput />
        <FormDisplay data={this.state.value} /> 
      </div>
    );
  }
};

class FormInput extends Component {
  _send(e) { // ...[4]
    e.preventDefault();
    // @ts-ignore
    FormAction.send(this.refs.myInput.value.trim()); // ...[5]
    this.refs.myInput.value = '';
    return;
  }
  render() {
    return (
      <form>
        <input type="text" ref="myInput" defaultValue="" /> 
        <button onClick={this._send.bind(this)}>Send</button> 
      </form>
    );
  }
};

class FormDisplay extends Component {
  render() {
    return (
      <div>{this.props.data}</div> /* ...[12] */
    );
  }
};

// Container
const FormAppContainer = Container.create(FormApp);


ReactDOM.render(
  <FormAppContainer />,
  document.getElementById('root')
);

Answer 2

React + Flux入門#使い方
このサイトのstarter-react-fluxでとりあえずfluxを使ったアプリを生成はできた。

npx starter-react-flux init
npm start
```