首页 > 解决方案 > ReactJS:无法解析“@babel/runtime/helpers/builtin/interopRequireDefault”

问题描述

我按照在线视频中的教程进行操作,但收到如下错误代码:

编译失败 ./node_modules/@material-ui/icons/Menu.js Module not found: Can't resolve '@babel/runtime/helpers/builtin/interopRequireDefault' inb'C:\LocalServer\static-page\node_modules\@material-ui\icons' 此错误发生在构建期间,无法消除。

这是我写的代码:

import React, {Component} from 'react';
import AppBar from '@material-ui/core/AppBar';
import ToolBar from '@material-ui/core/Toolbar';
import MenuIcon from '@material-ui/icons/Menu';
import IconButton from '@material-ui/core/IconButton';

class Header extends Component{
  render(){
    return(
      <div>
        <AppBar position="fixed" style={{backgroundColor:'#2f2f2f',boxShadow:'none',padding:'10px 0px'}}>
          <ToolBar>
            <div className="header_logo">
              <div className="font_righteous header_logo_venue">The Venue</div>
              <div className="header_logo_title">MUSICAL EVENTS</div>
            </div>
            <IconButton aria-label="Menu" color="inherit" onClick={()=>console.log('open')}>
              <MenuIcon/>
            </IconButton>
          </ToolBar>
        </AppBar>
      </div>
    );
  }
}

export default Header

从教程中说我应该将第@material-ui/core/Menu4 行的目录重命名为@material-ui/icons/Menu. 但是当我恢复到时@material-ui/core/Menu,代码正在运行,按钮工作,但没有出现图标。

但是,从教程显示程序正在运行,图标出现在它上面。

它的标题上有一个白色的汉堡按钮图标 它的标题上有一个白色的汉堡按钮图标

在此处输入图像描述 这是我尝试更改为时的错误core/Menu代码icons/Menu

这是我更改为 core/Menu 时的结果 这是我改回时的结果core/Menu

编辑:我现在拥有的 package.json:

{   "name": "static-page",   "version": "0.1.0",   "private": true,   "dependencies": {
    "@babel/runtime": "7.0.0-beta.55",
    "@material-ui/core": "^1.4.3",
    "@material-ui/icons": "^1.1.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-reveal": "^1.2.2",
    "react-scripts": "2.1.3",
    "react-scroll": "^1.7.9",
    "react-slick": "^0.23.1"   },   "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"   },   "eslintConfig": {
    "extends": "react-app"   },   "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"   ] }

标签: reactjsmaterial-ui

解决方案


发现了一个 MUI问题,它说明了完全相同的问题。解决方案@material-ui/icons@1.1.1是升级到.

由于您具有@material-ui/icons@^1.1.0依赖项,因此删除node_modulesnpm install再次运行就足够了。


推荐阅读