CODEWITHSUNDEEP
javascriptreactjsvisual-studio-codejsxeslint
janniks
janniks

Reputation: 3180

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

enter image description here

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 "/"

EDIT:

Partial .eslintrc.json:

"env": {
    "browser": true,
    "commonjs": true,
    "es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
    "ecmaFeatures": {
    "experimentalObjectRestSpread": true,
    "jsx": true
    },
    "sourceType": "module"
},
"plugins": [
    "react"
],
"rules": {
    ...
}

Upvotes: 13

Views: 41858

Answers (3)

janniks
janniks

Reputation: 3180

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.

Upvotes: 5

crenshaw-dev
crenshaw-dev

Reputation: 8374

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.

Upvotes: 17

Sean
Sean

Reputation: 91

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.

Upvotes: 9

Related Questions