fix(gatsby): eslint linting (#29796) (#29814)

(cherry picked from commit 2d52a55)

Co-authored-by: Ward Peeters <[email protected]>

Author: GatsbyJS Bot

packages/gatsby/package.json

@@ -31,7 +31,6 @@
     "ansi-html": "^0.0.7",
     "autoprefixer": "^9.8.4",
     "axios": "^0.21.1",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -262,4 +261,4 @@
   "yargs": {
     "boolean-negation": false
   }
-}
+}

packages/gatsby/src/utils/eslint-config.ts

@@ -1,11 +1,11 @@
 import { printSchema, GraphQLSchema } from "graphql"
-import { CLIEngine } from "eslint"
+import { ESLint } from "eslint"
 import path from "path"
 
 const eslintRulePaths = path.resolve(`${__dirname}/eslint-rules`)
 const eslintRequirePreset = require.resolve(`./eslint/required`)
 
-export const eslintRequiredConfig: CLIEngine.Options = {
+export const eslintRequiredConfig: ESLint.Options = {
   rulePaths: [eslintRulePaths],
   useEslintrc: false,
   allowInlineConfig: false,
@@ -19,6 +19,12 @@ export const eslintRequiredConfig: CLIEngine.Options = {
       ecmaFeatures: {
         jsx: true,
       },
+      // TODO proper check for custom babel & plugins config
+      // Currently when a babelrc is added to the project, it will override our babelOptions
+      babelOptions: {
+        presets: [`babel-preset-gatsby`],
+      },
+      requireConfigFile: false,
     },
     globals: {
       graphql: true,
@@ -32,7 +38,7 @@ export const eslintRequiredConfig: CLIEngine.Options = {
 export const eslintConfig = (
   schema: GraphQLSchema,
   usingJsxRuntime: boolean
-): CLIEngine.Options => {
+): ESLint.Options => {
   return {
     useEslintrc: false,
     resolvePluginsRelativeTo: __dirname,
@@ -47,6 +53,20 @@ export const eslintConfig = (
         require.resolve(`eslint-config-react-app`),
         eslintRequirePreset,
       ],
+      parser: require.resolve(`@babel/eslint-parser`),
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: `module`,
+        ecmaFeatures: {
+          jsx: true,
+        },
+        // TODO proper check for custom babel & plugins config
+        // Currently when a babelrc is added to the project, it will override our babelOptions
+        babelOptions: {
+          presets: [`babel-preset-gatsby`],
+        },
+        requireConfigFile: false,
+      },
       plugins: [`graphql`],
       rules: {
         // New versions of react use a special jsx runtime that remove the requirement
@@ -75,13 +95,12 @@ export const eslintConfig = (
         "jsx-a11y/aria-proptypes": `warn`,
         "jsx-a11y/aria-role": `warn`,
         "jsx-a11y/aria-unsupported-elements": `warn`,
-        // TODO: It looks like the `autocomplete-valid` rule hasn't been published yet
-        // "jsx-a11y/autocomplete-valid": [
-        //   "warn",
-        //   {
-        //     inputComponents: [],
-        //   },
-        // ],
+        "jsx-a11y/autocomplete-valid": [
+          `warn`,
+          {
+            inputComponents: [],
+          },
+        ],
         "jsx-a11y/click-events-have-key-events": `warn`,
         "jsx-a11y/control-has-associated-label": [
           `warn`,