We Keep Coding

ESLint in React: Parsing error: Unexpected token = [duplicate]

This question already has answers here:
Why does ESLint not recognize my class arrow functions?
(2 answers)
Unexpected token "=" reported while running eslint on arrow functions
(1 answer)
Closed last year.
I'm getting this error:
error Generating development JavaScript bundle failed 92:7 error
Parsing error: Unexpected token =
I am using gatsby & a custom eslintrc:
{
"parser": "babel-eslint", // uses babel-eslint transforms
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2020,
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"settings": {
"react": {
"version": "detect" // detect react version
}
},
"env": {
"node": true, // defines things like process.env when generating through node
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended", // use recommended configs
"plugin:react/recommended"
]
}
I found solutions to this problem in several places, but none of it worked. The most common solution I found was "parser": "babel-eslint" to the eslintrc file. But I already have that. Don't know what I can try anymore.
The files this error occurs in are usually files written in an older style React, but I don't know why they shouldn't work anymore?
For example:
class Post extends Component {
constructor(props) {
super(props)
this.state = {
isVisible: true,
isOpen: false,
}
this.toggleIsVisible = this.toggleIsVisible.bind(this)
this.toggleModal = this.toggleModal.bind(this)
}
toggleIsVisible = () => { <=== HERE ESLINT COMPLAINS ABOUT THE FIRST, DEFINING EQUALS-SIGN
this.setState({ isVisible: !this.state.isVisible })
}
Another piece of code eslint doesn't like is this, in a different file:
try {
await Function(values)
} catch { <==== ESLINT DOESNT LIKE THIS OPEN BRACKET, SIMILAR ERROR MESSAGE: "Unexpected token {"
setFormState('error')
}
I have also tried disabling the line in eslint as well as the full file, but didn't work either. Oh, and when I chuck eslint out completely, everything works fine and I can run as well as build my project.

Module build failed - no ESLint configuration found after import

I have worked on a vue project which I created using vue cli. Because of this, eslint is also included in the project. Up until now I haven't done much with eslint. If I understood correctly, eslint helps with stylistic errors, semantic errors etc in the code to identify potential problems.
I only rarely used // eslint-disable-next-line if there was e.g. a console.log clashing with the rules.
Now I wanted to include some new javascript code into the project. This code comes from someone else, so I cloned the repo and then just imported it in my main.js via a relative path to the folder/file that I have cloned. I think this was okay. However now I get some problems with eslint as the imported file has no config for eslint.
This is the exact error originating from the import:
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found
I am not sure what to do now, even though I already searched for the error.
I only saw some config for eslint in the package.json, I think. If it would help to have its content or something else, please say so and I will add it!
How can I tackle this problem? Thanks in advance!

This might be a long shot, but this is the .eslintrc.js file I shove into all my react projects at the root directory to get rid of that error. You'll want to change some of the settings but this is the basic structure.
module.exports = {
parser: 'babel-eslint',
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
jest: true,
},
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
},
plugins: ['react', 'react-hooks'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:json/recommended',
'prettier',
],
settings: {
react: {
version: 'detect',
},
},
rules: {
'react/prop-types': ['off'],
'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }],
},
};

How can I fix ESLint Parsing Error for unexpected token "/"?

const Index = () => (
<div>
<p>Hello World</p>
<Link href="/posts">
<a>Posts</a>
</Link>
</div>
)
ESLint is returning a Parsing Error (Unexpected token) for the closing </p> tag. What am I missing? Are normal HTML attributes not allowed in JSX? (The div seems to work fine)
The exact error is:
[eslint] Parsing error: Unexpected token "/"
ESLint is installed
ESLint React is installed
ESLint React is configured in .eslintrc.json
EDIT:
Using VS Code (with ESLint plugin)
Partial .eslintrc.json:
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
...
}

I received a similar error in Visual Studio 2017 (not Code).
The error "ESLint encountered a parsing error" occurred at the beginning of an import statement.
janniks' solution did not work for me. I suspect because "es6: true "enable[s] all ECMAScript 6 features except for modules".
Since I'm using TypeScript, I don't want to use babel-eslint, per Sean's answer (though it did resolve the parsing error in a plain JS file).
The key trade-off can be summarized as: babel-eslint supports
additional syntax which TypeScript itself does not, but
typescript-eslint supports creating rules based on type information,
which is not available to babel because there is no type-checker.
Instead, I continued to use "#typescript-eslint/parser". Below is my minimal working .eslintrc:
{
"parser": "#typescript-eslint/parser",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"quotes": [ "error", "single" ]
}
}
Note: The error was resolved in plain JS files (not TS) even if I removed the "parser" line, therefore using the default eslint parser.

I encountered the same issue today while setting up a new React project. The fix that worked for me was installing the babel-eslint package (npm install babel-eslint --save-dev or yarn add babel-eslint -D). I then added "parser": "babel-eslint" to my .eslintrc config file. This seems to help babel and ESLint get along a little better than using the default parser.

I'm not sure what caused the problem, but this solved it for me. I changed the .eslintrc.json to the following:
{
//"env": {
// "browser": true,
// "commonjs": true,
// "es6": true
//},
"extends": [
"standard",
"standard-react"
]
}
I left in my original rules as well.
This problem seems to have multiple different causes, so check out the other answers as well.

Flow type checking performance in VSCode

I've built a new project using create-react-app and wanted to start it using a static type checking, there are two choices now in market:
TypeScript
Flow
I kind want to go with Flow just because it's also built by Facebook and should(?) have better support for a React project.
So what I'm struggling it is type-checking performance in VSCode. Once I created my project, I ran the following commands:
yarn add -D eslint-plugin-prettier husky prettier pretty-quick babel-eslint eslint-plugin-flowtype flow-bin eslint
Added Airbnb React style: eslint --init
Ran flow init
Installed Flow Language Support
Disabled JavaScript and TypeScript language support as recommended
Added following config to my Workspace settings:
-
{
"flow.useNPMPackagedFlow": true,
"flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow"
}
My .eslintrc is as follows:
{
"extends": ["airbnb", "plugin:flowtype/recommended"],
"plugins": ["prettier", "flowtype"],
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"jest": true,
"node": true
},
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"prettier/prettier": [
"error",
{
"printWidth": 80,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"semi": true,
"bracketSpacing": true
}
]
},
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
}
}
However Flow seems to be quite slow on my machine, I have added a simple function to my App.js:
const sum = (a: number, b: number) => a + b;
sum(1, '12323');
And it takes up to 10 seconds to validate my code which is quite a bummer. Is there a way to speed this up?
Maybe it's worth to start with TypeScript and don't bother with Flow?

There are some open issues regarding possible memory leaks and performance related problems with flow, some links below:
https://github.com/facebook/flow/issues/2152
https://github.com/flowtype/flow-bin/issues/70
Both tools are great and have their pros and cons, I would personally recommend to give a try to TypeScript too and perform a comparison yourself.
In my own experience on a large code base I have found TypeScript:
more performant
more types for external libraries
larger community

Why eslint does not check JS?

Eslint loads, but does not fix 'problem js'...
File eslint.config.json
{
"ecmaFeatures": {
"jsx": true
},
"env": {
"browser": true,
"node": true,
"jquery": true
},
"rules": {
"quotes": 0,
"no-trailing-space": 0,
"eol-last": 0,
"no-unused-vars":0,
"no-underscore-dangle":0,
"no-alert": 0,
"no-lone-blocks": 0
},
"globals": {
jQuery: true,
$ : true
}
}
In JS file i can use global variables...
Lint does not check JS.

If you are using version newer then 1.0.0 none of the rules are enabled by default. Since your config above only shows disabling rules, that means eslint runs with no enabled rules, and as such, doesn't find any errors. What you might want to do is add the following line to your config:
{
"extends": "eslint:recommended"
}
which will enabled all of the rules marked as recommended on this page.
Or you can also extend from existing configs that you can find on NPM by searching for eslint-config-

I had same issue. Adding below line in the .eslintrc helped:
"extends": ["eslint:recommended", "plugin:react/recommended"]
Note: extends option might be already there but without the plugin option.