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

Question

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": {
    ...
}

Answer 1

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.

Answer 2

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.