Language-tools: Does not respect default language in svelte.config.js

[TheComputerM]

Describe the bug
My svelte.config.js file looks like this:

import sveltePreprocess from "svelte-preprocess";

module.exports = {
  preprocess: sveltePreprocess({
    defaults: {
      script: "typescript",
      style: "scss",
    },
    postcss: {
      plugins: [require("autoprefixer")()],
    },
  }),
};

Expected behavior
It is showing me that you have to add lang='ts' to svelte file that looks something like this:

<script>
  export let segment: string;
</script>

{segment}

Screenshots

System (please complete the following information):

• OS: Windows
• IDE: VSCode
• Plugin/Package: Svelte for VSCode

[jasonlyu123]

Did you restart the language server after altering the config? Because loading config is expensive in terms of performance so we make it only load once.

[TheComputerM]

yeah, even restarted vs code.

[TheComputerM]

Read the disclaimer part: https://github.com/sveltejs/svelte-preprocess/blob/master/docs/getting-started.md#31-setting-default-languages

Is this feature planned to be added to the language server?

[jasonlyu123]

This is supported. Don't know what's causing the problem on your end, Can you provide a minimal reproducible?

[ignatiusmb]

svelte.config.js doesn't support ES6 import syntax, AFAIK. Try changing the import to

const sveltePreprocess = require('svelte-preprocess');

I tried to reproduce it using your config and it immediately complains with

[jasonlyu123]

Oh yeah. That's the problem. Doesn't notice the mix of common js and es module

[TheComputerM]

Yeah, I forgot
Will need to fix this

[samal-rasmussen]

The part I was missing was that the svelte language-tools doesn't read the defaults from the rollup.config.js. I had to add a svelte.config.js file to the root of my project that includes the same config options for sveltePreprocess as in the rollup config.

This is documented in the documentation for svelte-preprocess:
https://github.com/sveltejs/svelte-preprocess/blob/master/docs/usage.md#with-svelte-vs-code

Would reading the defaults from the rollup.config.js file be out of the question for the svelte language-tools? Because the onboarding experience for me on this one was a bit painful.

[jasonlyu123]

Sorry, the config passed into rollup-plugin-svelte is not visible from the outside of the function.

[nathanblair]

svelte.config.js doesn't support ES6 import syntax, AFAIK. Try changing the import to

const sveltePreprocess = require('svelte-preprocess');

I tried to reproduce it using your config and it immediately complains with

The part I was missing was that the svelte language-tools doesn't read the defaults from the rollup.config.js. I had to add a svelte.config.js file to the root of my project that includes the same config options for sveltePreprocess as in the rollup config.

This is documented in the documentation for svelte-preprocess:
https://github.com/sveltejs/svelte-preprocess/blob/master/docs/usage.md#with-svelte-vs-code

Would reading the defaults from the rollup.config.js file be out of the question for the svelte language-tools? Because the onboarding experience for me on this one was a bit painful.

Importing svelte.config.js as an ES6 module should be something that is possible. Not being able to use svelte.config.js so we can have LSP support due to being limited to by CJS is a real pain point in adopting svelte, particularly when the rest of the ecosystem is moving forward with adopting ES6 so everything can stop being so fragmented.

Node recognizes type: "module" from package.json so CJS and module loading at that point become irreconcilable.

What would the blocker be? Is this a LSP issue? Or is it a rollup plugin issue (with the svelte rollup plugin or the svelte-preprocess rollup plugin)?

[dummdidumm]

See #509 for more info on this. Also you are allowed to import CommonJS modules from ES modules, you just need to change your file ending to become svelte.config.cjs.