gulp-eslint Environment key "es2021" is unknown - gulp

Question

I have a project with the following dependencies;
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"browser-sync": "^2.26.13",
"del": "^6.0.0",
"eslint": "^7.16.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"gulp": "^4.0.2",
"gulp-cssmin": "^0.2.0",
"gulp-eslint": "^6.0.0",
"gulp-htmllint": "0.0.19",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-jsmin": "^0.1.5"
When I try to run a gulp task that lints javascript, using eslint/gulp-eslint;
function javascript() {
return src('private/script/**')
//.pipe(jsmin())
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError())
.pipe(dest('public/script'));
}
I get the following error;
Error: .eslintrc.json » eslint-config-standard:
Environment key "es2021" is unknown
I used npx eslint --init to generate the following configuration file;
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"standard"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {
}
}
i have done an npm install, to make sure I have the latest version of the dependencies. I have also read on guthub that the error might have something to do with gulp-eslint as it is an old version and might not be using the current version of eslint, however, in I have changed gulp-eslint package.json to use the latest version of eslint and no luck. I also updated node/npm to their latest lts versions.

Answer 1

I fixed this by deleting the eslint folder in the node_modules folder for gulp-eslint. this forces node to use the version you have as a dependency rather than the version the project maintainer wants to use.
it appears this is a known issue.

Answer 2

I solve it by upgrading eslint version to version 7
This is what my package json looks like

Answer 3

The problem is that gulp-eslint works with ESLint 6 under the hub, and ESLint 6 does not support the es2021 environment (see the supported environments of ESLint 6).
I'm going to show three options to handle this. The best solution will depend on your setup and requirements.
Method 1: Replace es2021 with an equivalent definition
The es2021 environment is the same as es2020 with the addition of the globals AggregateError, FinalizationRegistry and WeakRef (see the definition of es2021), so you could enter these settings in your .eslintrc configuration file instead to obtain the same result.
{
...
"env": {
...
"es2020": true
},
...
"globals": {
...
"AggregateError": "readonly",
"FinalizationRegistry": "readonly",
"WeakRef": "readonly"
},
...
}
Method 2: Force gulp-eslint to use ESLint 7
If you are using npm >= 8.3 < 9.0 (check this with npm -v), you can override the version of ESLint used by gulp-eslint.
To do so, first add an override entry to your package.json file like this:
{
...
"overrides": {
"gulp-eslint": {
"eslint": "7"
}
},
...
}
then run:
npm install
Now, gulp-eslint will work with the latest version of ESLint 7 which does recognize the es2021 environment (it exists in ESLint >= 7.8).
Note that gulp-eslint does still not support ESLint 7, so some things may not work as expected. Particularly, some plugins may fail to load or produce runtime errors.
Method 3: Use gulp-eslint-new
gulp-eslint-new works with ESLint 8 and can be used in most situations as a drop-in replacement for gulp-eslint, provided that the configuration is compatible with both versions.
Uninstall gulp-eslint with
npm uninstall gulp-eslint
Install gulp-eslint-new with
npm install -D gulp-eslint-new
In your gulpfile, replace the import of gulp-eslint with gulp-eslint-new.
DISCLAIMER: I am currently the only maintainer of gulp-eslint-new.