javascript - React: TypeError: Object(...) is not a function in Material UI

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

TypeError: Object(...) is not a function

It points to this line

export default withStyles(styles)(NavBar);

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.

Here is the whole ponent

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 => ({
  root: {
    flexGrow: 1,
  }
});

const NavBar = (props) => {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="title" color="inherit">
            Title
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default withStyles(styles)(NavBar);

Below is the code in app.js

import React, { Component } from 'react';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import NavBar from './ponents/NavBar/NavBar';
import MovieList from './ponents/grid/MovieList'

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <NavBar />
          <MovieList />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

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.

EDIT: Here is the whole error message

TypeError: Object(...) is not a function
./src/ponents/NavBar/NavBar.js            
C:/Users/Pc/Documents/projects/netflix/front_end/
src/ponents/NavBar/NavBar.js:28
  25 |   );
  26 | }
  27 | 
> 28 | export default withStyles(styles)(NavBar);
  29 | //export default NavBar;
  30 | 
  31 | 
View piled
__webpack_require__
C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap         

32b38f70953f3c9e4ae3:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports,     
hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View piled
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 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View piled
./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
> 678 | modules[moduleId].call(module.exports, module, module.exports, 
hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View piled
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 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View piled
./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
> 678 | modules[moduleId].call(module.exports, module, module.exports,     
hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View piled
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 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View piled
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
> 678 | modules[moduleId].call(module.exports, module, module.exports, 
hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View piled
./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
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View piled
(anonymous function)
http://localhost:3000/static/js/bundle.js:728:10

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

TypeError: Object(...) is not a function

It points to this line

export default withStyles(styles)(NavBar);

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.

Here is the whole ponent

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 => ({
  root: {
    flexGrow: 1,
  }
});

const NavBar = (props) => {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="title" color="inherit">
            Title
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default withStyles(styles)(NavBar);

Below is the code in app.js

import React, { Component } from 'react';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import NavBar from './ponents/NavBar/NavBar';
import MovieList from './ponents/grid/MovieList'

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <NavBar />
          <MovieList />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

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.

EDIT: Here is the whole error message

TypeError: Object(...) is not a function
./src/ponents/NavBar/NavBar.js            
C:/Users/Pc/Documents/projects/netflix/front_end/
src/ponents/NavBar/NavBar.js:28
  25 |   );
  26 | }
  27 | 
> 28 | export default withStyles(styles)(NavBar);
  29 | //export default NavBar;
  30 | 
  31 | 
View piled
__webpack_require__
C:/Users/Pc/Documents/projects/netflix/front_end/webpack/bootstrap         

32b38f70953f3c9e4ae3:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports,     
hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View piled
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 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View piled
./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
> 678 | modules[moduleId].call(module.exports, module, module.exports, 
hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View piled
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 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View piled
./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
> 678 | modules[moduleId].call(module.exports, module, module.exports,     
hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View piled
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 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View piled
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
> 678 | modules[moduleId].call(module.exports, module, module.exports, 
hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View piled
./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
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View piled
(anonymous function)
http://localhost:3000/static/js/bundle.js:728:10

Share Improve this question edited Jun 9, 2018 at 9:19 asked Jun 8, 2018 at 15:40 ranjith 1952 gold badges2 silver badges10 bronze badges

Can you add the full stack trace that appears? When you say "It points to this line", there is usually a list of other lines that form a sequence of what exactly caused the error. – Pat Needham Commented Jun 8, 2018 at 22:09
I have now added the whole error meassage. I hope this helps finding the error – ranjith Commented Jun 9, 2018 at 9:21
One more thing, can you check inside you're package.json file to see what version the material-ui library is? The library hit version 1.0 within the last month. The v1.0.0-rc.0 release included some breaking changes, one of which Rohith pointed out in his answer below. – Pat Needham Commented Jun 9, 2018 at 10:56

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

You have installed material-ui v0 but you have followed material-ui version 1 docs.

If you want to use material-ui v0 follow the docs here

If you want to use material-ui v1 follow the docs here

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React: TypeError: Object(...) is not a function in Material UI - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)