import-order: Relative imports now listed first when using Yarn 2 PnP

[ryb73]

Minimal reproduction: https://github.com/ryb73/eslint-import-order-repro

I have the following imports:

import { blah } from "./blah";
import { version } from "typescript";
import { blah2 } from "./blah2";

With .eslintrc.js:

"use strict";

module.exports = {
  env: {
    es6: true,
    browser: true,
  },

  ignorePatterns: [`.pnp.js`, `.yarn`, `lib`, `.vscode`],

  overrides: [
    {
      files: [`./.eslintrc.js`],
      parserOptions: {
        sourceType: `script`,
      },
    },
  ],

  parserOptions: {
    sourceType: `module`,
  },

  plugins: [`import`],

  rules: {
    "import/order": [`warn`,
      {
        alphabetize: { order: `asc`, caseInsensitive: true },
        "newlines-between": `never`,
      },
    ],
  },

  settings: {
    "import/resolver": {
      node: {
        extensions: [`.js`, `.jsx`, `.ts`, `.tsx`],
      },
    },
  },
};

I expect to get the following warning:

  2:1  warning  `typescript` import should occur before import of `./blah`  import/order

Instead I get:

  3:1  warning  `./blah2` import should occur before import of `typescript`  import/order

It appears to happen when using Yarn 2's PNP linker.

[ljharb]

This sounds unsurprising, since pnp probably resolves everything to the same kind of file. @arcanis?

It’s possible that when using pnp, a custom import resolver will be needed, since it’s not using node resolution.

[younho9]

I just listed external modules in pathGroups, though cumbersome, to make them recognized as external modules.

...
rules: {
  'import/order': [
    'warn',
    {
      'newlines-between': 'always',
      'pathGroups': [
        {
          pattern: 'react',
          group: 'external',
        },
        {
          pattern: 'react-dom',
          group: 'external',
        },
      ],
      'alphabetize': {
        order: 'asc',
        caseInsensitive: true,
      },
    },
  ],
},
...

[a-tonchev]

I have the same bug!

    "import/order": ["error", {
      "newlines-between": "always",
      "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]],
      "pathGroups": [
        {
          "pattern": "@/",
          "group": "internal",
          "position": "after"
        }
      ]
    }]

sibling imports are placed above my "internal" group.

With version 2.23.4, there is no problem! For now a workaround is to downgrade to this version.

[dlindenkreuz]

After editing the eslint plugin settings, I don't see this error anymore with Yarn v3.1.1 and eslint-plugin-import@2.25.4.

Important (from the README):

If you are using yarn PnP as your package manager, add the .yarn folder and all your installed dependencies will be considered as external, instead of internal.

When adding .yarn to the import/external-module-folders setting, the error disappeared.

[a-tonchev]

For me the fix was

1. to change the pattern from @/ to @/**
2. and to remove the position: 'after'

Basically:

    "import/order": ["error", {
      "newlines-between": "always",
      "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]],
      "pathGroups": [
        {
          "pattern": "@/**",
          "group": "internal"
        }
      ]
    }]

    ```
    
 This works with the newest versions well.

[saengmotmi]

in my case, it works for me

// .eslintrc.js
const getExternals = () => {
  const getPackageJson = () =>
    require(path.resolve(process.cwd(), 'package.json'));

  const { dependencies, peerDependencies, devDependencies } = getPackageJson();

  return Object.keys({
    ...dependencies,
    ...peerDependencies,
    ...devDependencies,
  });
};

// ...
    'import/order': [
      'error',
      {
        groups: [
          ['builtin', 'external'],
          ['internal', 'parent', 'sibling'],
        ],
        pathGroups: [
          ...getExternals().map((name) => ({
            pattern: `${name}`,
            group: 'external',
          })),
          ...getExternals().map((name) => ({
            pattern: `${name}/**`,
            group: 'external',
          })),
// ...

[saengmotmi]

maybe this is more proper way to sort external deps

// .eslintrc.js
// ...
  settings: {
    'import/external-module-folders': ['.yarn'],
// ...

thx @dlindenkreuz :)