Yarn 2 support

[joelmukuthu]

Is your feature request related to a problem? Please describe.
The Svelte for VSCode extension cannot currently load modules defined in svelte.config.js when using Yarn 2. My setup is as follows:

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    defaults: {
      script: 'typescript',
    },
  }),
};

This yields the following error when I open a .svelte file with a <script> tag:

Error in svelte.config.js

Error: Cannot find module 'svelte-preprocess'
Require stack:
- <project path>/svelte.config.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/cosmiconfig/dist/loaders.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/cosmiconfig/dist/ExplorerBase.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/cosmiconfig/dist/Explorer.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/cosmiconfig/dist/index.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/dist/src/lib/documents/configLoader.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/dist/src/lib/documents/Document.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/dist/src/lib/documents/index.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/dist/src/server.js
- $HOME/.vscode/extensions/svelte.svelte-vscode-102.5.1/node_modules/svelte-language-server/bin/server.jssvelte

My understanding is that the extension needs to be made aware of Yarn's PnP context to properly load svelte-preprocess and any other modules required in svelte.config.js.

Describe the solution you'd like

With Yarn 2, when one sets up VSCode, some SDKs are generated (for ESlint, Prettier, TypeScript etc).

1. Do we need to have one generate one for Svelte as well?
2. As part of the setup, one also is advised to update VSCode to use the workspace version of TypeScript. Does the extension automatically pick up the same version or does it need to have it's own setting as well?

Describe alternatives you've considered

1. Deleting my svelte.config.js file and having the extension use the default settings (use the version of svelte-preprocess that's bundled with the extension)
2. Patching the generated .yarn/sdks/typescript/lib/typescript.js (generated via https://yarnpkg.com/getting-started/editor-sdks#vscode) to enable loading svelte-preprocess somehow.

Additional context
N/A

[dummdidumm]

I fear we need to do both: make the extension aware of the yarn stuff and add the possibility to chose the TypeScript workspace version.

[joelmukuthu]

@dummdidumm do you have some pointers on how to get this done, where to start etc?

[joelmukuthu]

I just found this: https://github.com/yarnpkg/berry/blob/56cc85a8d3a13d3b3b11c2de066db9b6ccbf758f/packages/yarnpkg-pnpify/sources/sdks/vscode.ts#L95, seems like there might be some work done towards this already

[dummdidumm]

Interesting. Maybe this means you need to use this setting and then it may work?

[joelmukuthu]

It worked! The steps that worked for me:

1. Run yarn add -D svelte-language-server to install svelte-language-server as a dev dependency
2. Run yarn dlx @yarnpkg/pnpify --sdk vscode to generate or update the VSCode/Yarn integration SDKs. This also sets the svelte.language-server.ls-path setting for the workspace, pointing it to the workspace-installed language server.
3. Restart VSCode. I think restarting the Svelte language server should work as well but it didn't work for me.
4. Commit the changes to .yarn/sdks

[dummdidumm]

Great to hear that! I copied your instructions over to the docs.

[abrenneke]

This no longer works with 5d7bf1f, you have to set ls-path manually in your user settings ☹️

[dummdidumm]

Thanks for noticing, I'll update the instructions

[abrenneke]

Thanks @dummdidumm! That said, it would be nice if there was something akin to typescript.enablePromptUseWorkspaceTsdk so that we wouldn't have to set our global ls-path to a project-local path.

[TimVosch]

Just an FYI for people finding this issue.

The newest version of Typescript (4.4.x) is not compatible with Yarn PnP, but version 4.3.x is compatible through a patch that yarn pnp automatically applies.

Unfortunately(?) svelte-language-server uses the latest typescript by default, breaking yarn pnp support.

As a result, the svelte language server won't be able to resolve any imports if you're using yarn pnp in your project.

To fix:

1. follow yarn pnp instructions (above)
2. set the typescript resolution for the language-server to typescript 4.3 (shown below)
3. you might need to run yarn dlx @yarnpkg/sdks vscode again
4. restart vscode

in your workspace package.json

  "resolutions": {
    "svelte-language-server/typescript": "~4.3",
    "svelte-check/typescript": "~4.3"
  },

[stephtr]

Should this workaround currently work? I have tried it on a fresh skeleton SvelteKit project, but I still get a ERR_MODULE_NOT_FOUND error for the svelte.config.js imports.

[dsamerotte]

Has anyone gotten this working? I tried SvelteKit for the first time today but am stuck with the same ERR_MODULE_NOT_FOUND error, an adapter in this case.

I followed the "Getting started" docs, created the demo app, and dropped it into an existing Yarn 3.1.1 (with workspaces) project. The demo runs (although I had to tweak kit.vite.server.fs.allow to serve the demo font from Yarn's cache), but I can't get the language server working. I followed the "Usage with Yarn 2 PnP" guide (referenced above) and confirmed the pnpified local version is running, as set in ls-path. I tried downgrading typescript to 4.3.5, per the comment above, although it looks like 4.5.5 should work (i.e., it appears to be patched too). I also tried going from Yarn 3.1.1 to 3.2.0-rc.16, per yarnpkg/berry#3722.

Any other thoughts?

[lunacd]

Also experiencing ERR_MODULE_NOT_FOUND on adapter-auto. I'm running 3.2.1 of yarn rn and drama with TS4.5 should already be the past.

Honestly, I think this isn't a TypeScript issue because the import is from svelte.config.js. I also tried to yarn unplug @sveltejs/adapter-auto with no success.

[lunacd]

I think opening a separate issue to track this would be appropriate.