Dependencies not compatible with Svelte 4

[gursheyss]

Current Behavior

When installing some components, such as labels or radio groups,

Installing 1 component(s) and dependencies...
⠼ Label...file:///Users/gursheys/.npm/_npx/6326117962061f1d/node_modules/execa/lib/error.js:59
                error = new Error(message);
                        ^

Error: Command failed with exit code 1: npm install radix-svelte
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: download-aio@0.0.1
npm ERR! Found: svelte@4.0.0
npm ERR! node_modules/svelte
npm ERR!   dev svelte@"^4.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.58.0" from radix-svelte@0.8.0
npm ERR! node_modules/radix-svelte
npm ERR!   radix-svelte@"^0.8.0" 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/gursheys/.npm/_logs/2023-06-24T08_10_28_388Z-eresolve-report.txt

Expected Behavior

Successfully added component and install radix-svelte

Steps To Reproduce

npx shadcn-svelte add input

More Information

Ive tried using npm install radix-svelte --legacy-peer-deps but adding some components still doesn't work.

[huntabyte]

I'm talking to the Radix Svelte team about upgrading to Svelte 4.0 which will resolve these issues. We're at the mercy of that project at the moment. If you want to use the project immediately, I'd suggest using the latest Svelte 3.X release until this has been resolved.

[huntabyte]

Additionally, this PR will address the issues with Lucide.

[mpost]

How does the retirement of the radix svelte library factor into resolving this issue?

https://github.com/radix-svelte/radix-svelte/blob/develop/ANNOUNCEMENT.md

Also how does it affect the future of this library, and possible migration to melt ui?

[jasongitmail]

Also how does it affect the future of this library, and possible migration to melt ui?

@mpost RE your 2nd question, Melt is written by the same dev as radix-svelte with help from Huntabyte. Huntabyte is planning to move shadcn-svelte to use melt-ui in place of Radix UI.

[mpost]

@jasongitmail Thanks for the insight. :)

[philschmid]

Any update on that. I would love to use it with Sveltekit and svelte4

[philschmid]

@juliuslipp the issue is radix-svelte here?

[juliuslipp]

@philschmid I guess so. It is the only dep. that shows the error of svelte3 rn. Cannot test it properly rn though.

Another workaround would be to just install Svelte3, run init, and then install 4 again. Radix-

npm i -S svelte@3
npx shadcn-svelte init
npm i -S svelte@4

[philschmid]

Thanks sounds not very stable. I guess i need to continue using NextJS :/

[huntabyte]

Thanks sounds not very stable. I guess i need to continue using NextJS :/

It's not very stable yet unfortunately. I've actively been working with others on MeltUI which will replace Radix Svelte, but as I'm sure you can imagine building a headless UI library with all of these components isn't a super quick process!

You can track the progress on it @ https://github.com/melt-ui/melt-ui - we're getting close to a 1.0 release and when that occurs and we have some stability, shadcn-svelte will also have stability!

Sorry about that :/

[juliuslipp]

Let me know, if you need some support. Would be open to help out a little!

[philschmid]

@huntabyte thank you for the update and thank you for working on that! Its a huge help for the svelte community! Will Melt-UI replace radix or will it replace the shadcn version?

[huntabyte]

It will replace Radix! Melt is 100% headless :) also when that occurs I'll update this project to catch up with the new themes and such that shad has released on the main project!

[philschmid]

Fantastic! Do you think we could keep backwards compatibility? Since i am now thinking of going with svellte3 and then migrating as soon as melt-ui takes over

[laurent512]

Hi @huntabyte ! Thank you so much for the great job you are goind ! :) Can you share with us the timing you have in mind to make all components compatible with svelte 4 ? :)

[philschmid]

There was a release yesterday in radix-svelte to svelte 4. https://github.com/radix-svelte/radix-svelte/releases/tag/v0.9.0

[carere]

@philschmid Does it means it's ok to use this library with svelte 4 ?

[srazzak]

It will replace Radix! Melt is 100% headless :) also when that occurs I'll update this project to catch up with the new themes and such that shad has released on the main project!

I've been playing around with Melt and I was wondering how this would be possible given that Svelte doesn't allow event forwarding for custom components. This was an issue Thomas pointed out as a pain point with radix-svelte.

As an example (see below), assuming you'd create your own Button element in shadcn-svelte, how would you create a Dialog component using that Button element as the trigger? I'm curious if you have a solution for this, thanks.

PS: Love what you're doing!

<!-- Button.svelte -->
<button
  {...$$props}
  on:click
  on:change
>
  <slot />
</button>

<!-- Dialog.svelte -->
<script>
  import Button from '$lib/components/ui/Button.svelte'
  import { createDialog } from '@melt-ui/svelte';
  const { trigger, portal, overlay, content, title, description, close, open } = createDialog();
</script>

<!-- this Button component will not work since we can't forward events -->
<Button {...$trigger} use:trigger>
  Open dialog
</Button>

<div use:portal>
  {#if $open}
    <div {...$overlay} use:overlay />
    <div
      {...$content}
      use:content
    >
      <slot name="content" />
    </div>
  {/if}
</div>

[huntabyte]

Hey thanks for the kind words @srazzak!

We're going to be publishing some "componentization" guides once the API is more stable, which I'll likely write as I work through the implementation details of shadcn-svelte 1.0 ✅

So instead of saying use:trigger on the Button component, you would have to pass that trigger action as a prop.

We'll have some helper types eventually as well to assist with this, but this will all be abstracted away in shadcn-svelte as DialogTrigger, etc., as it is now.

The regular button element would take the action prop (maybe more than one) which would could default to a dummy do nothing action and then just have use: (name undecided) on the regular button element. The event listeners for each respective builder are all handled within the action, but you could add more if you wanted.

If you join the discord there's a few peeps in there that are already building some pretty nice components with it. I'd write some better examples but I'm on mobile atm.

[srazzak]

Ahhh okay, that makes sense. I'll take a look at the Discord.

Looking forward to the release and thanks Hunter!

[avarun42]

Now that radix-svelte has been updated to support Svelte 4, is there an upcoming release to shadcn-svelte that will support Svelte 4 as well?

[huntabyte]

Closed by #150