prettier-plugin-sort-imports with prettier >=3

[sabatorussonttdata]

Environment
Prettier version**: 3.0.3

• node version 18
• package manager: yarn@2
• IDE: VScode

Describe the bug

with version >=3 prettier-plugin-sort-imports doesn't work
while with version 2.0.8 it works correctly.
How come ?

[d0whc3r]

You have 3 more issues talking about this, search them

TL;DR:
#240
#245
#244

[hrumhurum]

A workaround is to use Javascript config format .prettierrc.js instead of JSON config format .prettierrc: #131 (comment)

[notpeelz]

Nothing works for me.

Package manager: Yarn (berry, 3.6.x)
Node: 20.5.1
IDE: vscode, using the prettier-vscode extension

My working configuration (Prettier 2.8.8)

package.json

{
  "type": "module",
  "packageManager": "[email protected]",
  "dependencies": {
    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
    "prettier": "^2.8.8"
  }
}

.prettierrc.cjs

/** @type {import("prettier").Config} */
module.exports = {
  plugins: [require("@trivago/prettier-plugin-sort-imports")],
  singleQuote: false,
  jsxSingleQuote: false,
  arrowParens: "always",
  trailingComma: "all",
  bracketSameLine: false,
  importOrder: ["^node:", "^(?![./]).*$", "^[./]"],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
};

After upgrading: Prettier 2.8.8 -> Prettier 3.0.3, Yarn 3.6.0 -> Yarn 3.6.3

vscode-prettier

["INFO"] Formatting file:///home/peelz/path/to/project/src/main.mts
["ERROR"] Invalid prettier configuration file detected.
{}
["ERROR"] Invalid prettier configuration file detected. See log for details.

prettier cli (works)

$ yarn prettier --version
3.0.3
$ yarn prettier -w ./src/main.mts
src/main.mts 158ms

Things I've tried

1. plugins: ["@trivago/prettier-plugin-sort-imports"] (without the require()):

   prettier cli

   $ yarn prettier -w ./src/main.mts
   [error] Cannot find package '@trivago/prettier-plugin-sort-imports' imported from /home/peelz/path/to/project/noop.js
   

   The error is the same with JSON config formats.

   vscode-prettier

   ["INFO"] Using config file at '/home/peelz/path/to/project/.prettierrc.cjs'
   ["ERROR"] Error handling text editor change
   ["ERROR"] Error resolve node module '@trivago/prettier-plugin-sort-imports'
   Error: Error resolve node module '@trivago/prettier-plugin-sort-imports'
   	at n (/home/peelz/.local/share/Code/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:2718)
   	at /home/peelz/.local/share/Code/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:3068
   	at Array.map (<anonymous>)
   	at t.resolveConfigPlugins (/home/peelz/.local/share/Code/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:3003)
   	at t.ModuleResolver.resolveConfig (/home/peelz/.local/share/Code/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:7290)
   	at async t.default.getSelectors (/home/peelz/.local/share/Code/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:11562)
   	at async t.default.handleActiveTextEditorChanged (/home/peelz/.local/share/Code/extensions/esbenp.prettier-vscode-10.1.0/dist/extension.js:1:10924)
   

2. plugins: [(await import("@trivago/prettier-plugin-sort-imports")).default] in .prettierrc.mjs/.prettierrc.js:

   prettier cli

   $ yarn prettier -w ./src/main.mts
   [warn] Ignored unknown option { importOrder: ["^node:", "^(?![./]).*$", "^[./]"] }.
   [warn] Ignored unknown option { importOrderSeparation: true }.
   [warn] Ignored unknown option { importOrderSortSpecifiers: true }.
   src/main.mts 213ms
   

   vscode-prettier

   ["INFO"] Formatting file:///home/peelz/path/to/project/src/main.mts
   ["ERROR"] Error resolving prettier configuration for /home/peelz/path/to/project/src/main.mts
   ["ERROR"] require() of ES Module /home/peelz/path/to/project/.prettierrc.mjs not supported.
   Instead change the require of /home/peelz/path/to/project/.prettierrc.mjs to a dynamic import() which is available in all CommonJS modules.
   Error [ERR_REQUIRE_ESM]: require() of ES Module /home/peelz/path/to/project/.prettierrc.mjs not supported.
   Instead change the require of /home/peelz/path/to/project/.prettierrc.mjs to a dynamic import() which is available in all CommonJS modules.
       at f._load (node:electron/js2c/asar_bundle:2:13330)
       at require$$0.Module._load (/home/peelz/path/to/project/.pnp.cjs:15413:31)
       at module.exports (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:173:34)
       at loadJsSync2 (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:5418:22)
       at loadJs2 (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:5428:16)
       at async Explorer.loadFileContent (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:5787:18)
       at async Explorer.createCosmiconfigResult (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:5794:29)
       at async Explorer.loadSearchPlace (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:5776:16)
       at async Explorer.searchDirectory (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:5766:31)
       at async run (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:5752:26)
       at async Explorer.search (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/internal/internal.mjs:5747:16)
       at async Module.resolveConfigFile (file:///home/peelz/path/to/project/.yarn/unplugged/prettier-npm-3.0.3-fced695dae/node_modules/prettier/index.mjs:20044:18)
   

   This issue is tracked here: Cannot use import in prettier.config.js with Prettier v3 and ESM prettier/prettier-vscode#3066
   Some people suggest using plugins: ["plugin-name"] instead of require()/import(), but as you can see, that doesn't work (see 1.)

[rizbud]

this solution works for me #245 (comment)

[well1791]

this solution works for me #245 (comment)

// .prettierrc
plugins: ['@trivago/prettier-plugin-sort-imports']

[LucasHBG]

This issue still remains in prettier 3.1.1
I tried:

• Using .prettierrc
• Changing from .prettierrc to .prettierrc.js
• Changing from .prettierrc to .prettierrc.config.js
• Tried to add it in plugins with the solution from Prettier > 3 doesn't work #245 (comment) , require() and import().

but none seems to work

[dinumihnea]

this solution works for me #245 (comment)

// .prettierrc
plugins: ['@trivago/prettier-plugin-sort-imports']

Thank you a lot, saved my day.
This should be in the Readme.

[igorer88]

It doesn't work still. :(
I've tried everything even require and require.resolve.

[yangtenghuan]

It doesn't work still. :( I've tried everything even require and require.resolve.

if you have multiple plugins loaded, try adjusting the order, e.g. keep @trivago/prettier-plugin-sort-imports last

but I found that if you use prettier-plugin-organize-attributes at the same time, the latter one will inevitably fail