2

I'm getting the following error while tried to run the application in Mac and Ubuntu. But it runs without any errors in Windows platform. How can i resolve this. Is there any platform specific code in Material UI beta version(v1.0.0-beta.46). I have used the withStyles component, which is an higher order component of material ui.

Error:

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

The below is my code

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);
udayakumar
  • 639
  • 1
  • 7
  • 16
Jeeva
  • 1,550
  • 12
  • 15
  • Import it ! `import { withStyles } from 'material-ui/styles'` – LaPoule May 09 '18 at 14:33
  • Not `import withStyles from 'material-ui/styles'` but `import { withStyles } from 'material-ui/styles'` See : https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import/36796281 – LaPoule May 09 '18 at 15:16
  • But even after importing it, It shows the above error. But it works without even importing it in windows. – Jeeva May 09 '18 at 15:20

2 Answers2

4

You Can use this, It will be working.

npm install @babel/runtime
udayakumar
  • 639
  • 1
  • 7
  • 16
2

Try the beta version

npm install  @babel/runtime@7.0.0-beta.55
Nitheesh K P
  • 1,090
  • 8
  • 17