eslint-plugin-import package is failing to recognise difference between external and internal directories

Question

In my .eslintrc I have:

    "import/order": [
      "error",
      {
        "alphabetize": {
          "caseInsensitive": true,
          "order": "asc"
        },
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "newlines-between": "always-and-inside-groups",
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["builtin"]
      }
    ],

and

  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json"
      },
      "node": {
        "paths": "src"
      }
    }
  }

but in one of my files I have:

import { useReactToPrint } from "react-to-print"

and a few lines below I have import { ReservationStatus } from "generated/graphql"

react-to-print is a third party and generated/ is something local that I generate with apollo but it's not external

but I'm getting a complaint on the import { useReactToPrint } from "react-to-print" saying

react-to-print import should occur after import of generated/graphql eslint[import/order](https://github.com/import-js/eslint-plugin-import/blob/v2.27.5/docs/rules/order.md)

but that's wrong, so what have I configured incorrectly?

Answer 1

Full answer from @RenaldoMateus's comment:

The issue you're experiencing is likely due to the ESLint not correctly identifying the generated/graphql as an internal import. By default, ESLint treats all imports that do not fall into the "builtin" or "external" categories as "internal". However, it seems that in your case, it's not recognizing generated/graphql as an internal import.

To solve this, you can add a new path group for your generated directory in the pathGroups array in your .eslintrc file. This will explicitly tell ESLint to treat anything from the generated directory as an internal import.

Here's how you can do it:

"pathGroups": [
  {
    "pattern": "react",
    "group": "external",
    "position": "before"
  },
  {
    "pattern": "generated/**",
    "group": "internal",
    "position": "after"
  }
],

In the above configuration, the pattern property is a glob pattern that matches any import that starts with generated/. The group property tells ESLint to treat these imports as internal imports. The position property tells ESLint to place these imports after the external imports.

After making this change, ESLint should stop complaining about the order of your imports.

Answer 2

here is what you should use

"import/order": [
  "error",
  {
    "alphabetize": {
      "caseInsensitive": true,
      "order": "asc"
    },
    "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
    "newlines-between": "always-and-inside-groups",
    "pathGroups": [
      {
        "pattern": "react",
        "group": "external",
        "position": "before"
      },
      {
        "group": "internal",
        "pattern": "generated/*"
      }
    ],
    "pathGroupsExcludedImportTypes": ["builtin"]
  }
],

and if you have more internal you need to specify them

the eslint-import-resolver-typescript will only validate the imports are correct, but it won't mark internal projects as internal