const title = 'My Minimal React Webpack Babel Setups';
const App = () => (<div><b>{title}</b><img src={img} /></div>)
This code occurs an error "ESLint Parsing Error: Unexpected token {"
my .eslintrc.js file is like that
module.exports = {
"extends": "airbnb"
};
and I install the packages like that
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
I thought that ESLint can read JSX because the token "<" doesn't occur error. (When I change the extends section in .eslintrc.js file to "airbnb-base", It occurs error "ESLint Parsing Error: Unexpected token <. But now, the token "<" doesn't occur error)
However, my ESLint cannot read the JSX syntax line {variable}
The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.
A parse error is an error message you sometimes get on Android devices when an app fails to install. The message itself is not very specific, and there are a lot of problems that can cause it.
Eslint on its own is not good enough. First install babel-eslint
:
npm install --save-dev babel-eslint
Or with yarn:
yarn add -D babel-eslint
Then add to your .eslintrc
file:
"parser": "babel-eslint"
You might want to install eslint-plugin-babel
as well, but I believe this is not needed
I've got the same error on Next.js.
These steps solved my issue:
1) Install babel-eslint:
npm install --save-dev babel-eslint
2) Add babel-eslint as a parser to eslint config
"parser": "babel-eslint"
My eslint config looks like this (.eslintrc):
{
"env": {
"browser": true,
"es6": true,
"commonjs": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"react/react-in-jsx-scope": 0,
"no-console": 1
}
}
My .eslintr has this extra configuration to enable JSX
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With