import/order Issue: Inconsistency of sorting, presumably because of different operating systems

[Felix Vogel]

Node version: 18.19.1
npm version: 9.6.6
Local ESLint version: v8.57.0
Global ESLint version: v8.57.0
Operating System: Windows 10.0.22631 Build 22631 and Ubuntu 22.04.4 (LTS)

.eslintrc.cjs

module.exports = {
  root: true,
  extends: [
    'standard-with-typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:tailwindcss/recommended',
    'plugin:svelte/recommended'
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  parserOptions: {
    project: './tsconfig.eslint.json',
    sourceType: 'module',
    ecmaVersion: 2020,
    extraFileExtensions: ['.svelte']
  },
  env: {
    browser: true,
    es2017: true
  },
  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser'
      },
      rules: {
        'svelte/indent': 'error',
        indent: 'off'
      }
    }, {
      files: ['*.cjs'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off'
      }
    }
  ],
  rules: {
    indent: 'error',
    curly: ['error', 'all'],
    'brace-style': ['error', '1tbs'],
    'svelte/html-quotes': [
      'error',
      {
        prefer: 'double'
      }
    ],
    'import/order': [
      'error',
      {
        'newlines-between': 'never',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true
        },
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
        pathGroups: [
          {
            pattern: 'svelte/**',
            group: 'external',
            position: 'before'
          },
          {
            pattern: '\\$app/**',
            group: 'external',
            position: 'after'
          },
          {
            pattern: '\\$env/**',
            group: 'external',
            position: 'after'
          },
          {
            pattern: '\\$lib/**',
            group: 'internal',
            position: 'after'
          }
        ],
        pathGroupsExcludedImportTypes: ['builtin']
      }
    ],
    '@typescript-eslint/no-unnecessary-condition': 'error',
    '@typescript-eslint/type-annotation-spacing': 'error',
    '@typescript-eslint/no-throw-literal': 'off',
    'tailwindcss/no-custom-classname': ['error', {
      whitelist: ['scrollbar-hide']
    }]
  }
}

package.json

"scripts": {
    "start": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint .  --ext .ts,.cjs,js,svelte",
  },
"devDependencies": {
    "@sveltejs/adapter-auto": "^3.1.1",
    "@sveltejs/adapter-static": "^3.0.1",
    "@sveltejs/enhanced-img": "^0.1.9",
    "@sveltejs/kit": "^2.5.4",
    "@sveltejs/vite-plugin-svelte": "^3.0.2",
    "@types/deep-equal": "^1.0.4",
    "@types/eslint": "^8.56.5",
    "@types/express": "^4.17.21",
    "@typescript-eslint/eslint-plugin": "^6.4.0",
    "@typescript-eslint/parser": "^6.0.0",
    "autoprefixer": "^10.4.18",
    "eslint": "^8.57.0",
    "eslint-config-standard-with-typescript": "^43.0.1",
    "eslint-plugin-svelte": "^2.35.1",
    "eslint-plugin-tailwindcss": "^3.15.1",
    "lefthook": "^1.6.7",
    "postcss": "^8.4.35",
    "svelte": "^4.2.12",
    "svelte-check": "^3.6.7",
    "tailwindcss": "^3.4.1",
    "tslib": "^2.6.2",
    "typescript": "^5.4.2",
    "vite": "^5.1.6",
    "vitest": "^1.4.0"
  },
"dependencies": {
    "@internationalized/date": "^3.5.2",
    "bits-ui": "^0.19.7",
    "clsx": "^2.1.0",
    "cmdk-sv": "^0.0.15",
    "date-fns": "^3.6.0",
    "deep-equal": "^2.2.3",
    "eslint-plugin-import": "^2.29.1",
    "firebase": "^10.9.0",
    "firebase-admin": "^12.0.0",
    "firebase-functions": "^4.8.0",
    "lucide-svelte": "^0.358.0",
    "mongodb": "^6.5.0",
    "openai": "^4.29.1",
    "svelte-radix": "^1.1.0",
    "tailwind-merge": "^2.2.1",
    "tailwind-variants": "^0.2.1",
    "zod": "^3.22.4"
  }

The issue refers to an inconsistency of the sorting of the "import/order" rule, presumably because of different operating systems. It is a svelte project in typescript.

This is a minimal example:

import EditDialog from './edit-dialog.svelte'
import { UserValidator } from '$lib/validators'

We expected the imports to be sorted like this (using eslint --fix):

import { UserValidator } from '$lib/validators'
import EditDialog from './edit-dialog.svelte'

This works on the Github Runner (Ubuntu) that runs the linting on every commit (npm ci && npm run lint). The problem is that on my machine (Windows), the linter reports an error that the imports are sorted incorrectly:
error `./edit-dialog.svelte` import should occur before import of `$lib/validators` import/order

After running eslint --fix on my windows machine, the imports are sorted like this:

import EditDialog from './edit-dialog.svelte'
import { UserValidator } from '$lib/validators'

When making a commit with this import order, the linting on github fails with the error:
./edit-dialog.svelte` import should occur after import of `$lib/validators

Is there something wrong with my configuration?
Thank you in advance!

[Danila Rodichkin]

Same error

[Weyert de Boer]

Yes, I am having the same issue where I am getting error reports by import/order when running in Github Runners using ubuntu-latest. On my developer notebook (macOS M1) or a macos-latest runner they both pass happily.

Looks like it an operation system or architecture behaviour different for sorting. I only couldn't figure out anything obvious in order.js

[Luis Nachtigall]

I also have a problem where my config is:

     "import/order": [
                    "error",
                    {
                        "alphabetize": {
                            "order": "asc"
                        },
                        "groups": [["builtin", "external"], "internal", "parent", "sibling", "index"]
                    }
                ],

and then after running eslint --fix the resulting imports are:

import { ThemeService } from '@shared/utils';
import { SliderColorClass } from '@ui-library/enums/slider-color-class.enum';
import { differenceWith, isEqual } from 'lodash-es';
import { BehaviorSubject, Subject, combineLatest, map } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { CriteriaMetricTypeEnum } from '../enums/criteria-metric-type.enum';
import { CriteriaTypeEnum } from '../enums/criteria-type.enum';
import {
    criteriaListToSimpleCriteriaList,
    isMetricCriteria,
    plainCriteriaToCriteria,
} from '../functions/criteria-utils';

In my workspace all the @UI-library and @shared/ are both libs within my nx project. (but lodash-es, rxjs are both external modules)

So, as I said. The config above is the one I get after running eslint. But when my IDE automatically runs eslint, it still shows me errors like ESLint: lodash-esimport should occur before import of@shared/utils(import/order)

So it seems like normally @shared/utils seems to be recognized as something external(?).
But when my IDE runs eslint its recognized as something internal or differently?

Any idea how to fix this?

[Jordan Harband]

@LeLunZ if it's working on the command line, then it's an issue with your IDE or your IDE configuration.