huntabyte / shadcn-svelte

shadcn/ui, but for Svelte. ✨
https://shadcn-svelte.com
MIT License
5.18k stars 318 forks source link

Doesn't seem to support Svelte without SvelteKit #343

Closed darbymanning closed 1 year ago

darbymanning commented 1 year ago

Current Behavior

Attempted to setup shadcn-svelte on a Svelte project without SvelteKit but found it's problematic. Attempting the initial CLI init command fails as it attempts to run svelte-kit sync.

npx shadcn-svelte@latest init

This command assumes a SvelteKit project with TypeScript and Tailwind CSS.
If you don't have these, follow the manual steps at https://shadcn-svelte.com/docs/installation.

✔ Running this command will install dependencies and overwrite your existing tailwind.config.[cjs|js|ts]. Proceed? … yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … src/app.postcss
✔ Where is your tailwind.config.[cjs|js|ts] located? … tailwind.config.cjs
✔ Configure the import alias for components: … $lib/components
✔ Configure the import alias for utils: … $lib/utils
✔ Write configuration to components.json. Proceed? … yes
Your tailwind.config.cjs has been renamed to tailwind.config.js.

✔ Writing components.json...
Command failed with exit code 1: pnpm svelte-kit sync
undefined
 ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command "svelte-kit" not found

Did you mean "pnpm svelte-check"?

Expected Behavior

We should have a way to support Svelte projects without SvelteKit.

Steps To Reproduce

pnpm create vite my-svelte-app --template svelte-ts

cd my-svelte-app/

npx svelte-add@latest tailwindcss

pnpm i

npx shadcn-svelte@latest init

Link to Reproduction / Stackblitz

No response

More Information

My current workaround has been to create a .svelte-kit/tsconfig.json file, with the content:

{
  "compilerOptions": {
    "paths": {
      "$components": ["../app/components"],
      "$components/*": ["../app/components/*"],
      "$lib": ["../app/lib"],
      "$lib/*": ["../app/lib/*"]
    }
  }
}

This satisfies svelte-kit sync, and the CLI reads these paths and resolves them accordingly, and all seems well!

I originally tempted to manage this by updating my svelte.config.js with the shadcn.componentPath, and also tried adding kit.alias too - but this wasn't getting picked up.

I was actually wondering why we have a shadcn config option anyway. Can't we just add this sort of information to components.json?

axekan commented 1 year ago

Duplicate of #214 ?

darbymanning commented 1 year ago

Sorry yes, will close - hadn't seen #214