Javascript React:TypeError:Object（…）不是材质UI中的函数

所以我尝试在我的react应用程序中使用Material UI。我曾尝试使用Material UI版本0.20.1和0.20.0，但收到此错误消息

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

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

它指向这条线

export default withStyles(styles)(NavBar);

我只是想创建一个导航栏，我已经尝试了很多东西。包括从文档中复制，但似乎不起作用

这是整个组件

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

---

您已经安装了material ui v0，但遵循了material ui版本1文档

如果要使用材料ui v0，请按照文档进行操作

---

如果要使用物料ui v1，请按照文档操作

是否可以添加显示的完整堆栈跟踪？当你说“它指向这一行”时，通常会有一个其他行的列表，这些行构成了一个导致错误的序列。我希望这有助于找到错误还有一件事，你能检查一下你的

package.json

文件，看看

材质ui

库是什么版本吗？该库在上个月发布了1.0版。该版本包含了一些突破性的更改，Rohith在下面的回答中指出了其中一个。我用npm I material ui安装material ui，但现在我使用了npm install@material ui/core，解决了这个问题。非常感谢。

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