Skip to content

svelte-preprocess may silently fail to auto-resolve tsconfig #667

Open
@7nik

Description

@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()
  })],
})
  1. Add the aforementioned component.
  2. Run the project.

Expected behavior
The component is successfully compiled.

Information about your project:

  • svelte-preprocess version 6.0.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions