Eslint fails to parse and red-highlights optional chaining (?.) and nullish coalescing (??) operators

Question

I am looking for the relevant eslint rules for

@babel/plugin-proposal-optional-chaining
@babel/plugin-proposal-nullish-coalescing-operator

My editor highlights in red when I do the following

const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined
const foo = obj.baz ?? 'default'; // default
// eslint-disable-next-line no-console
console.log('baz', baz);
// eslint-disable-next-line no-console
console.log('safe', safe);
// eslint-disable-next-line no-console
console.log('foo', foo);

The code works properly, but eslint highlights my code in red.

Reference:

Dima Tisnek · Answer 1 · 2020-08-08T23:20:06.017

59

Nullish coalescing operator is natively supported starting from eslint>=7.5.0.

The easiest is set ES2020 in your package.json:

{
  "eslintConfig":
  {
    "parserOptions":
    {
      "ecmaVersion": 2020
    }
  }
}

edited Aug 08 '20 at 23:20

answered Aug 04 '20 at 03:07

Dima Tisnek

11,241
4
68
120

3

You probably mean `ecmaVersion`, not `exmaVersion`? – Jürg Lehni Aug 07 '20 at 09:11
1

Looks like canonical is `ecmaVersion: 11` or `12`, while `2020` and `2021` are de facto accepted as aliases: https://eslint.org/docs/user-guide/configuring/language-options – Dima Tisnek Jun 01 '21 at 01:54
2

For me I found "parserOptions" in `.eslintrc.json` and resolved this problem – Lexon Li Jul 15 '21 at 01:33

score 8 · Answer 2 · answered Mar 05 '20 at 11:53

8

add the following config to your eslint:

"parser": "babel-eslint"

answered Mar 05 '20 at 11:53

Gideao

374
3
5

5

More Context: Create .eslintrc.json Add {"parser": "babel-eslint"} Save – Suraj Mandal Jun 14 '20 at 22:54

score 1 · Answer 3 · answered Sep 03 '19 at 13:41

1

Have you tried setting the parser on your eslint config to "babel-eslint"? https://www.npmjs.com/package/babel-eslint It's the recommended parser when using experimental features not supported in eslint yet.

answered Sep 03 '19 at 13:41

Mario Beltrán

521
3
6

2

This throws up tons of typescript errors when i change from `@typescript-eslint/parser` – Damian Green Nov 01 '19 at 15:22

score 0 · Answer 4 · edited Jul 16 '20 at 11:52

0

You have to use this plugin: https://github.com/babel/eslint-plugin-babel

You can then disable the original eslint-rule and enable the babel version of it, which will then show no false errors. Your eslint-config could then look like this:

{
  parser: "babel-eslint",
  rules: {
    "no-unused-expressions": 0,
    "babel/no-unused-expressions": 1
  },
  plugins: ["babel"]
}

edited Jul 16 '20 at 11:52

Myzel394

1,155
3
16
40

answered Jan 17 '20 at 19:11

makkabi

619
6
10

AlexMelw · Answer 5 · 2023-02-17T07:58:53.077

As of 2021 after babel-eslint became decprecated, you can fix this issue by upgrading to @babel/eslint-parser.

The configuration needed to be added to .eslintrc.json is:

"parser": "@babel/eslint-parser",
"parserOptions": {
    "requireConfigFile": false,
    "presets": [
         "@babel/preset-env"
     ]
}

"requireConfigFile": false, - you need this line if you don't have a dedicated eslint config file

Also, make sure to upgrade to eslint versin 7 and above, and remove babel-eslint as it's been replaced by @babel/eslint-parser.

Setting the babel parser's options, like "plugins": [ "jsx" ] or "plugins": [ "typescript" ] are required only if you do use react or typescript.

"babelOptions": {
      "parserOpts": {
          "plugins": [ "jsx", "typescript" ]
      }
  }

So if you also need React, your final config changes could look like this:

"parser": "@babel/eslint-parser",
"parserOptions": {
    "requireConfigFile": false,
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "babelOptions": {
        "parserOpts": {
            "plugins": [ "jsx" ]
        }
    }
},
"plugins": [
    "react",
    "react-hooks"
]

score -1 · Answer 6 · answered Jan 17 '23 at 21:54

-1

Adding

parserOptions: {
  ecmaVersion: "latest",
},

to .eslintrc.js did the trick for me

answered Jan 17 '23 at 21:54

Katlego

39
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 18 '23 at 17:34
Hi @Katlego, I had to lower the rating of this answer because writing `ecmaVersion: "latest"` doesn't solve the issue but creates a bigger one. The trailing comma after the word `"latest"` crashes the ESLint configuration as it's JSON, not JS. The parsing of the .eslintrc.json file is broken, and as a result, ESLint just stopped working. That's why the red squiggly line disappeared. – AlexMelw Feb 17 '23 at 07:32

Eslint fails to parse and red-highlights optional chaining (?.) and nullish coalescing (??) operators

6 Answers6

Linked