Upgrade babel-eslint to resolve template strings bug

[cnrudd]

A client developer is seeing this eslint error when running yarn lint:

$yarn lint
yarn run v1.22.10
$ yarn lint:js
$ eslint --ext .js,.jsx .
TypeError: Cannot read property 'range' of null
Occurred while linting xyz.jsx:1

The bug is triggered by a template string in a loop preceded by an optional chaining operator. This error prevents teamcity builds from succeeding as well.

The bug is reproduced in this toolbox branch:
https://github.com/xh/toolbox/tree/babel-eslint-bug

This issue is discussed extensively here:
babel/babel-eslint#799

The issue in the project can be resolved by not using an optional chaining operator in that jsx file, but
it might be worth seeing if the issue can be resolved by migrating from
use of
parser: 'babel-eslint',
to
parser: "@babel/eslint-parser"
in this project's (eslint-config) index.js file

as is described here:
https://babeljs.io/blog/2020/07/13/the-state-of-babel-eslint

[cnrudd]

This branch https://github.com/xh/eslint-config/tree/eslintUpgradeAndBugfix demonstrates that upgrading to @babel/eslint-parser fixes the bug. Run it against this toolbox branch https://github.com/xh/toolbox/tree/babel-eslint-bug to test (after having linked @xh/eslint-config with yarn link in this project & yarn link "@xh/eslint-config"in the toolbox client-app project.

But, @babel/eslint-parser comes with a pretty big new requirement: it must have a babel config file.
Our current babel config is inside our @xh/hoist-dev-utils project's configureWebpack.js file.
I ended up copying what I felt were the bits relevant for linting in a new babel.config.js file in @xh/eslint-config.

There may be a way to DRY this up, perhaps by having the configureWebpack.js import the @xh/eslint-config babel.config.js into its babel-loader section, and merge it with the bits of the babel config that have more to do with targeting and bundling.
But I thought some discussion would be better before spending time on that.

[mahenzon]

Started to happen for me too :(

Problem with ESLint reformatting:
File.vue: TypeError: Cannot read property 'range' of null

but upgrading to @babel/eslint-parser helped me! thanks