我如何解决 React+Material UI 中的此错误

2024-05-04

当我尝试在 Mac 和 Ubuntu 中运行该应用程序时,出现以下错误。但在Windows平台下运行没有任何错误。我该如何解决这个问题。 Material UI beta 版本(v1.0.0-beta.46)中是否有任何平台特定的代码。我使用了withStyles组件,它是material ui的一个高阶组件。

Error:

/node_modules/material-ui/styles/withStyles.js
Module not found: Can't resolve '@babel/runtime/core-js/map'

下面是我的代码

import React from 'react';    
import PropTypes from 'prop-types';     
import withStyles from 'material-ui/styles';    
import AppBar from 'material-ui/AppBar';    
import Toolbar from 'material-ui/Toolbar';    
import Typography from 'material-ui/Typography';    
import Button from 'material-ui/Button';    
import Avatar from 'material-ui/Avatar';    
import classNames from 'classnames';    
import AppIcon from '../../assets/img/myAppIcon.png';

const styles = theme => ({                
    root: {
        flexGrow: 1,
    },
    flex: {
        flex: 1,
    },
    menuButton: {
            marginLeft: -12,
            marginRight: 20,
    },
    loginButton:{
            alignContent: "flex-end"
    },
    avatar: {
            margin: 10,
    },
    toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: '0 8px',
        ...theme.mixins.toolbar,
    },
    content: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.default,
        padding: theme.spacing.unit * 3,
    },
});

// Here is my functional component which renders the AppBar with login button at the right hand side.

function Layout(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <AppBar
          position="absolute"
          className={classNames(classes.appBar)}
        >
          <Toolbar>                    
            <Avatar src={AppIcon} className={classes.avatar} />
            <Typography variant="title" color="inherit" noWrap>
              MyApp
            </Typography>
            <Typography variant="title" color="inherit" noWrap className={classes.flex} />
            <Button color="inherit">Login</Button>
          </Toolbar>          
        </AppBar>  
        <main className={classes.content}>
            <div className={classes.toolbar} />
            {props.children}
        </main>        
    </div>
  );
}

Layout.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

//Here I'm getting an error on executing this
export default withStyles(styles, { withTheme: true })(Layout);

你可以使用这个,它会起作用的。

npm install @babel/runtime
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我如何解决 React+Material UI 中的此错误 的相关文章

  • 没有 Props 的 TypeScript React State

    我想利用 TypeScript 中的静态和强类型 但仅限于状态 因为我不打算采用任何道具 当我尝试传递接口时 最终出现错误 import as React from react import Link from react router d
  • 使用 React.js + Express.js 发送电子邮件

    我在 ES6 中使用 React js 构建了一个 Web 应用程序 我目前想要创建一个基本的 联系我们 页面并想要发送电子邮件 我是 React 新手 刚刚发现我实际上无法使用 React 本身发送电子邮件 我正在遵循教程nodemail
  • 在react-big-calendar中单击事件时添加弹出窗口?

    当单击事件时 我无法将弹出窗口添加到事件中 弹出窗口似乎只显示在事件槽中 而不是显示在事件槽的顶部 此外 由于我为事件创建了一个自定义组件并尝试在自定义组件中实现弹出窗口 因此只有当我单击事件名称时才会显示弹出窗口 这是代码 class C
  • 在旧浏览器上使用 Fetch 的 ReactJS

    我正在使用 Webpack 和 Babel 实现 React JS 但是 我在让 Fetch 与 IE 11 配合使用时遇到问题 我的 babelrc 文件中有以下内容 presets env stage 0 react 以及我的 webp
  • React 在同一组件中渲染多个模态

    我对 React 和一般编码都很陌生 我试图在同一组件中渲染多个模态 但它们都是同时渲染的 因此看起来所有链接都在最后一个模态中渲染文本 这是状态设置的地方 class Header extends React Component cons
  • ReactCSSTransitionGroup 组件WillLeave 未调用

    我尝试使用 ReactCssTransition 但不知何故该事件没有被调用 componentWillLeave 这是我的组件 import React Component from react import TransitionGrou
  • 如何在 React 中测试表单提交?

    我有以下 React 组件 export default class SignUpForm extends React Component doSignupForm event Some API call render return div
  • 如何在React中的Material-UI选择框中设置默认值?

    我在用选择框 https material ui com demos selects 来自材料用户界面 我想显示默认选择的 选择值 选项 但之后用户无法选择此选项
  • 如何正确更新反应钩子状态内的数组

    我一直在尝试更新代表反应状态的数组内的对象 当输入的值更改时应该更新该对象 我可以自己找到一种方法来更新它 但我不太确定这是正确的方法 因为当我打开反应开发工具并转到组件选项卡并单击我正在处理的组件时 在输入输入时状态不会立即更新 并且为了
  • 如何让孩子做出反应

    我正在尝试做我自己的Tabs组件 以便我可以在我的应用程序中使用选项卡 然而 我似乎在尝试按类型提取我需要的子组件时遇到问题 import React from react export class Tabs extends React C
  • React - 检查元素在 DOM 中是否可见

    我正在构建一个表单 用户需要回答一系列问题 单选按钮 然后才能进入下一个屏幕 对于字段验证 我使用 yup npm 包 和 redux 作为状态管理 对于一种特定场景 组合 会显示一个新屏幕 div 要求用户进行确认 复选框 然后用户才能继
  • useLocation 挂钩 - 确定过去的位置

    根据 React Router 5 1文档 https v5 reactrouter com web api location应该可以看到 应用程序现在在哪里 你想让它去哪里 甚至它曾经在哪里 在我的应用程序中 我需要查看 它在哪里 我访问
  • 有没有办法让 React 为孩子自动定义“键”?

    我正在学习 React 我偶然发现了 动态儿童 的这个怪癖 带有代码示例的序言 Render Pass 1
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • 如何获取使用 .map 渲染的第一个元素的 ref?

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在
  • Google 将自动完成功能放置在 React 组件中

    我正在尝试构建一个谷歌地图组件 谷歌地图 API v3 一切正常 但自动完成功能不行 这是我正在使用的代码 Google 地图组件 import React Component from react import ReactDOM from
  • 在 JSPdf 中嵌入二进制文件

    我在用着JsPDF https www npmjs com package jspdf将 html 内容导出到下载的 PDF 考虑以下示例 该示例获取一些 HTML 内容并将其输出到下载的 PDF 文件 使用JsPdf import Rea
  • Material-ui :从主题中提取颜色

    我想使用我的颜色material ui像这样的组件内的主题 const MyComponent props gt
  • × TypeError:无法读取未定义的属性(读取“map”)

    当我尝试运行此代码时 它给出了此错误 TypeError 无法读取未定义的属性 读取 map 为什么会发生这种情况 我怎样才能让它发挥作用 import React from react import Grid from material
  • React Context - Context.Consumer 与 Class.contextType

    我正在学习新引入的 React Context API 但我注意到它在示例中的消耗存在一些不一致 有的还是用原来的上下文 消费者HOC 方法 而有些 包括 React 文档 使用静态类 contextType method 有什么区别以及为

随机推荐

  • javax.management.InstanceNotFoundException: org.springframework.boot:type=Admin,name=SpringApplication

    我开发了一个 Spring boot 应用程序 该应用程序的功能运行良好 但是 在启动时 我多次看到以下异常 当我几周前运行相同的应用程序时 我没有看到任何此类异常 此后代码库没有改变 我想知道它是否与环境有关 我发帖的原因是我想更多地了解
  • 能够删除特定约束的增量 SMT 求解器

    是否有增量 SMT 求解器或用于某些增量 SMT 求解器的 API 我可以在其中增量添加约束 在其中我可以通过某个标签 名称唯一地标识每个约束 我想唯一地标识约束的原因是这样我可以稍后通过指定标签 名称来删除它们 需要放弃约束是因为我之前的
  • 对 Qsort 和指针感到困惑

    我是一名 C 初学者程序员 想要习惯术语和指针 我在寻找对数值数组元素进行排序的方法时发现了以下工作函数原型 该函数是 qsort 它使用指针 现在我的理解是 const 一词确保值 a 和 b 不变 但指针不变 如果我在这里错了 请纠正我
  • Xcode 4.6.2 应用程序每秒运行一次就会崩溃

    Xcode 4 6 2 似乎有很多 bug 当我第二次跑步时any项目我在第一秒内就发生 SIGABRT 崩溃 我完全删除了 Xcode 并重新安装 是的 我尝试关闭然后再次打开 我还删除了命令行工具和模拟器 但这也没有帮助 好的 我找到了
  • 使用 Volley 时出现 SSL 异常

    我在 Android 中使用 Volley 来执行我的应用程序请求 不幸的是 我收到以下错误 com android volley NoConnectionError javax net ssl SSLHandshakeException
  • #pragma 指令是否依赖于编译器?

    我知道并且我用过 pragma startup and pragma exit之前 但当我执行以下代码时 它仅输出In main 谁能告诉我这里发生了什么事 include
  • XPCOM是什么? XPCOM 与 COM?

    我无法理解 XPCOM 它与 COM 有什么不同 是什么让它跨平台 它是一个包含一组可用于完成某些工作的库的框架吗 另外 组件对象模型是否意味着每个功能都在组件中实现 因此我们可以在不知道详细实现的情况下使用它 你能帮我理解这一点吗 谢谢
  • 为什么向列表<>添加新值会覆盖列表<>中以前的值

    我本质上是试图将多个项目添加到列表中 但最后所有项目的值都等于最后一个项目 public class Tag public string TagName get set List
  • Java 6 内存使用过多

    对于大型应用程序 Java 6 消耗的内存是否比您预期的要多 我有一个已经开发多年的应用程序 到目前为止 在我的特定测试配置中 该应用程序占用了大约 30 40 MB 的空间 现在 对于 Java 6u10 和 11 活动时需要数百个时间
  • 如果 POST 成功但没有创建任何新内容,我们应该返回什么状态代码?

    我们有一个端点 当您发布创建新版本的资源时 它会返回 201 和新创建的资源的位置 它根据当前版本和发布的版本 使用类似 semver 的规则集 的比较来确定新版本号 如果您发布的版本与现有版本相同 则不会更新版本号 在这种情况下我们应该返
  • Windows 10 上具有 kernel32.dll 的 Dependency Walker

    我尝试打开kernel32 dll在 Windows 10 上使用 Dependency Walker 我收到以下错误和警告 错误 未找到至少一个所需的隐式或转发依赖项 警告 至少未找到一个延迟加载依赖模块 Screenshot 我运行的是
  • 强制 Scala 特征实现某种方法

    有没有办法指定特征必须提供方法的具体实现 给定一些 mixin class A extends B with C foo 如果出现以下任一情况 程序将编译A B or C实施foo 但是我们如何才能强制 例如 B包含装有foo的实施 您可以
  • 装饰器错误:NoneType 对象不可调用

    我写了一个这样的函数装饰器 def tsfunc func def wrappedFunc print s called func name return func return wrappedFunc tsfunc def foo pas
  • Android 多点触控:ACTION_UP 并不总是被调用?

    我开发了一个在视图中处理多点触控的 Android 应用程序 我基本上跟踪可能发生的几个 MotionEvent 例如 ACTION UP ACTION MOVE 我在 View 类中覆盖的 onTouch 方法如下所示 public bo
  • Kafka 0.8.2 中是否可以向现有主题添加分区

    我有一个Kafka https kafka apache org 集群运行有 2 个分区 我一直在寻找一种将分区计数增加到 3 的方法 但是 我不想丢失有关该主题的现有消息 我尝试停下来Kafka https kafka apache or
  • 向 Windows 任务栏缩略图添加按钮 JavaFX?

    这个问题已经闲置一年多了 我的问题仍然没有解决方案 我编辑此内容是为了澄清我的问题并引起人们对它的新关注 如果您使用 Windows 您可能知道将程序图标悬停在任务栏上时显示的小预览图像 缩略图 某些程序 例如 Spotify Git 扩展
  • 从应用服务中运行的 .net core 应用程序发送日志以进行日志分析

    我尝试寻找 net core 2 0 应用程序将应用程序日志发送到日志分析工作区的最简单方法 该应用程序在azure中的应用服务下运行 我尝试启用 诊断设置 并将日志存档到日志分析 但是 我没有在 AppServiceHTTPLogs 中看
  • 两个具有共享缓冲区的等待线程(生产者/消费者)

    我试图让一堆生产者线程等待 直到缓冲区有空间容纳某个项目 然后将项目放入缓冲区 如果没有更多空间 则返回睡眠状态 同时应该有一堆消费者线程等待 直到缓冲区中有东西 然后尽可能地从缓冲区中获取东西 如果缓冲区为空则返回睡眠状态 在伪代码中 这
  • 如何使用 #pragma 在 G++ 中启用优化

    我想在没有命令行参数的情况下启用 g 优化 我知道 GCC 可以通过写来做到这一点 pragma GCC optimize 2 在我的代码中 但它似乎在 G 中不起作用 此页面可能有帮助 http gcc gnu org onlinedoc
  • 我如何解决 React+Material UI 中的此错误

    当我尝试在 Mac 和 Ubuntu 中运行该应用程序时 出现以下错误 但在Windows平台下运行没有任何错误 我该如何解决这个问题 Material UI beta 版本 v1 0 0 beta 46 中是否有任何平台特定的代码 我使用