svelte-preprocess may silently fail to auto-resolve tsconfig

[7nik]

From sveltejs/svelte#15782

If tsconfig.json does not contain compilerOptions and instead references other tsconfigs, svelte-preprocess fails to get the actual TS configs. In particular, it results in the fallbacked target ES2015, where object resting isn't supported yet (it was added in ES2018), and the following component fails to compile:

<script lang="ts">
  let { foo = $bindable("foo"), ...rest } = $props();
</script>

{foo} {Object.keys(rest)}

[plugin:vite-plugin-svelte] src/App.svelte:12:27 `$bindable()` can only be used inside a `$props()` declaration
https://svelte.dev/e/bindable_invalid_location

src/App.svelte:12:27

10 |      return t;
 11 |  };
 12 |  let _a = $props(), { foo = $bindable("foo") } = _a, rest = __rest(_a, ["foo"]);
                                                  ^
 13 |  </script>
 14 |

To Reproduce

1. Create a project via npm create vite, select Svelte and Typescript.
2. Install svelte-preprocess npm i svelte-preprocess and apply it vite.config.ts

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { sveltePreprocess } from 'svelte-preprocess';

// https://vite.dev/config/
export default defineConfig({
  plugins: [svelte({
    preprocess: sveltePreprocess()
  })],
})

3. Add the aforementioned component.
4. Run the project.

Expected behavior
The component is successfully compiled.

Information about your project:

• svelte-preprocess version 6.0.3

[dummdidumm]

Probably makes sense to use a more recent target by default

[janosh]

sounds like something that'll be fixed in svelte-preprocess? is there a workaround packages can apply so users don't encounter this error? asking for janosh/svelte-multiselect#305

[7nik]

I looked into this. I thought that the tsconfig should be just extended with referenced ones, but after reading the docs, I understood that references allows running TS on files (subprojects) with independent tsconfigs simultaneously and in within a single process. That means that svelte-preprocess should find and apply tsconfig matching the current file.

So, maybe for now it would be easier to just emit a warning that svelte-preprocess failed to auto-resolve tsconfig or the resolved tsconfig doesn't contain compilerOptions, so the user should manually specify path to it.