Cannot use any prettier plugins with `yarn 4 + PnP`

Question

Cannot use any prettier plugins with `yarn 4 + PnP`

phamhongphuc opened this issue 7 months ago · 4 comments

Environments

Operating System: Windows 11
VSCode version: 1.88.1
Runtime: Node.js v20
Prettier Version: 3.2.5
Prettier Plugins (if any): prettier-plugin-tailwindcss or any others plugins
Prettier Extension Version: 10.4.0

Description

I'm trying to setup a project with yarn 4 + pnp + prettier + prettier-plugin-tailwindcss (or any others plugins) but I got some problems.

In the configuration file, if plugins are declared as string:

//.prettier.mjs
/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: ["prettier-plugin-tailwindcss"],
};

export default prettierConfig;

The command yarn prettier . will return the following error:

[error] Cannot find package 'prettier-plugin-tailwindcss' imported from D:\Code\issue\prettier-yarn-issue\noop.js

This is a known bug and has been reported previously in prettier repository (prettier#13276, prettier#15388).

This bug can be fixed with a workaround via require.resolve() or import().

However, despite the command yarn prettier . can be run, prettier extension in VSCode still can't work.

Github Repository to Reproduce Issue

Issue reproduction repo: prettier-yarn-issue.

I have already run the command yarn dlx @yarnpkg/sdks vscode and committed the changes to the repo.

Branch	Config	Plugins syntax	`yarn prettier .`	`prettier-vscode`	VSCode output & behavior
`yarn-4-pnp/cjs/string`	cjs	string	❌	❌	Error resolve node module
`yarn-4-pnp/mjs/string`	mjs	string	❌	❌	Error resolve node module
`yarn-4-pnp/cjs/require`	cjs	`require.resolve()`	✔	❌	Error cannot find package
`yarn-4-pnp/mjs/import`	mjs	`import()`	✔	❌	Loading forever...

Steps To Reproduce

Checkout to the correct branch (main branch doesn't have the prettier config).
(Optional) Use volta for install the correct node & yarn version.
Run yarn install.
Open repo in vscode (or run command Developer: Restart Extension Host if it's already opened).
Open src/index.ts.
Run command Format document with... > Prettier - Code formatter.

Expected result

If command yarn prettier . can run via the above workaround (require.resolve or import), prettier-vscode must also run.

Actual result

Command yarn prettier . can run via the above workaround (require.resolve or import) but prettier-vscode can't run.

Prettier Log Output

Log - Error resolve node module

["DEBUG" - 11:25:25 AM] Local prettier module path: d:\Code\issue\prettier-yarn-issue\.yarn\sdks\prettier\index.cjs
["INFO" - 11:25:25 AM] Using config file at d:\Code\issue\prettier-yarn-issue\.prettierrc.cjs
["ERROR" - 11:25:25 AM] Error handling text editor change
["ERROR" - 11:25:25 AM] Error resolve node module 'prettier-plugin-tailwindcss'
Error: Error resolve node module 'prettier-plugin-tailwindcss'
    at n (c:\Users\phamhongphuc\.vscode\extensions\esbenp.prettier-vscode-10.4.0\dist\extension.js:1:2718)
    at c:\Users\phamhongphuc\.vscode\extensions\esbenp.prettier-vscode-10.4.0\dist\extension.js:1:3068
    at Array.map (<anonymous>)
    at t.resolveConfigPlugins (c:\Users\phamhongphuc\.vscode\extensions\esbenp.prettier-vscode-10.4.0\dist\extension.js:1:3003)
    at t.ModuleResolver.resolveConfig (c:\Users\phamhongphuc\.vscode\extensions\esbenp.prettier-vscode-10.4.0\dist\extension.js:1:7485)
    at t.default.getSelectors (c:\Users\phamhongphuc\.vscode\extensions\esbenp.prettier-vscode-10.4.0\dist\extension.js:1:11766)
    at t.default.handleActiveTextEditorChanged (c:\Users\phamhongphuc\.vscode\extensions\esbenp.prettier-vscode-10.4.0\dist\extension.js:1:11120)

Log - Cannot find package 'prettier' imported from

["DEBUG" - 11:43:54 AM] Local prettier module path: d:\Code\issue\prettier-yarn-issue\.yarn\sdks\prettier\index.cjs
["INFO" - 11:43:54 AM] Using config file at d:\Code\issue\prettier-yarn-issue\.prettierrc.cjs
["ERROR" - 11:43:54 AM] Error handling text editor change
["ERROR" - 11:43:54 AM] Cannot find package 'prettier' imported from d:\Code\issue\prettier-yarn-issue\.yarn\__virtual__\prettier-plugin-tailwindcss-virtual-8449e33aeb\0\cache\prettier-plugin-tailwindcss-npm-0.5.14-4c72a3a392-10.zip\node_modules\prettier-plugin-tailwindcss\dist\index.mjs
Did you mean to import prettier-yarn-issue/.yarn/unplugged/prettier-npm-3.2.5-6859110d6a/node_modules/prettier/plugins/angular.js?
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prettier' imported from d:\Code\issue\prettier-yarn-issue\.yarn\__virtual__\prettier-plugin-tailwindcss-virtual-8449e33aeb\0\cache\prettier-plugin-tailwindcss-npm-0.5.14-4c72a3a392-10.zip\node_modules\prettier-plugin-tailwindcss\dist\index.mjs
Did you mean to import prettier-yarn-issue/.yarn/unplugged/prettier-npm-3.2.5-6859110d6a/node_modules/prettier/plugins/angular.js?
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:863:9)
    at moduleResolve (node:internal/modules/esm/resolve:912:20)
    at defaultResolve (node:internal/modules/esm/resolve:1105:11)
    at nextResolve (node:internal/modules/esm/loader:166:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:840:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:429:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Answer 1 · 2024-06-18T01:11:23.000Z

I'm experiencing the same problem. 😭
Wait for this issue to be resolved.

Answer 2 · 2024-07-16T15:40:13.000Z

After bump yarn@4.3.1, prettier@3.3.3 and run yarn dlx @yarnpkg/sdks vscode again, it's fixed with require.resolve() syntax in .prettierrc.cjs.
Reproduction: https://github.com/issue-reproduction/prettier-yarn-issue/tree/yarn-4-pnp/cjs/require-bump.

.prettierrc.cjs

/** @type {import('prettier').Config} */
const prettierConfig = {
  plugins: [require.resolve("prettier-plugin-tailwindcss")],
};

module.exports = prettierConfig;

But the string syntax or import() syntax in .prettierrc.mjs still doesn't work.

I think it's because prettier is commonjs:

prettier/package.json

{
  "name": "prettier",
  "version": "3.3.3",
  "description": "Prettier is an opinionated code formatter",
  "bin": "./bin/prettier.cjs",
  // ...
}

Answer 3 · 2024-07-29T14:54:19.000Z

Running into this same issue. The suggestion by @phamhongphuc does work for now:

/** @type {import("prettier").Config} */
const config = {
  semi: false,
  singleQuote: true,
  plugins: [require.resolve('prettier-plugin-organize-imports')],
}

module.exports = config

Specifically:

.cjs extension
module.exports = config
require.resolve('plugin-name')

Answer 4 · 2024-09-18T09:57:20.000Z

Still having this problem with yarn pnp using @trivago/prettier-plugin-sort-imports

["ERROR" - 10:52:46 AM] Invalid prettier configuration file detected.
{
  "code": "ERR_MODULE_NOT_FOUND",
  "url": "file:///c:/Users/USERNAME/Documents/PROJECT_ROOT/.yarn/__virtual__/@trivago-prettier-plugin-sort-imports-virtual-ba71fb650d/0/cache/@trivago-prettier-plugin-sort-imports-npm-4.2.1-91a768be46-8.zip/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/index.js"
}
["ERROR" - 10:52:46 AM] Invalid prettier configuration file detected. See log for details.

Tried debugging the extension in vscode development host but I can't seem to find the place that throws the error.

It happens during prettierInstance.resolveConfigFile and the error is thrown in the terminal from src/ModuleResolver.ts:374

tried updating yarn and prettier to the latest

yarn: 4.5.0
prettier: 3.3.3
node: 18

Anyone got any other ideas where I could look