Assume an empty svelte.config.js instead of requiring it?

[ciscoheat]

Describe the bug

I was pointed here after reporting withastro/astro#5065 , the problem seems to be that the VS Code extension requires a svelte.config.js that isn't always available, for example when using Sass in a Svelte component in an Astro project, that doesn't have that file in its root folder.

Reproduction

When using a Svelte component with Sass styling (<style lang="scss">) in an Astro project, I get a warning in VS Code:

Cannot find any of modules: sass,node-sass

Error: Cannot find module 'node-sass'
Require stack:
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-preprocess\dist\modules\utils.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-preprocess\dist\autoProcess.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-preprocess\dist\index.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\importPackage.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\lib\documents\configLoader.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\lib\documents\Document.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\lib\documents\index.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\dist\src\server.js
- d:\program\VSCode\data\extensions\svelte.svelte-vscode-106.2.0\node_modules\svelte-language-server\bin\server.js

The file cannot be parsed because style requires a preprocessor that doesn't seem to be setup or failed during setup. Did you setup a `svelte.config.js`? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`. 

See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.

The sass package, is installed, which makes it work, but the warning still persists in VS Code, until I follow the advice and add a very simple svelte.config.js file to the Astro project, then after restarting VS Code, it's gone:

svelte.config.js

export default {
  preprocess: null
}

Expected behaviour

No problem should be displayed in VS Code.

I'm aware that https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md#2-setting-up-a-svelte-configjs states that "You need a svelte.config.js." but this is quite hard to enforce in other libraries (there are enough boilerplate files in most web projects anyway), so if no svelte.config.js exists, could the simplest possible configuration be assumed instead?

export default {
  preprocess: null
}

System Info

• OS: Windows 10
• IDE: VSCode 1.72.0 with latest extensions

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

No response

[jasonlyu123]

We'll need a reproduction in a repository form to know what exactly you are referring to.

We do have a fallback preprocessor config. It is likely the fallback config failed to preprocess. But we'll need a reproduction to know why.

But I would say if it failed, it means you DO need a svelte.config.js for the diagnostics to correctly show. Assuming an empty one won't help.

[dummdidumm]

My guess is that the fallback preprocessor only knows about typescript, because the preprocessor might be searched relative to the fallback config which is inside the extension. We somehow would need to point it to the user's node_modules

[ciscoheat]

Here's a repo that reproduces the error. It's the default Astro project, with a Svelte component added on the index page.

https://github.com/ciscoheat/svelte-vscode-issue

Commands executed after installing:

pnpm astro add svelte
pnpm i -D sass

[jasonlyu123]

Yeah. It's because it's using the fallback preprocessor shipped with the extension. Because of that node can't find the sass installed in the workspace. The reason why the language server uses the bundled svelte-preprocess is because of pnpm's strict dependencies rule. The language server can't locate the svelte-preprocess used by Astro under the hood. If you manually install svelte-preprocess it should work fine.

This is kind of similar to part of #1259. So you can read the discussion there. In short, we won't want bundle sass. So If we want to make it more effortless, we might have to add some config to svelte-preprocess to let us load modules from the workspace.

[ciscoheat]

I can confirm that installing svelte-preprocess and restarting VS Code resolves the issue. That's good news, since you have to do a npx astro add svelte to use svelte anyway, so it could include that package in its install script, and things should be fine...? I'll mention this to the Astro team.