Unexpected token = import/no-named-as-default eslint error

I create an AppBar component and I want to export the component in the App component.

AppBar

App

src/components/appbar.jsx:

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import LeftDrawer from './leftDrawer';

const styles =
root:
flexGrow: 1,
,
flex:
flexGrow: 1,
,
menuButton:
marginLeft: -12,
marginRight: 20,
,
;

class ButtonAppBar extends React.Component
state =
left: false,

toggleDrawer = (side, open) => () =>
this.setState(
[side]: open,
);
;
render()
const classes = this.props;
return (
<div className=classes.root>
<AppBar position="static">
<Toolbar>
<IconButton
className=classes.menuButton
color="inherit"
aria-label="Menu"
onClick=this.toggleDrawer('left', true)
>
<MenuIcon />
</IconButton>
<LeftDrawer
open=this.state.left
toggleDrawer=this.toggleDrawer
/>
</Toolbar>
</AppBar>
</div>
);
;


ButtonAppBar.propTypes =
classes: PropTypes.object.isRequired,
;

export default withStyles(styles)(ButtonAppBar);


src/app.jsx:

import React from 'react';
import ButtonAppBar from './components/appBar';


const App = () => (
<div>
<ButtonAppBar />
</div>
);

export default App;


.estlinrc.json:


"extends": [
"airbnb", "prettier"
],
"env":
"browser": true
,
"rules":
"react/forbid-prop-types": "off"
,
"settings":
"import/extensions": [".jsx", ".js"],
"import/resolver":
"webpack":
"config": "webpack.config.js"






.babelrc.json:


"presets": [
"env",
"react"
],
"plugins": ["transform-class-properties"]



package.json:

"devDependencies":
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"eslint": "^5.4.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
"prettier": "^1.14.2",
"webpack": "^4.17.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"


When I run the instruction:

./node_modules/.bin/eslint --ext .js,.jsx ./


I got this error:

Parse errors in imported module './components/appBar': Unexpected token = (24:9) import/no-named-as-default


I found a similar question here How do I resolve eslint import/no-named-as-default and in the accepted answer it disable the rule import/no-named-as-default.
Is there any solution to keep this rule and update the code to not get this error?

import/no-named-as-default

1 Answer
1

Seems you're either not using babel-eslint as the parser, missing the babel-transform-class-properties plugin in your setup, or eslint is not configured to use it, or it's an older version of eslint.

Hope one of these is the culprit!

.babelrc.json

package.json

babel-eslint

"parser": "babel-eslint"

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.