title: React: TypeError: Object(...) is not a function in Material UI
body: <p>So I am trying to use Material UI in my react app. I have tried using Material UI version 0.20.1 and 0.20.0, but get this error message</p>
  
  <pre><code>TypeError: Object(...) is not a function
  </code></pre>
  
  <p>It points to this line</p>
  
  <pre><code>export default withStyles(styles)(NavBar);
  </code></pre>
  
  <p>I am just trying to create a Navbar and I have tried many things. including copying from the documentation, but it does not seem to work.</p>
  
  <p>Here is the whole component</p>
  
  <pre><code>import React from 'react';
  import { withStyles } from 'material-ui/styles';
  import AppBar from 'material-ui/AppBar';
  import Toolbar from 'material-ui/Toolbar';
  import Typography from 'material-ui/styles/typography';
  
  const styles = theme =&gt; ({
    root: {
      flexGrow: 1,
    }
  });
  
  const NavBar = (props) =&gt; {
    const { classes } = props;
    return (
      &lt;div className={classes.root}&gt;
        &lt;AppBar position="static" color="default"&gt;
          &lt;Toolbar&gt;
            &lt;Typography variant="title" color="inherit"&gt;
              Title
            &lt;/Typography&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
      &lt;/div&gt;
    );
  }
  
  export default withStyles(styles)(NavBar);
  </code></pre>
  
  <p>Below is the code in app.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import NavBar from './components/NavBar/NavBar';
  import MovieList from './components/grid/MovieList'
  
  class App extends Component {
    render() {
      return (
        &lt;MuiThemeProvider&gt;
          &lt;div className="App"&gt;
            &lt;NavBar /&gt;
            &lt;MovieList /&gt;
          &lt;/div&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I have two questions; How do I fix it and what does this error message mean.
  I understand that it wants a function, but where does it want it.
  Thank you for the help.</p>
  
  <p>EDIT:
  Here is the whole error message</p>
  
  <pre><code>TypeError: Object(...) is not a function
  ./src/components/NavBar/NavBar.js            
  C:/Users/Pc/Documents/projects/netflix/front_end/
  src/components/NavBar/NavBar.js:28
    25 |   );
    26 | }
    27 | 
  &gt; 28 | export default withStyles(styles)(NavBar);
    29 | //export default NavBar;
    30 | 
    31 | 
  View compiled
  __webpack_require__
  C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap         
  
  32b38f70953f3c9e4ae3:678
    675 | };
    676 | 
    677 | // Execute the module function
  &gt; 678 | modules[moduleId].call(module.exports, module, module.exports,     
  hotCreateRequire(moduleId));
    679 | 
    680 | // Flag the module as loaded
    681 | module.l = true;
  View compiled
  fn
  C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap 
  32b38f70953f3c9e4ae3:88
    85 |      console.warn("[HMR] unexpected require(" + request + ") from     
  disposed module " + moduleId);
    86 |      hotCurrentParents = [];
    87 |  }
  &gt; 88 |  return __webpack_require__(request);
    89 | };
    90 | var ObjectFactory = function ObjectFactory(name) {
    91 |  return {
  View compiled
  ./src/App.js
  http://localhost:3000/static/js/bundle.js:52716:84
  __webpack_require__
  C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap 
  32b38f70953f3c9e4ae3:678
    675 | };
    676 | 
    677 | // Execute the module function
  &gt; 678 | modules[moduleId].call(module.exports, module, module.exports, 
  hotCreateRequire(moduleId));
    679 | 
    680 | // Flag the module as loaded
    681 | module.l = true;
  View compiled
  fn
  C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap 
  32b38f70953f3c9e4ae3:88
    85 |      console.warn("[HMR] unexpected require(" + request + ") from     
  disposed module " + moduleId);
    86 |      hotCurrentParents = [];
    87 |  }
  &gt; 88 |  return __webpack_require__(request);
    89 | };
    90 | var ObjectFactory = function ObjectFactory(name) {
    91 |  return {
  View compiled
  ./src/index.js
  http://localhost:3000/static/js/bundle.js:53044:63
  __webpack_require__
  C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap 
  32b38f70953f3c9e4ae3:678
    675 | };
    676 | 
    677 | // Execute the module function
  &gt; 678 | modules[moduleId].call(module.exports, module, module.exports,     
  hotCreateRequire(moduleId));
    679 | 
    680 | // Flag the module as loaded
    681 | module.l = true;
  View compiled
  fn
  C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap 
  32b38f70953f3c9e4ae3:88
    85 |      console.warn("[HMR] unexpected require(" + request + ") from     
  disposed module " + moduleId);
    86 |      hotCurrentParents = [];
    87 |  }
  &gt; 88 |  return __webpack_require__(request);
    89 | };
    90 | var ObjectFactory = function ObjectFactory(name) {
    91 |  return {
  View compiled
  0
  http://localhost:3000/static/js/bundle.js:53275:18
  __webpack_require__
  C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap 
  32b38f70953f3c9e4ae3:678
    675 | };
    676 | 
    677 | // Execute the module function
  &gt; 678 | modules[moduleId].call(module.exports, module, module.exports, 
  hotCreateRequire(moduleId));
    679 | 
    680 | // Flag the module as loaded
    681 | module.l = true;
  View compiled
  ./node_modules/ansi-regex/index.js.module.exports
  C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap 
  32b38f70953f3c9e4ae3:724
    721 | __webpack_require__.h = function() { return hotCurrentHash; };
    722 | 
    723 | // Load entry module and return exports
  &gt; 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
    725 | 
    726 | 
    727 | 
  View compiled
  (anonymous function)
  http://localhost:3000/static/js/bundle.js:728:10
  </code></pre>