using optional chaining(?.) with CRA/react-scripts

Question

I am integrating eslint on a pre-existing project. This project is filled with optional chaining syntax. like the one below:

const data = someEntity?.property;

The syntax works on newer version of eslint (^7.5.0). But react-script does not support eslint above version 6.6.0.

I also cannot disable this using //eslint-disable-next-line or anything like that. It just says parsing error as below:

Currently, I am getting parsing errors all over this project because of this. Is there a way I can disable this error and integrate eslint successfully with my CRA app?

Answer 1

You have to add the babel-eslint into your eslint config file as your parser as below:

{
   "parser": "babel-eslint"
}

Answer 2

Anyone struggling with this with CRA and eslint, update your eslintrc to include the ecmaVersion as well if the accepted answer doesn't work. Version 2020 and above will get rid of this error.

I'm using .eslintrc.js for exexample

  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2020,
    sourceType: 'module',
  },