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.

mohammad Khavarinia · Accepted Answer · 2022-02-22 07:32:37Z

2

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":

yarn add -D react-refresh
yarn add -D @pmmmwh/react-refresh-webpack-plugin
Add react-refresh/babel to babel config file.
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(),
  ],
};

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

answered Feb 22, 2022 at 7:32

mohammad Khavarinia

8306 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ashera Over a year ago

This worked like a charm! Thanks for the proper breakdown of steps to follow.

mohammad Khavarinia Over a year ago

I am happy that it helped ;-)

Lorenz Henk · Accepted Answer · 2019-02-22 10:25:00Z

0

This error probably comes from export default hot(module)(withDashboardForm). This returns a class, but you are using it as a function in export default hot(module)(withDashboardForm(LoginForm)).

There are two possible solutions:

don't use hot(module) on the HOC
instanciate the class with new, like export default hot(module)(new withDashboardForm(LoginForm))

answered Feb 22, 2019 at 10:25

Lorenz Henk

7815 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related