When using Prettier v3 and yarn 2 PNP w/ editor SDKs, package cannot be found.

[liamlows]

Your Environment

• Prettier version: 3.1.1
• node version: 18.15.0
• package manager: yarn@2 (specifically yarn 4.0.2)
• IDE: VScode

Describe the bug

Using Next.JS 14, after updating prettier to v3.1.1 and this plugin to v4.1.1, on initial load of ESLint (v8.56.0 SDK) an error occurs that breaks linting and prettier itself. Here is the output from eslint running in VSCode:

[Info  - 3:46:47 PM] ESLint server is starting.
[Info  - 3:46:48 PM] ESLint server running in node v18.15.0
[Info  - 3:46:48 PM] ESLint server is running.
[Info  - 3:46:48 PM] ESLint library loaded from: [REPO_PATH]/.yarn/sdks/eslint/lib/api.js
[Error - 3:46:51 PM] An unexpected error occurred:
[Error - 3:46:51 PM] Error: Cannot find package '@ianvs/prettier-plugin-sort-imports' imported from [REPO_PATH]/noop.js
    at new NodeError (file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:21374:5)
    at packageResolve (file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:22354:9)
    at moduleResolve (file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:22386:20)
    at defaultResolve (file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:22473:16)
    at resolve (file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:22490:12)
    at importFromFile (file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:22505:16)
    at importFromDirectory (file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:23186:10)
    at file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:23203:12
    at async loadPlugin (file://[REPO_PATH]/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/index.mjs:23208:28)
    at async Promise.all (index 0)

and here is prettier:

["INFO" - 3:46:37 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 3:46:37 PM] Extension Version: 10.1.0.

Additionally, when opening the command menu (cmd+shift+p) and running "Format Document With..." -> prettier, the following error pops up:

I really am not sure what is going on exactly, I do know when using prettier v2.6.2 and this plugin v4.1.0 it works fine. I assume it's an issue with yarn PNP perhaps?

Additionally I figured Id provide the following packages that are also in my package.json in case maybe one of these is causing issues.

"@ianvs/prettier-plugin-sort-imports": "^4.1.1", (USED TO BE 4.1.0)
"eslint-config-prettier": "^9.1.0", (USED TO BE 9.0.0)
"eslint-plugin-prettier": "^5.1.1", (USED TO BE 4.0.0)
"prettier": "^3.1.1", (USED TO BE 2.6.2)
"prettier-plugin-tailwindcss": "^0.5.9", (USED TO BE 0.4.1)

To Reproduce

Simply setup a Next.JS app with Yarn PNP enabled and use the versions listed above in the package.json, then open vscode and attempt to have it format a file. If a repo is required I am happy to provide, just wasn't able to get it set up quick enough.

Expected behavior

The formatter to run correctly

Screenshots, code sample, etc

see above

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

module.exports = {
  plugins: ['@ianvs/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
  tabWidth: 2,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
  importOrder: [
    '^(react/(.*)$)|^(react$)',
    '^(next/(.*)$)|^(next$)',
    '<BUILT_IN_MODULES>',
    '<THIRD_PARTY_MODULES>',
    '',
    '^@/api/(.*)$',
    '^@/graphql/(.*)$',
    '^@/atoms$',
    '^@/atoms/(.*)$',
    '^@/elements/(.*)$',
    '^@/layouts/(.*)$',
    '^@/modules/(.*)$',
    '^@/templates/(.*)$',
    '^@/lib/(.*)$',
    '^@/types/(.*)$',
    '^@/util/(.*)$',
    '',
    '^[./]',
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  importOrderBuiltinModulesToTop: true,
  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
  importOrderMergeDuplicateImports: true,
  importOrderCombineTypeAndValueImports: true,
};

Error log

see above

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

• I'm willing to fix this bug 🥇

[IanVS]

It looks like you may need to use require.resolve() and perhaps unplug the plugin, for it to work with yarn pnp. See https://dev.to/javien/how-to-use-prettier-plugin-with-yarn-pnp-in-vscode-4pf8 for some instructions. (Prettier changed the way it resolves plugins in 3.0, which is probably why this stopped working for you when upgrading.)

[liamlows]

Hmm good idea, that seemed to work! Unfortunately it didn't work for prettier-plugin-tailwindcss but I can create an issue for that in their repo. It just shows the prettier errors but does not format on save. When running format document with, it throws an error as follows:

Cannot find package 'prettier' imported from [REPO_PATH]/.yarn/unplugged/prettier-plugin-tailwindcss-virtual-d81dbc5288/node_modules/prettier-plugin-tailwindcss/dist/index.mjs
Did you mean to import prettier-npm-3.1.1-072c31ec21/node_modules/prettier/plugins/angular.js?

Thanks for your help with the require resolve though!