Error "Definition for rule 'no-anonymous-exports-page-templates' was not found" during lint CI

[natapg]

Hi guys, I just updated our gatsby-plugin-eslint following the guide, I added both new rules to muy .eslintrc.js and then fixed all the new warning showed in gatsby develop, but now when I run yarn eslint (which is part of our CI process) I get the following errors:

Error "Definition for rule 'no-anonymous-exports-page-templates' was not found"
Error "Definition for rule 'limited-exports-page-templates' was not found"

which I think is to be expected since eslint doesn't "get" gatsby's own plugins, right? Is there any way to fix it?

.eslintrc.js

  module.exports = {
    env: {
      browser: true,
      es2021: true,
      node: true,
    },
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended',
      'plugin:react-hooks/recommended',
      'plugin:prettier/recommended',
    ],
    parser: '@typescript-eslint/parser',
    ignorePatterns: ['public/*', '.cache/*', 'gatsby-node.ts', 'gatsby-config.ts'],
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
      ecmaVersion: 12,
      sourceType: 'module',
    },
    plugins: ['react', '@typescript-eslint'],
    settings: {
      react: {
        version: 'detect',
      },
    },
    rules: {
      'no-console': 'warn',
      'react/self-closing-comp': 'warn',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/naming-convention': ['error', { selector: 'enumMember', format: ['PascalCase'] }],
      'no-anonymous-exports-page-templates': 'warn',
      'limited-exports-page-templates': 'warn',
    },
    overrides: [
      {
        files: ['*.js', '*.jsx'],
        rules: {
          '@typescript-eslint/no-var-requires': 'off',
        },
      },
      {
        files: ['*.ts', '*.tsx'],
        rules: {
          '@typescript-eslint/prefer-nullish-coalescing': 'warn',
        },
        parser: '@typescript-eslint/parser',
        parserOptions: {
          project: './tsconfig.json',
        },
      },
    ],
  }

gatsby-config

const gatsbyRequiredRules = path.join(process.cwd(), 'node_modules', 'gatsby', 'dist', 'utils', 'eslint-rules')

    resolve: 'gatsby-plugin-eslint',
    options: {
      rulePaths: [gatsbyRequiredRules],
      stages: ['develop'],
      extensions: ['js', 'jsx', 'ts', 'tsx'],
      exclude: ['node_modules', 'bower_components', '.cache', 'public'],
    },
  },

package.json

 "dependencies": {
    "@deckdeckgo/highlight-code": "^3.3.1",
    "@fingerprintjs/fingerprintjs-pro": "^3.5.1",
    "@loadable/component": "^5.14.1",
    "@tippyjs/react": "^4.2.0",
    "classnames": "^2.2.6",
    "gatsby": "^3.14.0",
    "gatsby-background-image": "^1.5.3",
    "gatsby-image": "^3.11.0",
    "gatsby-plugin-breadcrumb": "^12.1.1",
    "gatsby-plugin-env-variables": "^2.1.0",
    "gatsby-plugin-image": "^1.14.0",
    "gatsby-plugin-netlify": "^3.14.0",
    "gatsby-plugin-netlify-cms": "^5.14.0",
    "gatsby-plugin-react-helmet": "^4.14.0",
    "gatsby-plugin-robots-txt": "^1.6.10",
    "gatsby-plugin-sass": "^4.14.0",
    "gatsby-plugin-sharp": "^3.14.0",
    "gatsby-plugin-sitemap": "^4.10.0",
    "gatsby-plugin-svgr": "^3.0.0-beta.0",
    "gatsby-plugin-tslint": "^0.0.2",
    "gatsby-plugin-typegen": "^2.2.4",
    "gatsby-plugin-typescript": "^3.14.0",
    "gatsby-remark-copy-linked-files": "^4.11.0",
    "gatsby-remark-highlight-code": "^3.0.1",
    "gatsby-remark-images": "^5.11.0",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-source-filesystem": "^3.14.0",
    "gatsby-transformer-remark": "^4.11.0",
    "gatsby-transformer-sharp": "^3.14.0",
    "gbimage-bridge": "^0.1.4",
    "include-media": "^1.4.9",
    "netlify-cms-app": "^2.9.6",
    "prismjs": "^1.25.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.0.0",
    "remark": "^13.0.0",
    "remark-html": "^13.0.2",
    "rollbar": "^2.19.4",
    "swiper": "^7.0.6"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@storybook/addon-actions": "^6.3.8",
    "@storybook/addon-essentials": "^6.3.8",
    "@storybook/addon-links": "^6.3.8",
    "@storybook/builder-webpack5": "^6.3.8",
    "@storybook/manager-webpack5": "^6.3.8",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.3.8",
    "@svgr/webpack": "^5.4.0",
    "@types/classnames": "^2.2.11",
    "@types/loadable__component": "^5.13.1",
    "@types/prismjs": "^1.16.2",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.32.0",
    "@typescript-eslint/parser": "^4.32.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-prismjs": "^2.0.1",
    "babel-preset-gatsby": "^1.14.0",
    "babel-preset-react-app": "^10.0.0",
    "bundlewatch": "^0.3.2",
    "css-loader": "^6.3.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^3.0.1",
    "gatsby-plugin-eslint": "^4.0.0",
    "gatsby-plugin-svg-sprite": "^2.0.1",
    "prettier": "^2.0.5",
    "sass": "^1.42.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "typescript": "^4.4.3"
  },
  "scripts": {
    "clean": "gatsby clean",
    "start": "yarn develop",
    "build": "gatsby build",
    "noIndexBuild": "gatsby build && echo 'User-agent: *\nDisallow: /' > public/robots.txt",
    "develop": "yarn clean && gatsby develop",
    "lint": "tsc --noEmit && eslint . --ext .ts,.tsx,.js",
    "lint:ci": "tsc --noEmit && eslint . --ext .ts,.tsx,.js --max-warnings=0",
    "lint:fix": "eslint . --ext .ts,.tsx,.js --quiet --fix",
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 6006 -s ./static",
    "build-storybook": "build-storybook",
    "prettier": "prettier -c .",
    "prettier:fix": "prettier --write --loglevel=error ."
  },
  "resolutions": {
    "gatsby/**/svgo": "2.4.0"
  }

[mongkuen]

Your configs looks fine, the problem is that you're running eslint with the CLI, and the CLI doesn't understand where to look for the additional rules.

See the Eslint CLI docs where it has the --rulesdir flag to allow you to set additional rule directories.

Eslint will complain if you run a command without specifying the rulesdir like: yarn eslint src/*/**.js --config ./.eslintrc

I'm not sure how your CI system is set up specifically, but as gatsby-plugin-eslint's docs mention: the location of the rules reside at node_modules/gatsby/dist/utils/eslint-rules

So running your lint command with the flag like: yarn eslint src/*/**.js --config ./.eslintrc --rulesdir ./node_modules/gatsby/dist/utils/eslint-rules fixes the issue.

That's the general idea for you to fix your CI linting command. Closing because this is more of a CLI issue than a plugin issue, but I hope this helps!