Style tag `lang` attribute triggers warning from Svelte Beta #129

joebobmiles · 2020-05-28T23:18:10Z

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:

Create a new Svelte + Webpack project by using: degit svelte/template-webpack
Install TypeScript, Node Sass, and Svelte Preprocess: npm i -D typescript node-sass svelte-preprocess
Create a svelte.config.js:

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess()
}

Restart Svelte Beta in VS Code
Add lang="scss" to <style> tag in src/App.svelte
Save file. Svelte Beta warning should appear on <script> tag

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

Screenshots

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.

The text was updated successfully, but these errors were encountered:

Egnus · 2020-05-29T15:07:33Z

This also happens to me, as soon as I disable any language or detail pointing the language of the style imported via src="./xxx.scss" the system stops complaining about it at the beginning of the page.

dummdidumm · 2020-05-30T16:44:30Z

Since it happens for scss, I'm very certain that it's a node-sass problem like this one.

Could you open Output->Svelte in VSCode (view at the bottom, also where your terminal is), reproduce the error and paste in here what the output is?

Possibly related: #32

Egnus · 2020-06-01T13:16:57Z

nothing done with Node-sass locally and globally has changed the result even after several reloads.

This is the output of Svelte (notice I have 3.20.1 because a bug in the updated version does not allow me to upgrade the project, reported as well)

loading config for /PATH/TO/PROJECT/src/Button.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/node_modules/@smui/common/H6.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler

The linting SCSS could be related and I also used to have that when I had inline SCSS, but just as a side note, this is not an error, it is a warning, at the top of the file. No SCSS is required to be parsed.

I believe is something related to this htmlxparser.ts

joebobmiles · 2020-06-01T13:37:12Z

@dummdidumm I did actually check that output before posting this bug and saw no errors being reported by Svelte Beta. I will try again today when I am able and post the logs.

Since it happens for scss, I'm very certain that it's a node-sass problem like this one.

I am skeptical that it would be the case, but I will investigate and see what I find.

dummdidumm · 2020-06-01T15:44:03Z

From @Egnus output I can infer that the svelte.config.js was found. If the config is not found but needed (due to lang/type being set on script/style), a No svelte.config.js found but one is needed message would show up in the log.
It also has nothing to do with the htmlxparser of svelte2tsx, because there is no preprocessing done in there. It fails here while trying to get diagnostics from the svelte compiler.

Part of sveltejs#86, sveltejs#129, sveltejs#148

* more logging, better preprocessing error message Part of #86, #129, #148 * log error during config load

joebobmiles · 2020-06-01T23:39:01Z

Here's the log I got when I checked the Svelte output (paths anonymized; slashes as they were when displayed in VS Code):

Initialize language server at c:/PATH/TO/PROJECT/
Initialize new ts service at  
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler

Nearly identical to @Egnus's VS Code output, save for the Svelte version and addition of Initializing new ts service at. Not sure it's of consequence, but the alternation of slashes between messages stands out to me.

Also double-checked that node-sass was compatible with my version of Windows and Node.js. node-sass v4.14.1 (latest release as of right now) is compatible with my version of node, v13.7.

dummdidumm · 2020-06-02T06:34:52Z

Could you please check one more time? I pushed an update with more logging in that area and also updated the user-facing error message a little.

joebobmiles · 2020-06-02T13:33:20Z

Are you referring to the commit above? If so, I had checked after the commit was merged, and had installed the new update before checking.

dummdidumm · 2020-06-02T13:46:06Z

The extension is published nightly, last time about 8 hours ago, so your log 14 hours ago is likely with the "old" version.

joebobmiles · 2020-06-02T13:48:04Z

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

Egnus · 2020-06-02T18:19:58Z

I will also check it in a few hours or before

Egnus · 2020-06-02T18:38:59Z

Mmmm interesting, you were right:

Preprocessing failed
Error: Cannot find any of modules: node-sass,sass
    at Object.exports.importAny (/PATH/TO/PROJECT/node_modules/svelte-preprocess/dist/utils.js:1:2844)

I will check why svelte.config.js is not using it and come back

Egnus · 2020-06-02T19:02:06Z

Ok, so it seems that svelte-preprocess does not find node-sass neither global or local by VSCode. While the same Rollup Config importing the following svelte.config.js does.

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

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['x', 'y', 'z'],
    },
    typescript: {
      extensions: ['x', 'y', 'z'],
      includePaths: ['x', 'y', 'z'],
    },
  }),
  // ...other svelte options
};

// The following alternative should make SCSS to work but nothing else will. Why the auto preprocess does not work here?

// import sass from 'node-sass';
// module.exports = {
//   preprocess: {
//     style: async ({ content, attributes }) => {
//       if (attributes.type !== 'text/scss') {
//         return;
//       }

//       const result = await sass.renderSync({
//         data: content,
//         sourceMap: 'style.css.map',
//         omitSourceMapUrl: true,
//       });

//       return {
//         code: result.css.toString('utf8'),
//         map: result.map.toString('utf8'),
//       };
//     },
//   },
// };

Could be a problem of Svelte Beta? I have no idea how to tell the path of node-sass to the VSCode at this point, apart of writing the preprocess myself.

matthewmueller · 2020-06-02T19:36:37Z

I'm getting this on master and I don't think I even have node-sass installed on my computer. Typescript is working (!!!) there's just this rather annoying lint warning.

.
├── home.svelte
├── node_modules
│   ├── @types
│   ├── detect-indent
│   ├── min-indent
│   ├── strip-indent
│   └── svelte-preprocess
├── package-lock.json
├── package.json
└── svelte.config.js

home.svelte

<script lang="typescript">
  export let title: string = "10";
</script>

<style>
  h2 {
    background: blue;
  }
</style>

<html lang="en">
  <h2>{parseInt(title, 10)}</h2>
</html>

svelte.config.js

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess(),
}

Happy to test anything further to help narrow this down.

I'd also ❤️ to remove svelte.config.js and just have some common configurations baked in. Happy to open a PR to make this happen. Edit, I think #87 made this happen 👏

Egnus · 2020-06-02T19:48:59Z

mm Im curious @matthewmueller, update Svelte Beta in your extensions and copy here the Output->Svelte in VSCode (view at the bottom, also where your terminal is).

matthewmueller · 2020-06-02T20:00:49Z

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:

Error: Cannot find module 'svelte/package.json'
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.

dummdidumm · 2020-06-02T20:01:31Z

Regarding baking this in: I thought about this, too, but I think the svelte community might already be too used to custom preprocessors. If we were to have all this inside the plugin, this would mean adding and installing dependencies like node-sass, less, babel,.. this bloats the plugin.

Coming back to the specific issue, there are two problems:

Module resolution screws up sometimes. Why is something that needs to be investigated. It's also worth noting that setups like yarn's pnp are not working .
node-sass is very sensitive to the node version that is used. For me it's always enough to set the runtime environment in the svelte beta settings to my node executable that is also used by the rest of the app. If you don't do that, VSCode's node version is used and that might not match.

matthewmueller · 2020-06-02T20:06:04Z

@dummdidumm I feel for your sentiment, but I personally think Typescript has reached a certain level of popularity where it warrants first-class support. Most new codebases are starting with Typescript and old ones are getting upgraded. This is blocking lots of folks from trying Svelte: https://news.ycombinator.com/item?id=21376557

I'd personally skip first-class babel support and see how much people complain – there's so much variability in the configuration and it can open up a can of worms support-wise.

I also don't think there's any CSS solutions that have reached such unanimous support. Also since Svelte already offers a great scoped CSS solution, I don't think it's as necessary as typed javascript.

dummdidumm · 2020-06-02T20:06:47Z

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.

matthewmueller · 2020-06-02T20:08:17Z

Yep, this is amazing! I've removed svelte.config.js and added svelte and typescript dependencies. It works like a charm!

Also thanks to @Egnus for teaching a man to fish.

Egnus · 2020-06-02T20:43:26Z

yes, removing svelte.config.js solved de issue for me as well

joebobmiles · 2020-06-02T22:45:32Z

@dummdidumm Checked and got the same error report as Egnus did:

Initialize language server at  c:/PATH/TO/PROJECT/
Initialize new ts service at  
Trying to load config for c:/PATH/TO/PROJECT/src/App.svelte
Found config at  c:\PATH\TO\PROJECT\svelte.config.js
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Preprocessing failed
Error: Cannot find any of modules: node-sass,sass
    at Object.exports.importAny (c:\PATH\TO\PROJECT\node_modules\svelte-preprocess\dist\utils.js:1:2844)

I also experimented with removing the svelte.config.js file, but it didn't work for my case. From what I understand of the discussion though, it seems that was meant to only fix situations where only the typescript preprocessor was being used.

The question this raises is if Svelte is looking for node-sass or sass to be on the system path instead of in node_modules? While I have node-sass installed locally for the project, I don't have it installed globally.

dummdidumm · 2020-06-03T05:49:07Z

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: ..."

jasonlyu123 · 2020-06-03T06:08:18Z

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)

Egnus · 2020-06-03T09:19:43Z

@joebobmiles during this bunch of test, I didn't just remove svelte.config.js but also installed sass as a DevDependency (I only had node-sass), and installed node-sass globally.

With this already done before, without succeeding, when I removed the JS file, Svelte Beta worked, but I really don't know which of these other details I did have affected to it and I cannot test it at the moment.
Let us know if any of these extra changes might solve the issue. Also, restart Language-tools and vscode window with every try.

joebobmiles · 2020-06-03T23:05:13Z

@jasonlyu123 Thanks for the advice. Using your code snippet, I didn't receive any errors, so I assume that node-sass is indeed working. (Though I just realized as typing this that since Webpack was compiling without issues, that check may have been redundant.)

However, it does seem that node-sass was the problem. After installing sass (and only installing sass), Svelte Beta stopped reporting warnings. I removed node-sass from my project and the warnings didn't reappear. Seems Svelte Beta was only looking for sass instead of either sass or node-sass.

Additionally, I played around with changing the lang value from scss to sass and noticed some funny behavior with linting. While Svelte Beta no longer complains, VS Code's CSS linter seems to not like seeing the indentation based Sass syntax inside a style tag:

Though I think that's more of a VS Code issue than a Svelte Beta issue.

dummdidumm · 2020-06-04T05:42:43Z

SASS is unfortunately not supported as of now. We use https://github.com/microsoft/vscode-css-languageservice/tree/master/src for the linting etc and that library does not support SASS.

Although your errors seem fixed through workarounds, I still wanna leave this open in case someone else comes across this issue, and also to get to the bottom of this problem.

hackape · 2020-06-09T03:12:15Z

A bit feedback on the issue. I encountered the same problem, and resolved by setting "svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node".

I think this due to that the default node runtime in vscode extenstion Code Helper (Renderer) is electron custom built, which has trouble resolving native lib like node-sass.

ps aux output:

/Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper (Renderer).app/Contents/MacOS/Code Helper (Renderer) --inspect=6009 /Users/username/.vscode/extensions/svelte.svelte-vscode-99.0.39/node_modules/svelte-language-server/bin/server.js --node-ipc --clientProcessId=72991

Need to document this somewhere. Or better, by default try to locate a normal node binary for user right inside the extenstion like exec('/usr/bin/env which node') (Not sure how to do the same on windows though).

dummdidumm · 2020-06-09T06:00:21Z

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

Narrow down in which step the error occurs and try to extract better error messages. sveltejs#86, sveltejs#232, sveltejs#129

* (feat) better error diagnostics Narrow down in which step the error occurs and try to extract better error messages. #86, #232, #129 * (feat) show svelte.config.js errors * cleanup * tests * fix error msg

dummdidumm · 2020-06-30T18:19:41Z

Warnings will be better in the upcoming prod release, can already be tested on nightly. I hope this will narrow down the problem in the future. Since this issue already has too many things going on in parallel from which most if not every one of them is solved, I'm going to close this. If a SCSS-related issue occurs, please open a new issue.

joebobmiles added the bug Something isn't working label May 28, 2020

dummdidumm pushed a commit to dummdidumm/language-tools that referenced this issue Jun 1, 2020

more logging, better preprocessing error message

df2d342

Part of sveltejs#86, sveltejs#129, sveltejs#148

dummdidumm mentioned this issue Jun 1, 2020

more logging, better preprocessing error message #150

Merged

dummdidumm added a commit that referenced this issue Jun 1, 2020

more logging, better preprocessing error message (#150)

27aa787

* more logging, better preprocessing error message Part of #86, #129, #148 * log error during config load

dummdidumm mentioned this issue Jun 19, 2020

Only with scss: The file cannot because script or style require a preprocessor ... #210

Closed

dummdidumm pushed a commit to dummdidumm/language-tools that referenced this issue Jun 28, 2020

(feat) better error diagnostics

0988a5d

Narrow down in which step the error occurs and try to extract better error messages. sveltejs#86, sveltejs#232, sveltejs#129

dummdidumm mentioned this issue Jun 28, 2020

(feat) better error diagnostics #240

Merged

dummdidumm closed this as completed Jun 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Style tag `lang` attribute triggers warning from Svelte Beta #129

Style tag `lang` attribute triggers warning from Svelte Beta #129

joebobmiles commented May 28, 2020

Egnus commented May 29, 2020 •

edited

dummdidumm commented May 30, 2020 •

edited

Egnus commented Jun 1, 2020

joebobmiles commented Jun 1, 2020

dummdidumm commented Jun 1, 2020

joebobmiles commented Jun 1, 2020

dummdidumm commented Jun 2, 2020

joebobmiles commented Jun 2, 2020

dummdidumm commented Jun 2, 2020

joebobmiles commented Jun 2, 2020

Egnus commented Jun 2, 2020

Egnus commented Jun 2, 2020

Egnus commented Jun 2, 2020

matthewmueller commented Jun 2, 2020 •

edited

Egnus commented Jun 2, 2020

matthewmueller commented Jun 2, 2020 •

edited

dummdidumm commented Jun 2, 2020

matthewmueller commented Jun 2, 2020 •

edited

dummdidumm commented Jun 2, 2020

matthewmueller commented Jun 2, 2020 •

edited

Egnus commented Jun 2, 2020

joebobmiles commented Jun 2, 2020

dummdidumm commented Jun 3, 2020

jasonlyu123 commented Jun 3, 2020 •

edited

Egnus commented Jun 3, 2020 •

edited

joebobmiles commented Jun 3, 2020

dummdidumm commented Jun 4, 2020

hackape commented Jun 9, 2020

dummdidumm commented Jun 9, 2020

dummdidumm commented Jun 30, 2020

Style tag lang attribute triggers warning from Svelte Beta #129

Style tag lang attribute triggers warning from Svelte Beta #129

Comments

joebobmiles commented May 28, 2020

Egnus commented May 29, 2020 • edited

dummdidumm commented May 30, 2020 • edited

Egnus commented Jun 1, 2020

joebobmiles commented Jun 1, 2020

dummdidumm commented Jun 1, 2020

joebobmiles commented Jun 1, 2020

dummdidumm commented Jun 2, 2020

joebobmiles commented Jun 2, 2020

dummdidumm commented Jun 2, 2020

joebobmiles commented Jun 2, 2020

Egnus commented Jun 2, 2020

Egnus commented Jun 2, 2020

Egnus commented Jun 2, 2020

matthewmueller commented Jun 2, 2020 • edited

Egnus commented Jun 2, 2020

matthewmueller commented Jun 2, 2020 • edited

dummdidumm commented Jun 2, 2020

matthewmueller commented Jun 2, 2020 • edited

dummdidumm commented Jun 2, 2020

matthewmueller commented Jun 2, 2020 • edited

Egnus commented Jun 2, 2020

joebobmiles commented Jun 2, 2020

dummdidumm commented Jun 3, 2020

jasonlyu123 commented Jun 3, 2020 • edited

Egnus commented Jun 3, 2020 • edited

joebobmiles commented Jun 3, 2020

dummdidumm commented Jun 4, 2020

hackape commented Jun 9, 2020

dummdidumm commented Jun 9, 2020

dummdidumm commented Jun 30, 2020

Style tag `lang` attribute triggers warning from Svelte Beta #129

Style tag `lang` attribute triggers warning from Svelte Beta #129

Egnus commented May 29, 2020 •

edited

dummdidumm commented May 30, 2020 •

edited

matthewmueller commented Jun 2, 2020 •

edited

matthewmueller commented Jun 2, 2020 •

edited

matthewmueller commented Jun 2, 2020 •

edited

matthewmueller commented Jun 2, 2020 •

edited

jasonlyu123 commented Jun 3, 2020 •

edited

Egnus commented Jun 3, 2020 •

edited