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!