svelte: Svelte 5: List of libraries not working out of the box

Hey @dummdidumm, we’ve had a few reports on a couple of components with Bits/Melt (Range Calendar being one), as well as a few about https://github.com/huntabyte/cmdk-sv. I’ll confirm and try to put some minimal repros together.

svelte-sonner no work -> #10359 (comment)

@dummdidumm most of the issues I’m seeing in a few different components consist of the ERR_SVELTE_TOO_MANY_UPDATES. The functionality appears to work as expected, but the error is displayed in the browser’s console.

Reproduction

1. Launch minimal repro Stackblitz
2. Click “Show Toast” button
3. Observe errors in the browser console

i’m using shadcn-svelte and trying to get the combo box example working with the current version of svelte 5. I’ve installed all the below dependancies for it to work:

1. npx shadcn-svelte@latest add popover
2. npx shadcn-svelte@latest add command
3. npm install cmdk-sv

When installing these i need to use --force as otherwise i can’t install any of the shadcn-svelte components. I’ve been told that its because it uses svelte/internal. You can see the error i get when trying without force in the second code example below. However more importantly I get the below error when I try to open a page with the combo box element on it

Error with combo installed using --force

✘ [ERROR] Invalid assignment target

    node_modules/cmdk-sv/dist/cmdk/components/Command.svelte:82:30:
      82 │       $.mutate_store(stateStore, $.untrack($stateStore).value() = value2, $.untrack($stateStore));
         ╵                                  ^

9:10:29 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/cmdk-sv/dist/cmdk/components/Command.svelte:82:30: ERROR: Invalid assignment target
    at failureErrorWithLog (/Users/me/Sites/my-project-v4/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/me/Sites/my-project-v4/node_modules/esbuild/lib/main.js:1059:25
    at /Users/me/Sites/my-project-v4/node_modules/esbuild/lib/main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Error when trying to install any shadcn-svelte component without --force

ERROR: Command failed with exit code 1: npm install paneforge
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: my-project-v4@0.0.1
npm ERR! Found: svelte@5.0.0-next.68
npm ERR! node_modules/svelte
npm ERR!   svelte@"^5.0.0-next.55" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^4.0.0" from paneforge@0.0.2
npm ERR! node_modules/paneforge
npm ERR!   paneforge@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/me/.npm/_logs/2024-02-27T22_20_26_351Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/me/.npm/_logs/2024-02-27T22_20_26_351Z-debug-0.log

svelteflow.dev - the following error occurs as soon as the dep is installed

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import ‘/home/qw/projects/qwerty/node_modules/.pnpm/@xyflow+svelte@0.0.37_svelte@5.0.0-next.69/node_modules/@xyflow/svelte/dist/lib/container/SvelteFlow’ is not supported resolving ES modules imported from /home/sol/projects/qwerty/node_modules/.pnpm/@xyflow+svelte@0.0.37_svelte@5.0.0-next.69/node_modules/@xyflow/svelte/dist/lib/index.js

• svelte-range-slider-pips breaks as tracked in https://github.com/simeydotme/svelte-range-slider-pips/issues/130

svelte-confetti has been fixed as of version 1.3.2 https://github.com/Mitcheljager/svelte-confetti/pull/10

It seems like a ton of libraries are using svelte/internal is there no way to mimic the functionality of the most common things they are doing to greatly reduce the ecosystem fragmentation?

svelte-sonner repro: https://stackblitz.com/edit/sveltejs-kit-template-default-y7ihkq?file=src%2Froutes%2FCounter.svelte

or just install “svelte-sonner” and use component with latest svelte 5 (alpha 68 at this moment)

In the browser console it says: ERR_SVELTE_TOO_MANY_UPDATES

@mquandalle can you provide a reproduction? I tried the code snippet in the related svelte-range-slider-pips issue and it’s working for me.

@Leftium the bug with the artifact should be fixed through #10555

svelte-sonner no work -> https://github.com/sveltejs/svelte/issues/10359#issuecomment-1949429550