/@vite/client won't load after adding peerDependencies under Yarn 2/PnP

[TPHRyan]

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

• Read the docs.
• Use Vite >=2.0. (1.x is no longer supported)
• If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

When a manual peer dependency is listed for Vite (e.g. a CSS preprocessor) and Vite is in a workspace of a monorepo, the Vite client cannot be resolved. If the peer dependency is not added, it cannot be resolved due to PnP strict rules.

If you were to create a node script to run fs.promises.resolve("<CLIENT_PACKAGE>") in the same workspace, this runs fine.

Reproduction

A minimal reproduction can be found here.

System Info

• vite version: 2.0.0-beta.12
• Operating System: Arch Linux x86_64 (kernel 5.9.13-arch1-1)
• Node version: v14.10.1
• Package manager (npm/yarn/pnpm) and version: yarn 2.4.0

Logs

12:49:31 pm [vite] Internal server error:
  Error: Failed to load url /@vite/client. Does the file exist?
      at transformRequest ([REDACTED]/vite-virtual-resolve-repro/.yarn/$$virtual/vite-virtual-f091c56ee5/0/cache/vite-npm-2.0.0-beta.12-f7a75d780e-d963463856.zip/node_modules/vite/dist/node/chunks/dep-85227760.js:66195:15)
      at async [REDACTED]/vite-virtual-resolve-repro/.yarn/$$virtual/vite-virtual-f091c56ee5/0/cache/vite-npm-2.0.0-beta.12-f7a75d780e-d963463856.zip/node_modules/vite/dist/node/chunks/dep-85227760.js:66292:32

Workaround

Manually hoisting the "less" package to the root package.json instead of adding the peer dependency to .yarnrc.yml works, but I don't think that should be necessary, and goes against the point of monorepos.

[yyx990803]

I tried to look into this but honestly, Yarn 2 is such a blackbox and debugging for it is just a nightmare. Please switch to another package manager if possible.

[shawnwildermuth]

Facing same issue with NPM

[yyx990803]

@shawnwildermuth then it's a totally different problem. Please open a separate issue with its own reproduction.

[shawnwildermuth]

For me, it was a mismatch between vite installed globally (old version). So ignore it.

[yyx990803]

FYI it works if you yarn unplug vite. Ironically, it breaks only in archived mode and I can't debug it in archived mode.

[merceyz]

Yarn 2 is such a blackbox and debugging for it is just a nightmare. Please switch to another package manager if possible.

I guess what you mean is that Yarn PnP is a blackbox, Yarn 2 !== Yarn PnP, just like Yarn 1 it supports both PnP and node_modules

FYI it works if you yarn unplug vite. Ironically, it breaks only in archived mode and I can't debug it in archived mode.

It's because of the two dollar signs ($$) in the filepath, I tried looking into it but I don't know the Vite codebase so didn't get far, the fact that it's bundled code doesn't help (almost like a blackbox that is hard to debug). So seems any filepath (Yarn PnP or not) with $$ in it fails, meaning there is a .replace somewhere in Vite that doesn't escape strings correctly

[yyx990803]

The fact that Vite is bundled doesn't make it a black box. The code isn't minified or mangled and the logic remains the same. Unlike Yarn 2 archives, you can't even open or modify it without unplugging.

So seems any filepath (Yarn PnP or not) with $$ in it fails, meaning there is a .replace somewhere in Vite that doesn't escape strings correctly

I just tested a mocked package with $$ in its path name and it works properly.