Prettier 3 and this plugin do not work as intended with Yarn 2 PNP

[liamlows]

What version of prettier-plugin-tailwindcss are you using?

For example: v0.5.9

What version of Tailwind CSS are you using?

For example: v3.3.0

What version of Node.js are you using?

For example: v18.18

What package manager are you using?

For example: Yarn 2 with PNP

What operating system are you using?

For example: macOS arm

Reproduction URL

https://github.com/liamlows/Prettier-Issues

NOTE: uses yarn 2 with PNP and zero installs, all you should need to do is ensure corepack enable is run and run yarn to install unplugged dependencies.

Describe your issue
I've been battling this issue for a few weeks now and just got around to finally making a reproduction repo for it.

When attempting to load plugins via prettier version 3, they dont seem to work as intended. I use two plugins one being a import sorting plugin and the other being this plugin. If i try and provide the plugin as stated in the installation instructions for prettier v3, eslint/prettier will fail to load the plugin saying it cannot be found. This is the error ESLint spits out (and prettier when you run a force format):

[Info  - 12:42:11 PM] ESLint server is starting.
[Info  - 12:42:12 PM] ESLint server running in node v18.15.0
[Info  - 12:42:12 PM] ESLint server is running.
[Info  - 12:42:13 PM] ESLint library loaded from: [REPO_PATH]/.yarn/sdks/eslint/lib/api.js
[Error - 12:42:14 PM] An unexpected error occurred:
[Error - 12:42:14 PM] Error: Cannot find package 'prettier-plugin-tailwindcss' 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 1)

I first had this issue with the import sorting plugin but when i created an issue on their repo (IanVS/prettier-plugin-sort-imports#140), I was provided with a easy fix. Simply unplugging the plugin and adding it to the plugins array in the prettier config with require.resolve(). That worked fine in isolation and format on save and linting worked fine, but the second I tried adding in the tailwind plugin it broke prettier's format on save. I also tried using the require.resolve() trick on the prettier plugin and it did make the cannot find error go away

Currently the repo linked above has it setup with require.resolve() and the linting works but formatting on save does not. If you remove the prettier-plugin-tailwindcss from the plugins array, it will work again and format on save.

I assume this is the correct place for this issue, however let me know if this also needs to be cross-posted to prettier or yarnpkg.

Thanks for any insight as to what the problem is!

[thecrypticace]

So, I'm not able to reproduce this with the eslint extension in VSCode. However, when I installed the project it used Yarn 4 rather than Yarn 2 like the title suggests (it's set to 4 in the package.json file). So might be worth checking out if you're somehow using Yarn 2.

I can however reproduce a similar error with the Prettier extension in VSCode but I suspect this is actually an issue with either the Prettier extension or Yarn and not our plugin because it works from the command line without issue. I'm purely speculating here but I think it has to do with the fact that our plugin is ESM and that may not work well with Yarn PnP. I tried another plugin like Astro which is also ESM only and get a similar error when using just it.

On a holiday break right now but I'll take a closer look when back.

[liamlows]

@thecrypticace sorry that was my bad! I meant to say yarn 4 and was saying yarn 2 in the sense that it was the type of yarn version/executable that lives in the project rather than globally on the system.

In regards to the plugin, I think you are correct. ESLint picks up and shows that the classnames are ordered wrong. It also shows this with other formatting issues. Take the following screenshot as an example:

As you can see there is a indent that is incorrect and two locations where classnames are out of order. If I hover over the yellow squiggly lines the quick fix hover window appears and I can manually fix the issue that way and it works.

The issue I am seeing is that when I enable this plugin, format on save and running format from the command palette (cmd+shift+p) no longer formats the file. The error I get when i run the format with prettier command from vscode is as follows:

["ERROR" - 8:47:32 PM] Cannot find package 'prettier' imported from [ABSOLUTE_PATH_TO_PROJECT]/prettier-issue/.yarn/unplugged/prettier-plugin-tailwindcss-virtual-9c74c069bc/node_modules/prettier-plugin-tailwindcss/dist/index.mjs
Did you mean to import prettier-issue/.yarn/unplugged/prettier-npm-3.1.1-072c31ec21/node_modules/prettier/plugins/angular.js?

So you may be right that the issue could reside with the vscode prettier extension, but it only occurs when this plugin is enabled. When I remove this plugin from the prettier config the formatting works automatically on save or when running from the command palette as expected.

I am also on holiday break for the next few weeks but I will try to monitor this thread and reply if anything is needed!

[maxmeeks]

@liamlows I am running into the same issue on one of my projects. I'm using yarn 4 with pnp enabled, and I'm using the prettier vscode extension. As you noted, it's only an issue with the vs code extension enabled (have it set as my default formatter). However, if I remove the prettier tailwind css plugin, the prettier vscode extensions seems to works fine.. I have to unplug prettier, along with any other plugin I am using for it to work as well.

I thought maybe there needed to be a dependency or peer dependency specified in the yarn rc file? I have yet to figure it out so I've resulted in just using the cli temporarily.

I run format on save, and the output window for prettier will show me the exact error as you pointed above.
["ERROR" - 8:12:16 PM] Cannot find package 'prettier' imported from [ABSOLUTE_PATH_TO_PROJECT]/.yarn/unplugged/prettier-plugin-tailwindcss-virtual-27c5ce4149/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?

Using the prettier cli in the command line works fine with the prettier tailwind plugin enabled.

[tom3rr]

I have this issue with yarn 4. This plugin breaks prettier "Format on save" and "Format document with..." command, although it works when prettier is ran from the terminal.

[matyasmihalka]

I encountered the same above mentioned issues with the VS code extension. When I add the plugin definition to my prettier config file Prettier stops working. I am also using Yarn 4 with PnP.

[tom3rr]

After nothing else worked, as a workaround I managed to get this working on yarn 4 by switching from PnP to the node_modules folder as described here: https://yarnpkg.com/configuration/yarnrc#nodeLinker

[liamlows]

After nothing else worked, as a workaround I managed to get this working on yarn 4 by switching from PnP to the node_modules folder as described here: https://yarnpkg.com/configuration/yarnrc#nodeLinker

I have found this also works for me as well although due to our use of the novel "zero-installs" feature I cannot use it as a workaround for now since it requires PNP.

This makes me think that it could be a peer dependency issue or something along the lines of that. If it works fine when not in PNP, but breaks in PNP and prettier and plugins are installed unplugged then maybe a peer dep is not being install that also needs to be unplugged? I'll take a look at this later and see what I can find although im on vacation right now so a little tough.

[nowl-it]

If u using prettier v3 and prettier-plugin-tailwindcss v0.5:
cd ./node_modules/prettier-plugin-tailwindcss
yarn install prettier

[Akamajin]

I ended up creating a "node_modules" at the parent directory and placed "prettier" and "prettier-plugin-tailwindcss" inside it. If I had put them directly into the project's node_modules folder, they would have been removed every time I ran "yarn install."
I'm using:
Yarn PnP 4.1.0
prettier 3.1.1
prettier-plugin-tailwindcss 0.5.9
Windows

[nowl-it]

hmmm...
try using this version (working for me)
"prettier": "^3.2.5"
"prettier-plugin-tailwindcss": "^0.5.11"
and install this:
"prettier-plugin-svelte": "^3.1.2"

[njfamirm]

i'm still have this issue, writing tailwind classes without sort in so bad

[liamlows]

Just an update from my end. We ultimately switched to PNPM and a monorepo for our projects and no longer have this issue. Now that we are using node_modules folders the issue has completely resolved itself. However, this is still an issue on my personal projects that use Yarn PNP.

[fuchinoko]

the issue persists

[0-Chan]

Any progress? Creating node_modules in the Yarn PNP project isn't a good solution, I guess.