language-tools: Style tag `lang` attribute triggers warning from Svelte Beta

Describe the bug When specifying a lang attribute in component’s <style> tag, Svelte Beta for VS Code gives the following warning:

The file cannot be parsed because script or style require a preprocessor that doesn't seem to be setup. Did you setup a `svelte.config.js`? See https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#using-with-preprocessors for more info.

This only happens when specifying the lang attribute on the component <style>. When the lang attribute is removed from the <style> tag, the warning goes away, regardless of if there is a lang attribute on the component <script> tag.

To Reproduce Steps to reproduce the behavior:

  1. Create a new Svelte + Webpack project by using: degit svelte/template-webpack
  2. Install TypeScript, Node Sass, and Svelte Preprocess: npm i -D typescript node-sass svelte-preprocess
  3. Create a svelte.config.js:
const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess()
}
  1. Restart Svelte Beta in VS Code
  2. Add lang="scss" to <style> tag in src/App.svelte
  3. Save file. Svelte Beta warning should appear on <script> tag

Expected behavior Expected Svelte Beta to not return any warnings or errors.

Screenshots SvelteWarning SvelteWarning001 SvelteWarning002 SvelteWarning003

System:

  • OS: Windows 10
  • IDE: VSCode 1.45.0
  • Plugin/Package: “Svelte Beta”

Additional context Frequently recommended/obvious fixes that did not work:

  • Double, triple, and quadruple checked that I had a svelte.config.js file at the root of my project.
  • Tried setting runtime to path to Node.js: C:\Program Files\nodejs\node.exe
  • Tried the following variants of svelte.config.js:
const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: [sveltePreprocess()]
}
const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess({
    sass: true
  })
}
const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess({
    sass: true,
    typescript: true
  })
}
  • Webpack configuration uses preprocess options exported by svelte.config.js and compiles Svelte code with no errors or warnings.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 6
  • Comments: 30 (12 by maintainers)

Commits related to this issue

Most upvoted comments

I tried this and the problem I run into can be fixed by setting svelte.language-server.runtime like @dummdidumm suggested. @JoeBobMiles you can try to require node-sass in a js file and run the file with node to see if there are any errors.

const nodeSass = require('node-sass')

console.log(nodeSass)

It is documented and the warning in the IDE does also hint at this.

The “Cannot find any of modules: …” error can appear when the package is not found, because the module resolution did not find it, or because it did find it but the node versions did not match and node-sass then throws an error. svelte-preprocess swallows both these errors and just emits “Cannot find any of modules: …”

Aha! Thanks for the pointer!

Okay, so this exposes that I was just playing around and didn’t test this on a real app yet 😆

There are two implicit dependencies that are obvious in hindsight, but the warning leads you astray:

1. Error: Cannot find module 'svelte/package.json'

2. Error: [svelte-preprocess] Error transforming 'typescript'. Cannot find module 'typescript'

I think it’d be cool to offer a fallback Typescript and Svelte for folks to play around quickly, similar to how VSCode works with Typescript.

The package.json thing is interesting, need to check on that. It should fall back to the plugin’s built in svelte version. Apart from that, this does work today already for typescript only. You need to delete the svelte.config.js completely. A fallback is used then which should be able deal with typescript but not more. This is not documented because right now there is just too much fluctuation in that area.

Ah, I see. I will get the new log when I am next able then.