Error with external Svelte 5 components

[legowhales]

Describe the bug

Using svelte-preprocess with Svelte 5 and importing a Svelte 5 component from an npm package triggers an error:
'p' has already been declared

Detailed error with a random package

Same error occurs with bits-ui@next, svelte-clerk...

✘ [ERROR] node_modules/ui-ingredients/dist/select/item-text.svelte:9:24 `p` has already been declared [plugin vite-plugin-svelte:optimize-svelte]

    node_modules/ui-ingredients/dist/select/item-text.svelte:9:24:
      9 │        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.l...
        ╵                         ^

  The plugin "vite-plugin-svelte:optimize-svelte" was triggered by this import

To Reproduce

I made a simple example here:

https://stackblitz.com/edit/sveltejs-kit-template-default-u71xqf?file=svelte.config.js

Is there a simple way to make it work?
Thank's for your help.

[dummdidumm]

The problem is that svelte-preprocess searches for a tsconfig.json but doesn't find one and therefore falls back to an old target version which includes a down-level-transpilation of the ...rest syntax. That subsequently messes with Vite for some reason.

You can fix this by changing your jsconfig.json to a tsconfig.json.

We should probably also search for a jsconfig.json in the TypeScript preprocessor, if we don't find a tsconfig.json - even if it's a bit weird because why would someone have a jsconfig.json if they're using a TS preprocessor.

[legowhales]

Hum... well in my case I already have a tsconfig.json. But the sveltekit project is in a subfolder (in a monorepo without a tsconfig at the root level). Would that trigger the same issue as well?

I tried adding a tsconfig.json at the root of the repo, but I get the same issue.

[dummdidumm]

Does the SvelteKit project in which you have this error have a tsconfig.json? What happens if you set the tsconfigDirectory option?

[legowhales]

Yes it has.
I tried to set isconfigDirectory, but nothing changes. I updated the stackblitz example to show you the issue: https://stackblitz.com/edit/sveltejs-kit-template-default-u71xqf?file=app%2Ftsconfig.json

[dummdidumm]

What error should I be expecting in that stackblitz example? The image loads up and there's no error in the Stackblitz console.

[legowhales]

Oh yeah you are right. I made other tests since the last comment. What you where seeing is when we use the preprocessor from @sveltejs/vite-plugin-svelte. I just modified back to using svelte-preprocess, you should see the error now.

Thank you for your help.

[timlohse1104]

Did you find a solution yet?

[huntabyte]

I'm currently experiencing an issue with TailwindCSS v4 which appears to use svelte-preprocess within its @tailwindcss/vite plugin and am getting similar outputs, though unsure if it's 100% related or not tailwindlabs/tailwindcss#15250

[huntabyte]

Here's a reproduction @dummdidumm https://github.com/huntabyte/tw-v4-monorepo-repro/tree/main - @tailwindcss/vite uses svelte-preprocess, as soon as that plugin is added to the plugins array of the vite config everything crashes.

Does @tailwindcss/vite need to do some detection of the tsconfig and include it when invoking sveltePreprocess for this to work? Or is there a way we could get around this when a dependency is the one using sveltePreprocess 🤔

[sgcullen]

To add to this, I'm also experiencing the issue @huntabyte is seeing when trying to set up tailwind v4.0 beta.

[huntabyte]

It looks like the specific issue we're running into will be resolved via this PR in Tailwind tailwindlabs/tailwindcss#15274 @sgcullen (they don't need to use the preprocessor).