I am putting together my first Redux/React app, and when connecting my first containers I get this error. I have looked over past posts on this same error and I have gone through each answer in detail to find if I am making the same mistakes, namely forgetting to extend ponent, or double exporting. I am not doing either so hopefully some other eyes may find another reason that is not previously listed.

The error does not clearly indicate which file is kicking off the error, but here are the only files that could be involved.

The full error is as follows:

typeError: Cannot call a class as a function
_classCallCheck
node_modules/react-redux/es/ponents/connectAdvanced.js:3
  1 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  2 | 
> 3 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  4 | 
  5 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  6 | 

navDrawer.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core';
import {SwipeableDrawer, Button} from '@material-ui/core'
import {} from '@material-ui/icons';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {toggleDrawer} from '../actions/index';
import pose from 'repose/pose';

const styles = {
    list: {
      width: 250,
    },
    fullList: {
      width: 'auto',
    },
  };

  class NavDrawer extends Component {
      constructor(props){
          super(props);
      }
    state = {
      left: false,

    };



    render() {
      const { classes } = this.props;

      const sideList = (
        <div className={classes.list}>
          <List>Hello 1</List>
          <Divider />
          <List>Hello 2</List>
        </div>
      );

      const fullList = (
        <div className={classes.fullList}>
          <List>Hello 4</List>
          <Divider />
          <List>Hello 3</List>
        </div> 
      );

      return (
        <div>
          //<Button onClick={this.props.toggleDrawer('left', true)}>Open Left</Button>

          <SwipeableDrawer
            open={this.state.left}
            onClose={this.props.toggleDrawer('left', false)}
            onOpen={this.props.toggleDrawer('left', true)}
          >
            <div
              tabIndex={0}
              role="button"
              onClick={this.props.toggleDrawer('left', false)}
              onKeyDown={this.props.toggleDrawer('left', false)}
            >
              {sideList}
            </div>
          </SwipeableDrawer>

        </div>
      );
    }
  }

  NavDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
  };

  function mapDispatchToProps(dispatch){
    return bindActionCreators({toggleDrawer}, dispatch)
  }

  function mapStateToProps({drawer}){
    return {drawer};
  }

  export default pose(withStyles(styles), connect(mapStateToProps, mapDispatchToProps)(NavDrawer));

navBar.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {toggleDrawer} from '../actions/index';
import pose from 'repose/pose';


    const styles = {
        root: {
          flexGrow: 1,
        },
        flex: {
          flex: 1,
        },
        menuButton: {
          marginLeft: -12,
          marginRight: 20,
        },
      };


class NavBar extends Component {
  constructor(props){
    super(props);
  }
  render(){
    const { classes } = this.props;
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton onClick={this.props.toggleDrawer('left', true)} className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            MentalHealthApp
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
  }

}

NavBar.propTypes = {
  classes: PropTypes.object.isRequired,
};
function mapDispatchToProps(dispatch){
  return bindActionCreators({toggleDrawer}, dispatch)
}

function mapStateToProps({drawer}){
  return {drawer};
}

export default pose(withStyles(styles), connect( mapStateToProps, mapDispatchToProps)(NavBar));

Mahalo for your help

I am putting together my first Redux/React app, and when connecting my first containers I get this error. I have looked over past posts on this same error and I have gone through each answer in detail to find if I am making the same mistakes, namely forgetting to extend ponent, or double exporting. I am not doing either so hopefully some other eyes may find another reason that is not previously listed.

The error does not clearly indicate which file is kicking off the error, but here are the only files that could be involved.

The full error is as follows:

typeError: Cannot call a class as a function
_classCallCheck
node_modules/react-redux/es/ponents/connectAdvanced.js:3
  1 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  2 | 
> 3 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  4 | 
  5 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  6 | 

navDrawer.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core';
import {SwipeableDrawer, Button} from '@material-ui/core'
import {} from '@material-ui/icons';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {toggleDrawer} from '../actions/index';
import pose from 'repose/pose';

const styles = {
    list: {
      width: 250,
    },
    fullList: {
      width: 'auto',
    },
  };

  class NavDrawer extends Component {
      constructor(props){
          super(props);
      }
    state = {
      left: false,

    };



    render() {
      const { classes } = this.props;

      const sideList = (
        <div className={classes.list}>
          <List>Hello 1</List>
          <Divider />
          <List>Hello 2</List>
        </div>
      );

      const fullList = (
        <div className={classes.fullList}>
          <List>Hello 4</List>
          <Divider />
          <List>Hello 3</List>
        </div> 
      );

      return (
        <div>
          //<Button onClick={this.props.toggleDrawer('left', true)}>Open Left</Button>

          <SwipeableDrawer
            open={this.state.left}
            onClose={this.props.toggleDrawer('left', false)}
            onOpen={this.props.toggleDrawer('left', true)}
          >
            <div
              tabIndex={0}
              role="button"
              onClick={this.props.toggleDrawer('left', false)}
              onKeyDown={this.props.toggleDrawer('left', false)}
            >
              {sideList}
            </div>
          </SwipeableDrawer>

        </div>
      );
    }
  }

  NavDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
  };

  function mapDispatchToProps(dispatch){
    return bindActionCreators({toggleDrawer}, dispatch)
  }

  function mapStateToProps({drawer}){
    return {drawer};
  }

  export default pose(withStyles(styles), connect(mapStateToProps, mapDispatchToProps)(NavDrawer));

navBar.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {toggleDrawer} from '../actions/index';
import pose from 'repose/pose';


    const styles = {
        root: {
          flexGrow: 1,
        },
        flex: {
          flex: 1,
        },
        menuButton: {
          marginLeft: -12,
          marginRight: 20,
        },
      };


class NavBar extends Component {
  constructor(props){
    super(props);
  }
  render(){
    const { classes } = this.props;
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton onClick={this.props.toggleDrawer('left', true)} className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            MentalHealthApp
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
  }

}

NavBar.propTypes = {
  classes: PropTypes.object.isRequired,
};
function mapDispatchToProps(dispatch){
  return bindActionCreators({toggleDrawer}, dispatch)
}

function mapStateToProps({drawer}){
  return {drawer};
}

export default pose(withStyles(styles), connect( mapStateToProps, mapDispatchToProps)(NavBar));

Mahalo for your help

• javascript
• reactjs
• redux

• Please give full error message – Ritwick Dey Commented Jun 1, 2018 at 10:02
• I have edited the original to include the full error near the top – Quinlayen Commented Jun 1, 2018 at 10:07
• Are you using react-router 4? If yes can you post the routes config? – supra28 Commented Jun 1, 2018 at 10:19
• I am not using react-router yet. I intend to but I have not gotten that far in the app yet. – Quinlayen Commented Jun 1, 2018 at 10:20

2 Answers 2

If you've landed here, autoplete may have messed you up too... I was doing reactComponent.prototype = {...} as opposed to reactComponent.propTypes = {...}

Make sure, you're using the correct syntax of repose.

export default pose(
    withStyles(styles),
    connect(mapStateToProps, mapDispatchToProps)
)(NavDrawer);

Another syntax without repose :

export default connect(
   mapStateToProps, 
   mapDispatchToProps
)(withStyles(NavDrawer));