Switching from babel-eslint to @babel-eslint

Recently we got a dependabot pull request on interactive-examples to update our version of eslint to v8.2.0 but, our continues integration tests were failing. The really scary part was, it showed 533 errors. 😱 Thankfully the fix is trivial once you know what to do. Phew!

The error

Parsing error: Must use import to load ES Module: node_modules/eslint/node_modules/eslint-scope/lib/definition.js require() of ES modules is not supported.

The above is referring to a file in the eslint package itself though. What gives... Well, if you have the following in your eslintrc, then that is the culprit:

"parser": "babel-eslint",

This is actually an old and deprecated version. So, the first step is to switch to @babel-eslint.

The steps

First, we need to remove babel-eslint and replace it with @babel/eslint-parser.

yarn remove babel-eslint

and then:

yarn add -D @babel-core @babel/eslint-parser

Next, update your eslintrc to use @babel/eslint-parser instead of babel-eslint.

"parser": "@babel/eslint-parser",

Alrighty! Now if you run your tests again, you just might see something like this:

Parsing error: No Babel config file detected for [file].js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.

Oh boy! 🤔 No worries, let’s fix this. Pop open your eslintrc again and add the following:

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false
  }
}

Run your linting tests again and you should be golden!