Eslint-plugin-import: Don't get import/order to work correctly with import aliases

[jens-duttke]

No matter what I try, I don't get the import/order plugin to work as expected.

These are the imports, and they are already ordered as expected:

import classNames from 'classnames';
import * as React from 'react';

import { I18N } from '@context/i18n';
import { SVGIcon } from '@ui';
import * as Utils from '@utils';

import * as styles from './styles.scss';

Anyhow, the rule complains about:

classnames import should occur after import of @utils
react import should occur after import of @utils

classnames and react are located in node_modules
Everything starting with @ indicates an import alias (so I assume they should be interpreted as internal).

My eslint configuration looks like this:

{
    settings: {
        'import/parsers': {
            '@typescript-eslint/parser': ['.ts', '.tsx']
        },
        'import/internal-regex': '^@'
    },
    rules:  {
        'import/order': ['error', {
            'alphabetize': { order: 'asc', caseInsensitive: true },
            'groups': ['builtin', 'unknown', 'external', 'internal', 'parent', 'sibling', 'index'],
            'newlines-between': 'always'
        }]
    }
}

I've played around since multiple hours now, but don't get the expected result. The only thing which happens is, that it sometimes say that @utils should occur before classnames, and sometimes it says classnames should occur after @utils ...

What have I missed?

[ljharb]

Although using @ is an unwise idea, given that npm packages can begin with a @-prefixed scope, your settings seem like they should work.

Any chance you'd want to switch to a sigil that doesn't collide with standard npm package naming conventions?

[jens-duttke]

I don't import/require npm packages starting with an @, so there is no collision.
Beside that, I've just tested to replace @ by ~ (which is not a valid character in npm package names), but the exact same problem still occurs:

classnames import should occur after import of ~utils [Error/import/order]
react import should occur after import of ~utils [Error/import/order]

[ryprice]

I believe I'm having the same issue preventing me from using this rule. For all my ts projects, I import local modules using the fully-qualified name using a module alias. (tsconfig, example import). Even when I'm very explicit in .eslintrc about what group ququmber-ui should be, I see similar errors to @jens-duttke.

{
  "newlines-between": "ignore",
  "groups": [
    "builtin",
    "external",
    "internal",
    "parent",
    "sibling",
    "index"
    "unknown"
  ],
  "alphabetize": {"order": "asc", "caseInsensitive": true},
  "pathGroups": [
    {"pattern": "ququmber-ui/**", "group": "parent"},
    {"pattern": "listlab-api/**", "group": "internal"},
    {"pattern": "lodash", "group": "external"},
    {"pattern": "react", "group": "external"},
    {"__comment": ".....other external packages removed for brevity"}
  ]
}

Here is an example of an error I see:

D:\src\ququmber-ui\src\button\UIIconButton.tsx
 1:1  error  `react` import should occur after import of `ququmber-ui/utils/useDelayedMouseHover`         import/order
 2:1  error  `react-tether` import should occur after import of `ququmber-ui/utils/useDelayedMouseHover`  import/order

[ryprice]

I did a bit of debugging and figured out that, at least in my case, imports for ququmber-ui (the local package) are being skipped because ququmber-ui is considered external and pathGroupsExcludedImportTypes defaults to ["builtin", "external"].

My fix "pathGroupsExcludedImportTypes": [] Hope this helps you @jens-duttke.

[jens-duttke]

@ryprice This works fine. Thanks!

[ludwig-pro]

I think there is a bug when ESLint load the config, so config-validator.js :

Configuration for rule "import/order" is invalid:
    Value {"newlines-between":"always","groups":[["builtin","external"],["internal","index","sibling","parent"]],"alphabetize":{"order":"asc","caseInsensitive":true},"pathGroups":[{"pattern":"~/**","group":"internal"}],"pathGroupsExcludedImportTypes":[]} should NOT have additional properties.

[ljharb]

@ludwig-pro no bug, but you're probably looking at the docs on master instead of on the latest tagged release.

[ludwig-pro]

you are right, but I just notice that when I add pathGroups or pathGroupsExcludedImportTypes ESLint console throw me an error

(node:6627) UnhandledPromiseRejectionWarning: Error: .eslintrc.js:
    Configuration for rule "import/order" is invalid:
    Value {"groups":[["builtin","external"],["internal","index","sibling","parent"]],"pathGroupsExcludedImportTypes":[],"pathGroups":[{"pattern":"~/**","group":"internal"}],"newlines-between":"always"} should NOT have additional properties.

it's strange because when I inspect node_modules, I use last version who support this properties.

"eslint": "^7.19.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.1",

[ludwig-pro]

and the rule

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

[ludwig-pro]

OK just restart vs code... and it's works 👍