title: TypeError: Cannot call a class as a function (React/Redux)
body: <p>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 component, or double exporting.  I am not doing either so hopefully some other eyes may find another reason that is not previously listed.</p>
  
  <p>The error does not clearly indicate which file is kicking off the error, but here are the only files that could be involved.</p>
  
  <p>The full error is as follows:</p>
  
  <pre><code>typeError: Cannot call a class as a function
  _classCallCheck
  node_modules/react-redux/es/components/connectAdvanced.js:3
    1 | var _extends = Object.assign || function (target) { for (var i = 1; i &lt; 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 | 
  &gt; 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 &amp;&amp; (typeof call === "object" || typeof call === "function") ? call : self; }
    6 | 
  </code></pre>
  
  <p>navDrawer.js</p>
  
  <pre><code>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 compose from 'recompose/compose';
  
  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 = (
          &lt;div className={classes.list}&gt;
            &lt;List&gt;Hello 1&lt;/List&gt;
            &lt;Divider /&gt;
            &lt;List&gt;Hello 2&lt;/List&gt;
          &lt;/div&gt;
        );
  
        const fullList = (
          &lt;div className={classes.fullList}&gt;
            &lt;List&gt;Hello 4&lt;/List&gt;
            &lt;Divider /&gt;
            &lt;List&gt;Hello 3&lt;/List&gt;
          &lt;/div&gt; 
        );
  
        return (
          &lt;div&gt;
            //&lt;Button onClick={this.props.toggleDrawer('left', true)}&gt;Open Left&lt;/Button&gt;
  
            &lt;SwipeableDrawer
              open={this.state.left}
              onClose={this.props.toggleDrawer('left', false)}
              onOpen={this.props.toggleDrawer('left', true)}
            &gt;
              &lt;div
                tabIndex={0}
                role="button"
                onClick={this.props.toggleDrawer('left', false)}
                onKeyDown={this.props.toggleDrawer('left', false)}
              &gt;
                {sideList}
              &lt;/div&gt;
            &lt;/SwipeableDrawer&gt;
  
          &lt;/div&gt;
        );
      }
    }
  
    NavDrawer.propTypes = {
      classes: PropTypes.object.isRequired,
    };
  
    function mapDispatchToProps(dispatch){
      return bindActionCreators({toggleDrawer}, dispatch)
    }
  
    function mapStateToProps({drawer}){
      return {drawer};
    }
  
    export default compose(withStyles(styles), connect(mapStateToProps, mapDispatchToProps)(NavDrawer));
  </code></pre>
  
  <p>navBar.js</p>
  
  <pre><code>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 compose from 'recompose/compose';
  
  
      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 (
      &lt;div className={classes.root}&gt;
        &lt;AppBar position="static"&gt;
          &lt;Toolbar&gt;
            &lt;IconButton onClick={this.props.toggleDrawer('left', true)} className={classes.menuButton} color="inherit" aria-label="Menu"&gt;
              &lt;MenuIcon /&gt;
            &lt;/IconButton&gt;
            &lt;Typography variant="title" color="inherit" className={classes.flex}&gt;
              MentalHealthApp
            &lt;/Typography&gt;
            &lt;Button color="inherit"&gt;Login&lt;/Button&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
      &lt;/div&gt;
    );
    }
  
  }
  
  NavBar.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  function mapDispatchToProps(dispatch){
    return bindActionCreators({toggleDrawer}, dispatch)
  }
  
  function mapStateToProps({drawer}){
    return {drawer};
  }
  
  export default compose(withStyles(styles), connect( mapStateToProps, mapDispatchToProps)(NavBar));
  </code></pre>
  
  <p>Mahalo for your help</p>