question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
jasonlyu123commented, Oct 16, 2022

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 https://github.com/sveltejs/language-tools/issues/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.

0reactions
ciscoheatcommented, Oct 16, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[7.0] Incompatible with sveltekit · Issue #19280 - GitHub
config.js will make Storybook manager appear fine but all stories errors out with bad formatting, presumably because it doesn't compile Svelte ...
Read more >
Docs • Svelte
Complete documentation for Svelte.
Read more >
Getting started with Svelte - Learn web development | MDN
This configuration file tells rollup how to compile and build your app ... svelte-app instead. scripts : Contains setup scripts as required.
Read more >
Svelte app shows blank page on first start - Stack Overflow
css and build/build.js are. I got the same issue when I tried Svelte with Tailwind. This is my config when I created the...
Read more >
Configuration Reference | Svelte CLI - GitHub Pages
svelte.config.js is an optional config file that will be automatically ... Deprecated since Vue CLI 3.3, please use publicPath instead.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found