Getting Uncaught TypeError: Cannot call a class as a function when I use a React HOC

Question

I'm using a HOC to render a React Component using a HOC and receiving the above error.

The component looks like this

import React, { Component } from 'react'
import { hot } from 'react-hot-loader'
import withDashboardForm from './../form/withDashboardForm'

class LoginForm extends Component {
  render() {
    return (
      <form id="login-form" className="dashboard-form" method="post" onSubmit={(e) => this.props.handleSubmit(e)} encType="multipart/form-data">
        .. form definition goes here
      </form>
    )
  }
}

export default hot(module)(withDashboardForm(LoginForm))

This is the HOC:

    const withDashboardForm = (WrappedComponent) => {
      return class ComponentWithDashboardForm extends Component {

        constructor(props) {
          super(props)
          ...
        }

        componentDidMount() {
          ...
        }

        handleChange(e) {
          ..
        }

        handleSubmit(e) {
          ...
        }

        render() {
          return (
            <WrappedComponent
              {...this.props}
              {...this.state}
              handleChange={this.handleChange}
              handleSubmit={this.handleSubmit}

            />
          )
        }

      }
    }

    export default hot(module)(withDashboardForm)

Finally the render method of React Router is used to render the component like so

<Route exact path="/teacher/login" render={(props) => <LoginForm {...props} handler={new LoginFormHandler()}/>}/>

When I run npm start everything works as expected (it runs "NODE_ENV=production node ./dist/server.generated.js").

But when I start the server using pm2 which runs "node /home/ubuntu/node/ris/dist/server.generated.js" I see the TypeError mentioned in the title above.

Answer 1

I ran through the same problem but the above answer didn't fix my problem. React has announced a new feature called "React fast refresh" which can replace "React hot loader", and it is officially supported by react. You can use below instructions to add "fast refresh":

1. yarn add -D react-refresh
2. yarn add -D @pmmmwh/react-refresh-webpack-plugin
3. Add react-refresh/babel to babel config file.
4. Add react-refresh-webpack-plugin plugin to the webpack configuration file:

// webpack.config.js
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
  ...
  plugins: [
    new ReactRefreshWebpackPlugin(),
  ],
};

5. Finally, remove 'react-hot-loader' from your project.