Yarn 3 incompatibility

[orimay]

Thank you for the awesome extension! I loved using it with takeover mode, but it seems completely broken as of moving off to Yarn 3 without the node_modules folder.

First of all, it doesn't seem to work with Yarn 3 relative path workspaces. If I have my dependency like

"gun": "workspace:packages/gun",

I can't refer to it like

import Gun from 'gun';

And get to refer to it like

import Gun from '@/../../gun';

instead.

Even though without Volar, Yarn 3 workspaces are perfectly handled.

If I disable Take Over Mode, Vue TS checks fail completely:

Then, VSCode shows two tooltips rather than one:

If Volar has any issues that VSCode has not, these messages differ:

The upper one finds the module, the lower one (Volar) does not.

Last, but not least -- Volar doesn't import packages from .yarn:

Is Yarn 3 support not intended? I really wish it was working. Hope it's not much of a headache to fix this. Thank you in advance!

[johnsoncodehk]

Hi @orimay, first thanks for the report!

I'm not familiar with yarn3, do I just need to switch to yarn v3 and can this problem reproduce in https://github.com/johnsoncodehk/volar-starter too? I will check it later.

[orimay]

Hello, @johnsoncodehk! I installed latest Yarn with the use of its PnP feature, which gets rid of node_moules folder. It serves its own scripts for tsserver like here:

Thank you!

[merceyz]

Could you provide a reproduction? I have Volar working with PnP in my projects.

[orimay]

Oh, sorry, I forgot to mention that I also use Yarn 3 workspaces, and that's the part I'm struggling with. I only mentioned it in my first post

[ferm10n]

@merceyz here's a repro, without the use of workspaces or anything fancy really. I'd actually be interested in taking a look at one of your projects that has volar working with pnp.

@johnsoncodehk to switch to yarn3 and pnp, you should only need to do:

• yarn set version berry
• yarn config set nodeLinker pnp (this is default on new projects, but if you're in a project previously managed by npm this is needed)
• yarn install

---

Edit

I think I made a mistake, in the reproduction repo I just linked, it uses vue-tsc@0.31.4. If I update it to use vue-tsc@0.33.9, then yarn vue-tsc --noEmit starts to work again even with yarn pnp.

However, you can still see there are issues with the vscode extension with that setup. It doesn't seem like it's using the workspace tssdk and resolving installed packages through pnp

Edit 2

Disregard this, my reproduction is not valid. I initially thought there could be a yarn pnp related problem relating to the tsconfig's "extends": "@vue/tsconfig/tsconfig.node.json" and this require.resolve to load that extended config https://github.com/johnsoncodehk/volar/blob/4ca2d52bfd8fe48ba1df92742cca83d491a398a8/packages/vue-typescript/src/utils/ts.ts#L106
somewhere along the way I must have missed something because I can't reproduce. Was getting a "module not found" error before...

[ferm10n]

@orimay I was able to create a simple project that uses yarn pnp and workspaces. Made a couple of dumb mistakes along the way, but ended up with a sanity verifying checklist which might be helpful:

• are you able to import a workspace package from a .ts file?
• is vscode using the workspace version of typescript?
• does importing your package if you use the "gun": "workspace:*" notation instead of the experimental relative path one ("gun": "workspace:packages/gun")?
• is the latest version of vue-tsc installed?
• any weird output from "Volar - API" ?

[adalinesimonian]

here's a reproduction repository: https://github.com/adalinesimonian/volar-pnp-test

i've tested this in a workspace and without and it happens either which way.

[adalinesimonian]

testing further, the language server does receive the correct workspace configuration which includes the path to the typescript pnp sdk:

[Trace - 8:19:52 AM] Sending response 'workspace/configuration - (7)'. Processing request took 0ms
Result: [
    {
        "tsdk": ".yarn/sdks/typescript/lib",
        "disableAutomaticTypeAcquisition": false,
        "enablePromptUseWorkspaceTsdk": true,

does volar respect the typescript location in vscode settings?

[adalinesimonian]

i added some logs into volar's reloadServers to see if the tsdk path was resolved correctly, and the path is correct:

/.../volar-pnp-test/.yarn/sdks/typescript/lib/tsserverlibrary.js

continuing to dig further

[merceyz]

here's a reproduction repository: https://github.com/adalinesimonian/volar-pnp-test

@adalinesimonian Downgrade to typescript@4.8.3 and it should work, see yarnpkg/berry#4915.

[adalinesimonian]

downgraded to 4.8.3. now, in a single repo, it works as expected. however, in a monorepo, the same resolution errors occur.

here's a reproduction monorepo: https://github.com/adalinesimonian/volar-workspaces-pnp-test