Using with Tauri

[Fighter178]

I'm trying to use shadcn-svelte with Tauri (2.0) and Svelte. When trying to use the CLI, even after a manual installation, I get this error:

┌   shadcn-svelte  v0.14.0
│
└  [Config Error]: Invalid import alias found: ("utils": "src/lib/utils") in components.json.
   - Import aliases must use existing path aliases defined in your tsconfig.json (e.g. "utils": "$lib/utils").
   - See: https://www.shadcn-svelte.com/docs/installation/manual#configure-path-aliases.

Here's my components.json:

{
 "$schema": "https://next.shadcn-svelte.com/schema.json",
 "style":"new-york",
 "tailwind": {
     "config":"tailwind.config.ts",
     "css": "src/app.{p,post}css",
     "baseColor": "zinc"
 },
 "aliases": {
     "utils": "$lib/utils",
     "components": "$lib/components"
 },
 "typescript": true,
 "registry": "https://next.shadcn-svelte.com/registry"
}

I did have to make it manually because of the init command not accepting $lib/components as a valid path alias.

And tsconfig.json:

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "bundler"
  },

  
  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
  //
  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
  // from the referenced tsconfig.json - TypeScript does not merge them in
  "paths": {
    "$lib": ["./src/lib"],
    "$lib/*": ["./src/lib/*"]
  }
}

I read the comment that was there originally but it doesn't seem to work with the CLI.

And, the docs also say path aliases need changing vite.config.js so here's that:

import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import path from "path";


const host = process.env.TAURI_DEV_HOST;

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  plugins: [sveltekit()],

  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  //
  // 1. prevent vite from obscuring rust errors
  clearScreen: false,
  // 2. tauri expects a fixed port, fail if that port is not available
  server: {
    port: 1420,
    strictPort: true,
    host: host || false,
    hmr: host
      ? {
          protocol: "ws",
          host,
          port: 1421,
        }
      : undefined,
    watch: {
      // 3. tell vite to ignore watching `src-tauri`
      ignored: ["**/src-tauri/**"],
    },
  },
  resolve: {
    alias: {
      $lib: path.resolve("./src/lib"),
    },
  }
}));

[Fighter178]

I think this is actually a duplicate of #1474, or at least has the same error. I just never had this error before and was the first time trying to use shadcn-svelte with Tauri so I assumed Tauri was the problem, which it likely could be. This comment shows a similar issue to mine. Oh, and I know my tsconfig is not correct

[nyssance]

Tauri2 + Svelte5(SvelteKit) + shadcn-svelte next + tailwind3

Just keep the default config, do not need add anything, and change tailwind.config.ts to tailwind.config.js.

My config

components.json

{
  "$schema": "https://next.shadcn-svelte.com/schema.json",
  "style": "new-york",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app.css",
    "baseColor": "slate"
  },
  "aliases": {
    "components": "$lib/components",
    "utils": "$lib/utils",
    "ui": "$lib/components/ui",
    "hooks": "$lib/hooks"
  },
  "typescript": true,
  "registry": "https://next.shadcn-svelte.com/registry"
}

tsconfig.json keep default.

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

// @ts-expect-error process is a nodejs global
const host = process.env.TAURI_DEV_HOST

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  plugins: [sveltekit()],

  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  //
  // 1. prevent vite from obscuring rust errors
  clearScreen: false,
  // 2. tauri expects a fixed port, fail if that port is not available
  server: {
    port: 5173,
    strictPort: true,
    host: host || false,
    hmr: host
      ? {
          protocol: 'ws',
          host,
          port: 1421
        }
      : undefined,
    watch: {
      // 3. tell vite to ignore watching `src-tauri`
      ignored: ['**/src-tauri/**']
    }
  }
}))