React : TypeError : Object(...) n'est pas une fonction dans Material UI

Question

J'essaie donc d'utiliser Material UI dans mon application react. J'ai essayé d'utiliser Material UI version 0.20.1 et 0.20.0, mais j'obtiens ce message d'erreur

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

Il pointe vers cette ligne

export default withStyles(styles)(NavBar);

J'essaie simplement de créer une barre de navigation et j'ai essayé de nombreuses choses, y compris de copier la documentation, mais cela ne semble pas fonctionner.

Voici l'ensemble du composant

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);

Voici le code dans app.js

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 (
      <MuiThemeProvider>
        <div className="App">
          <NavBar />
          <MovieList />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

J'ai deux questions : comment puis-je le réparer et que signifie ce message d'erreur ? Je comprends qu'il veut une fonction, mais où la veut-il ? Merci pour votre aide.

EDIT : Voici le message d'erreur complet

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 | 
> 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
> 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 |  }
> 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
> 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 |  }
> 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
> 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 |  }
> 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
> 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
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View compiled
(anonymous function)
http://localhost:3000/static/js/bundle.js:728:10

Answer 1

Vous avez installé material-ui v0 mais vous avez suivi les docs de material-ui version 1.

Si vous voulez utiliser material-ui v0, suivez les docs ici

Si vous voulez utiliser material-ui v1, suivez la documentation. ici