Skip to content

types imports not respecting alphabetize or groups #3205

@TyeCampbell

Description

@TyeCampbell

I'm currently on eslint version 9.26.0 and eslint-plugin-import version 2.31.0. This is a nextJS app within an nx monorepo. For the life of me I can't seem to see the issue with my type imports ordering. Either there is a bug in or a limitation that I don't fully understand but the types will not order correctly no matter what I change in my config. I'd settle for alphabetized but what I want is the types group to sort in the order of groups, then alphabetized. But what I get seems to be the exact opposite of my config's group order.

Here is my config:

export default [
  {
    ignores: ['**/dist'],
  },
  {
    rules: {
      '@next/next/no-html-link-for-pages': 'off',
    },
  },
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
    rules: {
      '@next/next/no-html-link-for-pages': ['error', 'apps/dx-application/pages'],
      '@typescript-eslint/no-explicit-any': 'error',
      'import/order': [
        'error',
        {
          groups: [
            'external',
            'builtin',
            'internal',
            'object',
            'parent',
            'sibling',
            'index',
            'type',
          ],
          'newlines-between': 'always',
          alphabetize: { order: 'asc', caseInsensitive: true },
        },
      ],
    },
    settings: {
      'import/resolver': {
        typescript: {
          project: '../../../tsconfig.json',
        },
      },
      'import/internal-regex': '^@dev-ui-tools/',
    },
  },
  {
    ignores: ['.next/**/*'],
  },
];

This is how I want my type imports to group and sort:

import type { AppProps as NextAppProps } from 'next/app';
import type { DehydratedState } from '@tanstack/react-query';
import type { OneLinkConfig } from '@dev-ui-tools/framework-i18n';
import type { MakeQueryClientArgs } from '@dev-ui-tools/framework-react-query';
import type { TAppConfig } from '../config/types';
import type { TTracking } from '../helpers/metrics/metrics.types';
import type { ThemingColors } from '../helpers/themes/customTheme';

But this is what I get:

import type { TAppConfig } from '../config/types';
import type { TTracking } from '../helpers/metrics/metrics.types';
import type { ThemingColors } from '../helpers/themes/customTheme';
import type { OneLinkConfig } from '@dev-ui-tools/framework-i18n';
import type { MakeQueryClientArgs } from '@dev-ui-tools/framework-react-query';
import type { DehydratedState } from '@tanstack/react-query';
import type { AppProps as NextAppProps } from 'next/app';

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions