Overwhelmed by ESLint errors during `gatsby develop` after updating to Gatsby 2.31.0

Description

After updating to the newest version (gatsby@2.31.0) my terminal is flooded by ESLint errors. I’ve pasted an example below under “Actual result”, but the error is repeated for every JSX file at once, resulting in the terminal being full of nothing but ESLint errors.

The “undefined rules” mentioned in the terminal are defined in eslint-config-standard.

The errors disappear if I force Gatsby to use eslint@^7 using yarn’s resolutions field. This didn’t happend before gatsby@2.31.0.

Steps to reproduce

There’s a minimal reproduction here. Follow the steps in the README (copied below) to see the errors and to see them disappear when using yarn’s resolution:

1. Run yarn to install all dependencies
2. Run yarn develop
   • Look at all the errors in the terminal
3. Stop the develop process
4. In package.json change "resolutions_REMOVETHIS" to "resolutions" and save the changes
5. Run yarn to reinstall dependencies
6. Run yarn develop
   • There are no errors in the terminal

Expected result

The develop process should run normally and show no errors.

Actual result

This is shown in the terminal:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/Users/[...]/gatsby-eslint-warnings/src/pages/index.jsx
  1:1  error  Definition for rule 'default-case-last' was not found         default-case-last
  1:1  error  Definition for rule 'no-useless-backreference' was not found  no-useless-backreference
  1:1  error  Definition for rule 'no-loss-of-precision' was not found      no-loss-of-precision
  1:1  error  Definition for rule 'no-unreachable-loop' was not found       no-unreachable-loop

✖ 4 problems (4 errors, 0 warnings)


File: src/pages/index.jsx


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

.eslintrc » eslint-config-standard:
        Environment key "es2021" is unknown


File: .cache/polyfill-entry.js

failed Building development bundle - 3.242s

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.15.4 - ~/.n/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 84.0.2
    Safari: 14.0.2
  npmPackages:
    gatsby: 2.31.0 => 2.31.0 

[sflahave]

We’re still seeing a ton of these errors after upgrading to gatsby 2.31.1 for every file that uses eslint-disable or eslint-disable-next-line, it seems.

One example: one file, SomeComponent.js has this at the top:

/* eslint-disable react/display-name */
/* eslint-disable react/jsx-no-literals */

It also has a useEffect block with this applied:

// eslint-disable-next-line react-hooks/exhaustive-deps

When I run gatsby develop:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/Users/shawnflahave/projects/my-app/src/components/SomeComponent.js
   1:1  error  Definition for rule 'react/display-name' was not found           react/display-name
   2:1  error  Definition for rule 'react/jsx-no-literals' was not found        react/jsx-no-literals
  81:7  error  Definition for rule 'react-hooks/exhaustive-deps' was not found  react-hooks/exhaustive-deps

✖ 3 problems (3 errors, 0 warnings)


File: src/components/SomeComponent.js

[t2ca]

This updated fixed the existing errors but it introduced a new error for me.

31:49  error  Parsing error: Unexpected token .
✖ 1 problem (1 error, 0 warnings)

for the. following code: <Header siteTitle={data.site.siteMetadata?.title || Title} />

So i’m getting this error when using the optional chaining operator.