Yarn 2 PnP ERR_MODULE_NOT_FOUND in SvelteKit

[lunacd]

Describe the bug

The extension throws the following error with yarn 2 PnP and SvelteKit:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@sveltejs/adapter-auto' imported from /home/haowenl/github/lxy-portfolio/svelte.config.js
    at new NodeError (node:internal/errors:372:5)
    at packageResolve (node:internal/modules/esm/resolve:954:9)
    at moduleResolve (node:internal/modules/esm/resolve:1003:20)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Reproduction

In a brand new skeleton svelte project, follow these steps: https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#usage-with-yarn-2-pnp.

Expected behaviour

The extension works as normal.

System Info

• OS: Fedora 36, Node v16
• IDE: VSCode

Which package is the issue about?

Svelte for VS Code

Additional Information, eg. Screenshots

I'm not sure this is correct, but I think the node backend shouldn't be using the internal module loader, as shown in the error message above.
To resolve it, I think it should be sufficient to be able to add -r .pnp.cjs --loader .pnp.loader.mjs generated by yarn, as shown in yarnpkg/berry#638 (comment).

language-tools/packages/svelte-vscode/src/extension.ts

Line 102 in 5a6eba1

const runExecArgv: string[] = ['--experimental-modules'];

Hopefully, an option alongside svelte.language-server.runtime, like svelte.language-server.runtimeArgs should be sufficient for this.

Other cases of people encountering this: #678 (comment).

[euntak]

Is this issue still without a solution or workaround?

[lunacd]

Not for me at least. I'm still using the node-modules linker because of this.

[DavidArchibald]

If possible I would like to stay with Yarn PnP but svelte-language-tools will be a blocker to that.

Is there anything I can do to try to move this forward? I'd be happy to try to add the svelte.language-server.runtimeArgs option.

[lunacd]

A runtimeArgs option would solve this nicely. That said, I've been on node-modules for A LONG TIME. So long that I personally don't feel particularly strongly for PnP anymore. But it seems that other people are also waiting on this, having the option would be greatly appreciated.

[DavidArchibald]

Alright, I got a runtimeArgs implementation working.

The main issue is that unfortunately it seems to require using an absolute path because it can't find .pnp.cjs if I just add the flags -r .pnp.cjs --loader .pnp.loader.mjs.

I tried setting the serverOptions.run.options.cwd and serverOptions.debug.options.cwd both to rootPath which indeed is the root of my project. I thought this would help because I've checked and [rootPath]/.pnp.cjs definitely exists. It didn't change anything, it still just fails with Error: Cannot find module '.pnp.cjs' unless I use an absolute path.

I don't think that's tenable to add to the .vscode/settings.json because per project it needs to be relative and per user they might work on different projects with different paths.

Here's the commit that I made to my own repository to add this change:
DavidArchibald@7239664

Any advice on how to work around this problem?

[lunacd]

Thank you for taking on this! It's weird that only an absolute path will work. Have you perhaps tried to log out the working directory for node runtime? Is it possible to have it run in workspaceFolder?

Obviously, having relative path working is the optimal situation, but if we have to use asbolute path, configuring it per project is not that bad. Btw, I'm personally a proponent for never committing editor related configs (like .vscode/), so I wouldn't resent it if it gets us from not possible at all to some form of solution.

[DavidArchibald]

Good news, I managed to figure out how to make it work! I checked process.cwd() and it in fact was the workspace folder so I was stuck for a while because it didn't make any sense to me that it wasn't working.

The issue was that I needed to change the flags. As it turns out -r .pnp.cjs is unnecessary because svelte.language-server.ls-path is set to .yarn/sdks/svelte-language-server/bin/server.js and that has require(absPnpApiPath).setup(); which has the same effect as -r .pnp.cjs. Then I needed to change it to --loader ./.pnp.loader.mjs and it worked!

I wanted to just say I very much appreciate pointing to the exact line in extension.ts where I needed to make the change as well as the flags, that made my life a lot easier! Thank you also for your prompt replies.

Anyways, I've opened a PR, well two actually (one here and one in Yarn SDKs)!

[lunacd]

That’s fantastic news!!! Thank you so much for your work!