bug: `svelte-radix` is not installed when adding/updating components

[znichola]

Describe the bug

My guess is svelte-radix was not added as a dependancy

Error: Cannot find module 'svelte-radix/ArrowLeft.svelte' imported from '/home/znichola/desinsecta/src/lib/components/ui/carousel/carousel-previous.svelte'
    at nodeImport (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:54736:25)
    at ssrImport (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:54643:30)
    at eval (/home/znichola/desinsecta/src/lib/components/ui/carousel/carousel-previous.svelte:6:37)
    at async instantiateModule (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:54705:9) {
  code: 'ERR_MODULE_NOT_FOUND'

I've tried adding it to my packages with npm install radix-svelte but no dice, so I'm no longer sure what the fix should be.

Reproduction

start a new project with shadcn-svelte and add the carousel with npx shadcn-svelte@latest add carousel and the project stops building.

Logs

12:22:20 PM [vite] hmr update /src/lib/components/sections/InsectCarousel.svelte, /src/app.pcss
12:22:21 PM [vite] Pre-transform error: Failed to resolve import "svelte-radix/ArrowLeft.svelte" from "src/lib/components/ui/carousel/carousel-previous.svelte". Does the file exist?
12:22:21 PM [vite] Pre-transform error: Failed to resolve import "svelte-radix/ArrowRight.svelte" from "src/lib/components/ui/carousel/carousel-next.svelte". Does the file exist?
12:22:21 PM [vite] Internal server error: Failed to resolve import "svelte-radix/ArrowLeft.svelte" from "src/lib/components/ui/carousel/carousel-previous.svelte". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/znichola/desinsecta/src/lib/components/ui/carousel/carousel-previous.svelte:4:23
  34 |  import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
  35 |  import { cn } from "$lib/utils.js";
  36 |  import ArrowLeft from "svelte-radix/ArrowLeft.svelte";
     |                         ^
  37 |  import { getEmblaContext } from "./context.js";
  38 |  const file = "src/lib/components/ui/carousel/carousel-previous.svelte";
      at formatError (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:50509:46)
      at TransformContext.error (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:50503:19)
      at normalizeUrl (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:65560:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:65715:47
      at async Promise.all (index 4)
      at async TransformContext.transform (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:65636:13)
      at async Object.transform (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:50818:30)
      at async loadAndTransform (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:53591:29)
      at async viteTransformMiddleware (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:63375:32)
12:22:21 PM [vite] Internal server error: Failed to resolve import "svelte-radix/ArrowRight.svelte" from "src/lib/components/ui/carousel/carousel-next.svelte". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/znichola/desinsecta/src/lib/components/ui/carousel/carousel-next.svelte:4:24
  34 |  import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
  35 |  import { cn } from "$lib/utils";
  36 |  import ArrowRight from "svelte-radix/ArrowRight.svelte";
     |                          ^
  37 |  import { getEmblaContext } from "./context.js";
  38 |  const file = "src/lib/components/ui/carousel/carousel-next.svelte";
      at formatError (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:50509:46)
      at TransformContext.error (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:50503:19)
      at normalizeUrl (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:65560:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:65715:47
      at async Promise.all (index 4)
      at async TransformContext.transform (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:65636:13)
      at async Object.transform (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:50818:30)
      at async loadAndTransform (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:53591:29)
      at async viteTransformMiddleware (file:///home/znichola/desinsecta/node_modules/vite/dist/node/chunks/dep-nGG-_oRu.js:63375:32)
12:22:27 PM [vite] ✨ new dependencies optimized: embla-carousel-svelte
12:22:27 PM [vite] ✨ optimized dependencies changed. reloading

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 4.94 GB / 7.64 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 21.1.0 - ~/.nvm/versions/node/v21.1.0/bin/node
    npm: 10.2.0 - ~/.nvm/versions/node/v21.1.0/bin/npm
    bun: 1.0.11 - ~/.bun/bin/bun
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.0 
    bits-ui: ^0.18.2 => 0.18.2 
    svelte: ^4.2.7 => 4.2.10

Severity

annoyance

[znichola]

I got around the problem by importing the arrow from radix-icons-svelte

// import ArrowRight from "svelte-radix/ArrowRight.svelte";
import { ArrowRight } from "radix-icons-svelte";

// import ArrowLeft from "svelte-radix/ArrowLeft.svelte";
import { ArrowLeft } from "radix-icons-svelte";

[AdrianGonz97]

@znichola Thanks for raising an issue!

The fix for you will be to install svelte-radix, the icon library (not radix-svelte).

This is a bit of an oversight on our part as the icon library type is installed on init, so any users that initialized their project before we replace radix-icons-svelte will have issues when they try to add or update their components. We'll need to figure out a way to address this.

[huntabyte]

I suppose one possible way would be determining if the component relies on that icon pack and if it isn't installed, install it or perhaps even prompt the user if they wish to install it (in case they intentionally removed it to replace with an icon pack of their own).

Though this would get annoying after a while considering any new projects will have the right icons installed on init, so now I'm wondering if this is even worth addressing at the CLI level.

[TomWaterz]

I'm not sure the CLI update tool works. I updated to 0.8.0 then ran npx shadcn-svelte@latest update sheet. This didn't update the sheet to the 0.8.0 version which doesn't use the svelte-radix icons. Is the only way to update to the newer version that has the icon fix to manually copy paste?

[huntabyte]

The latest version of the components does use the svelte-radix icons. We dropped radix-icons-svelte @TomWaterz

[TomWaterz]

ah ok gotcha ty

[huntabyte]

Closing this as this only effects existing installs and we can point to this issue should the issue arise.

[dhust]

Still an issue with new installs. Using the combobox. Maybe because I'm using SvelteKit with Svelte 5?

<script lang="ts">
    import Check from 'svelte-radix/Check.svelte';
    import CaretSort from 'svelte-radix/CaretSort.svelte';

Error: Command failed with exit code 1: npm i cmdk-sv bits-ui svelte-radix
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: editor@0.0.1
npm error Found: svelte@5.0.0-next.225
npm error node_modules/svelte
npm error   dev svelte@"^5.0.0-next.1" from the root project
npm error
npm error Could not resolve dependency:
npm error peer svelte@"^3.54.0 || ^4.0.0 || ^5.0.0" from svelte-radix@1.1.0
npm error node_modules/svelte-radix
npm error   svelte-radix@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps

[huntabyte]

You're still using svelte-radix@1.1.0 should be svelte-radix@1.1.1

[EyosiyasMekbib]

I added the select component and run svelte check command and i ran into this error

Error: Cannot find module 'svelte-radix/Check.svelte' or its corresponding type declarations. (ts)
        import { Select as SelectPrimitive } from "bits-ui";
        import Check from "svelte-radix/Check.svelte";
        import { cn } from "$lib/utils.js";

Error: Cannot find module 'svelte-radix/CaretSort.svelte' or its corresponding type declarations. (ts)
        import { Select as SelectPrimitive } from "bits-ui";
        import CaretSort from "svelte-radix/CaretSort.svelte";
        import { cn } from "$lib/utils.js";
====================================
svelte-check found 2 errors and 0 warnings in 2 files

I am using Svelte 5 and SvelteKit. I couldn't seem to find any fixes in the above comment do you have any solution for this?

[KadeR-jpg]

I added the select component and run svelte check command and i ran into this error

Error: Cannot find module 'svelte-radix/Check.svelte' or its corresponding type declarations. (ts)
        import { Select as SelectPrimitive } from "bits-ui";
        import Check from "svelte-radix/Check.svelte";
        import { cn } from "$lib/utils.js";

Error: Cannot find module 'svelte-radix/CaretSort.svelte' or its corresponding type declarations. (ts)
        import { Select as SelectPrimitive } from "bits-ui";
        import CaretSort from "svelte-radix/CaretSort.svelte";
        import { cn } from "$lib/utils.js";
====================================
svelte-check found 2 errors and 0 warnings in 2 files

I am using Svelte 5 and SvelteKit. I couldn't seem to find any fixes in the above comment do you have any solution for this?

I was having the same issue, i don't think that svelte-radix is installed by default from the CLI init. Just manually installed svelte-radix and that fixed the issue.

[EyosiyasMekbib]

Thanks! that worked