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.
Related
I recently changed my laptop and every day I find a new problem and no solution. I used to create a react app and if I forgot to return the jsx in a react component, I would see in chrome something like "Error: App(...) Nothing was returned from render .... etc. Don't remember if there was an error in vscode but I would swear there was too.
Now, I do that on porpuse, created a fresh react app with npx create-react-app and removed the return from App and do a console log in the component function. When I npm start, I can see the console log in dev tools, no error in vscode, no error in chrome. Just white screen and the terminal doesn't show any errors either!
In other projects I always use eslint + prettier + airbnb but tried to remove everything (except the plugins in vscode from eslint and prettier) and did a fresh create-react-app with nothing, same result, so I assume that's not the problem.
Also, I would like to also ask if my eslint config has any issue or everything is fine? Would you modify anything? Mostly for react.
Another problem, when I add "prettier/prettier": "error" in eslintrc to see all prettier errors, it forces me to do double quotes, even though my extension says single quotes and my .prettierrc file also do singleQuote true. The only solution is to remove the eslintrc rule but I can't see prettier errors anymore.
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"airbnb/hooks",
"prettier",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended"
],
"parser": "#babel/eslint-parser",
"parserOptions": {
"requireConfigFile": false,
"babelOptions": {
"presets": ["#babel/preset-react"]
},
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 13,
"sourceType": "module"
},
"plugins": ["prettier", "react", "react-hooks"],
"rules": {
"prettier/prettier": "error",
"react/function-component-definition": [
"error",
{ "namedComponents": "arrow-function" }
]
}
}
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.
I'm having an issue where the JavaScript produced by the TypeScript compiler doesn't follow the ESLint rules set for the project.
Here is the TypeScript configuration (tsconfig.json):
{
"compilerOptions": {
"lib": ["es2015"],
"module": "commonjs",
"outDir": "dist",
"sourceMap": true,
"strict": true,
"target": "es2015"
},
"include": [
"src"
]
}
Here is the ESLint configuration (.eslintrc.json):
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"standard",
"plugin:#typescript-eslint/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 11
},
"plugins": [
"#typescript-eslint"
],
"rules": {
}
}
I'm using VS Code and when editing TypeScript the errors from ESLint are shown. However, the problems I am having are: The compiler will allow code which doesn't conform to the ESLint rules to pass through, and the JavaScript code which is produced doesn't conform to the rules either. For example, it will terminate each statement with a semicolon, when it should not.
I'm new to TypeScript and I'm pretty sure it's something basic I'm doing wrong, but haven't been able to find this info (so far) in any documentation.
Your guidance is appreciated.
ESLint is not in the business of type-checking your typescript code. You should rely on TypeScript for checking for type errors like tslint (Configure it accordingly). Example tslint.json
{
"rulesDirectory": ["node_modules/codelyzer"],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,
.....
}
ESLint is not involved with the bundle build pipeline. you may however run eslint before the bundle build in order to fail the whole build in case there are linting issues.
If you want to make any changes to the code generated it should be done with webpack plugins / typescript.
So for example, if you want to remove semicolons, this probably should be done with your minifier/compressor. such as uglifyjs : https://github.com/mishoo/UglifyJS#output-options
all you are missing is a property call project on the parserOptions of your eslint file.
....
“parserOptions”:{
.....
“project”: [“./tsconfig.json”]
.....
you can algo add more things to both files as well
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: ['>', '}'] }],
},
};
I have a problem with eslint, it gives me [Parsing Error The keyword import is reserve] this is only occur in sublime, in atom editor work well. I have eslint
.eslintrc.js
module.exports = {
"extends": "airbnb",
"plugins": [
"react"
]
};
package.json
{
"name": "paint",
"version": "0.0.0",
"description": "paint on the browser",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"paint",
"javascript"
],
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^11.2.0",
"eslint": "^2.2.0",
"eslint-config-airbnb": "^2.1.1",
"eslint-plugin-react": "^3.11.2",
"gulp-babel": "^5.2.1",
"gulp-clean": "^0.3.1",
"gulp-stylus": "^2.2.0",
"vinyl-source-stream": "^1.1.0"
}
}
Add this to the root of your .eslintrc.json (formerly .eslintrc)
"parser": "babel-eslint"
and make sure to run:
npm install babel-eslint --save-dev
The eslint option that solves the "The keyword import is reserved" error is parserOptions.sourceType. Setting it to "module" allows the import keyword to be used.
.eslintrc
{
"parserOptions": {
"sourceType": "module"
}
}
Docs: https://eslint.org/docs/user-guide/configuring#specifying-parser-options
This is old answer - 2020 year
Not sure if this is still relevant as of now.
===
Spent 30 mins - trying all solutions but dint work, so sharing this one.
The issue is seen with new react app, and in Visual Studio Code, even at this time - Apr 2020.
Create a file .eslintrc.js in the root folder (beside package.json, or beside /src/ directory)
Paste below contents in .eslintrc.js
Restart your editor, like VS Code.
Now I can see real errors, instead of those fake import/export errors.
.eslintrc.js file contents:
module.exports = {
env: {
commonjs: true,
node: true,
browser: true,
es6: true,
jest: true,
},
extends: ["eslint:recommended", "plugin:react/recommended"],
globals: {},
parser: "babel-eslint",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: "module",
},
plugins: ["react", "import", "react-hooks"],
ignorePatterns: ["node_modules/"],
rules: {},
settings: {
react: {
version: "latest", // "detect" automatically picks the version you have installed.
},
},
};
Hope that helps.
The problem was i had installed eslint globally and locally, causing inconsistencies in SublimeLinter-contrib-eslint. I uninstalled eslint globally and SublimeLinter is working.
Closing VS code and re-open it does the trick for me...
Not sure about it but try to rename your file to .eslintrc and just use
{
"extends": "airbnb",
"plugins": ["react"]
};
Also be sure you have the required packages installed.
github.com/airbnb/javascript
The accepted answer works, however, is no longer under maintenance and the newly suggested approach is to use the version from the mono repo instead.
Installation
$ npm install eslint #babel/core #babel/eslint-parser --save-dev
# or
$ yarn add eslint #babel/core #babel/eslint-parser -D
.eslintrc.js
module.exports = {
parser: "#babel/eslint-parser",
};
Reference
i also got this error in a meteor project and i could solved it setting sourceType to "module"
more details can be found in Eslint docs:
http://eslint.org/docs/user-guide/configuring#specifying-parser-options
This config worked for me. (I am using create-react-app but applicable to any eslint project)
.eslintrc (create file in root if it doesnt exist)
{
"rules": {
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to" ]
}]
},
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2015
}
}
The same issue occurred when creating js files within a typescript react-native project while eslint is enabled.
Changing the file type from js to ts resolved the issue.
Also, adding the .eslintrc.js file as mentioned in previous answers resolved the issue without changing the file type from js to ts.
module.exports = {
parser: "#babel/eslint-parser",
};
The issue is seen with the new react app, and in Visual Studio Code, even at this time - August 2022
Create a file .eslintrc.js in the root folder
Paste the below contents in .eslintrc.js
Restart your editor, like VS Code.
Now I can see real errors, instead of those fake import/export errors.
.eslintrc.js file contents:
export const parser = "#babel/eslint-parser";
The accepted answer works, however, the newly suggested approach is to use the version from ES6.
Adding ecmaVersion to .eslintrc.json fixed the issue
{
"ecmaVersion": 2015,
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
}
I found this issue while creating the vue project (Used Editor: Visual Code)
Install babel-eslint package
npm install babel-eslint
Create the .eslintrc.js file and add below code
module.exports = {
root: true,
parserOptions: {
'sourceType': 'module',
parser: 'babel-eslint'
}
}
npm run serve, that error will be resolved like magic.