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 · Accepted Answer · 2020-08-08 23:20:06Z

62

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 8, 2020 at 23:20

answered Aug 4, 2020 at 3:07

Dima Tisnek

11.9k4 gold badges73 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jürg Lehni Over a year ago

You probably mean ecmaVersion, not exmaVersion?

Dima Tisnek Over a year ago

Looks like canonical is ecmaVersion: 11 or 12, while 2020 and 2021 are de facto accepted as aliases: eslint.org/docs/user-guide/configuring/language-options

Lexon Li Over a year ago

For me I found "parserOptions" in .eslintrc.json and resolved this problem

Gideão · Accepted Answer · 2020-03-05 11:53:07Z

7

add the following config to your eslint:

"parser": "babel-eslint"

answered Mar 5, 2020 at 11:53

Gideão

3783 silver badges5 bronze badges

1 Comment

Suraj Mandal Over a year ago

More Context: Create .eslintrc.json Add {"parser": "babel-eslint"} Save

Mario Beltrán · Accepted Answer · 2019-09-03 13:41:57Z

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 3, 2019 at 13:41

Mario Beltrán

6014 silver badges7 bronze badges

1 Comment

Damian Green Over a year ago

This throws up tons of typescript errors when i change from @typescript-eslint/parser

Myzel394 · Accepted Answer · 2020-07-16 11:52:39Z

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, 2020 at 11:52

Myzel394

1,3273 gold badges22 silver badges48 bronze badges

answered Jan 17, 2020 at 19:11

makkabi

6396 silver badges10 bronze badges

Comments

Katlego · Accepted Answer · 2023-01-17 21:54:18Z

0

Adding

parserOptions: {
  ecmaVersion: "latest",
},

to .eslintrc.js did the trick for me

answered Jan 17, 2023 at 21:54

Katlego

696 bronze badges

3 Comments

Community Over a year ago

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.

Alex Over a year ago

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.

MattS Over a year ago

I would just like to add that this answer worked for me. And as @Katelgo specifically mentioned, they are using .eslintrc*.js*, which is Javascript, so trailing commas and lack of quotes are fine.

Alex · Accepted Answer · 2023-02-17 07:58:53Z

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

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

1 Comment

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related