Ignored import order config with `@`-packages

[paolorossig]

Your Environment

• Prettier version: 3.0.3
• node version: 18.17.1
• package manager: npm@9
• IDE: VScode

Describe the bug

Third party modules that starts with @ (e.g.: @headlessui/react) are placed at the top of the imports, ignoring any importOrder configuration.

To Reproduce

• Install any package that starts with @ such as @headlessui/react

Expected behavior

So the expected ordered output of my imports is:

import { Fragment } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Popover, Transition } from '@headlessui/react'
import clsx from 'clsx'

but the actual output looks like this:

import { Popover, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import clsx from 'clsx'

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

module.exports = {
  semi: false,
  singleQuote: true,
  plugins: [
    '@ianvs/prettier-plugin-sort-imports',
    'prettier-plugin-tailwindcss',
  ],
  importOrder: [
    'react',
    '^next(.*)$',
    '<THIRD_PARTY_MODULES>',
    '',
    '^[.]',
  ],
}

Error log

Contribute to @ianvs/prettier-plugin-sort-imports

• [ ] I'm willing to fix this bug 🥇

[IanVS]

I think this is happening because the importOrder is a regex, and @headless/react is matching react, and it comes before react because @ comes before r alphabetically. Can you try changing your 'react' to '^react', and see if that makes a difference?

[paolorossig]

Thanks for the fast help @IanVS. It was not clear to me that I needed to put the ^ for exact match. actually this solved the problem.