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

[nikoladev]

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 

[pieh]

Thanks for reproduciton, will have a fix shortly (and will capture details of problem etc in pull request description). Short of it there is issue that originated from #28911

[t2ca]

Thank you for reporting this, I'm having the same issues.

[pieh]

PR with fix was merged, we will backport it hopefully soon and release new patch with it. Will also notify here when fix is released

[vladar]

Published in gatsby@2.31.1

[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.

[pieh]

@t2ca Damn, sorry about not handling all of it.

For immediate unblock it seems like you add

export const eslintRequiredConfig: CLIEngine.Options = {
  rulePaths: [eslintRulePaths],
  useEslintrc: false,
  baseConfig: {
+   parser: require.resolve(`babel-eslint`),
    parserOptions: {
      ecmaVersion: 2018,
      sourceType: `module`,
      ecmaFeatures: {
        jsx: true,
      },
    },
    globals: {
      graphql: true,
      __PATH_PREFIX__: true,
      __BASE_PATH__: true, // this will rarely, if ever, be used by consumers
    },
    extends: [eslintRequirePreset],
  },
}

In https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.ts. / node_modules/gatsby/dist/utils/eslint-config.js (if "monkey patching" node_modules works for you for now).

I think now that this is a bit of whack-a-mole with it and this just needs not only that change but also some proper test setup for it to cover variety of inputs and make sure things like that don't block users.

One additional thing is to check if problems like that - if they happen, don't cause errors - at most it should be some warning, which while annoying shouldn't block users

[t2ca]

@t2ca Damn, sorry about not handling all of it.

For immediate unblock it seems like you add

export const eslintRequiredConfig: CLIEngine.Options = {
  rulePaths: [eslintRulePaths],
  useEslintrc: false,
  baseConfig: {
+   parser: require.resolve(`babel-eslint`),
    parserOptions: {
      ecmaVersion: 2018,
      sourceType: `module`,
      ecmaFeatures: {
        jsx: true,
      },
    },
    globals: {
      graphql: true,
      __PATH_PREFIX__: true,
      __BASE_PATH__: true, // this will rarely, if ever, be used by consumers
    },
    extends: [eslintRequirePreset],
  },
}

In https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.ts. / node_modules/gatsby/dist/utils/eslint-config.js (if "monkey patching" node_modules works for you for now).

I think now that this is a bit of whack-a-mole with it and this just needs not only that change but also some proper test setup for it to cover variety of inputs and make sure things like that don't block users.

One additional thing is to check if problems like that - if they happen, don't cause errors - at most it should be some warning, which while annoying shouldn't block users

Thank you @pieh, this fix worked and everything is working normally again. There are no other errors.

[rahulsuresh-git]

Same here :(

[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

[joaocarmo]

I'm also experiencing both issues mentioned by @nikoladev and @sflahave.

So far, I've managed to work around the first problem by monkey patching gatsby as suggested by @pieh and committing the changes using patch-package until the issue is officially resolved.

For the second problem, it seems a possible workaround is to also monkey patch the useEslintrc attribute to true.

The final node_modules/gatsby/dist/utils/eslint-config.js should look something like this:

// ...

const eslintRequiredConfig = {
  rulePaths: [eslintRulePaths],
- useEslintrc: false,
+ useEslintrc: true,
  baseConfig: {
+   parser: require.resolve(`babel-eslint`),
    parserOptions: {
      ecmaVersion: 2018,
      sourceType: `module`,
      ecmaFeatures: {
        jsx: true
      }
    },
    globals: {
      graphql: true,
      __PATH_PREFIX__: true,
      __BASE_PATH__: true // this will rarely, if ever, be used by consumers

    },
    extends: [eslintRequirePreset]
  }
};

// ...

[aaronadamsCA]

Hey, just wanted to note I'd filed #29264 (closed as duplicate) - it's worth noting my problem was on Gatsby 2.29.2.

No, oops, I'm an idiot, I am accidentally running Gatsby 2.31.1.

[vladar]

Fix published in gatsby@2.32.1

[sflahave]

Fix published in gatsby@2.32.1

I upgraded to v2.32.2 and everything is looking good. Thanks @vladar & @pieh !

[t2ca]

Works great, thank you.