Components added to wrong folder from CLI

jarrodwatts commented 1 year ago

I have the following components.json file:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

When I run shadcn-ui@latest add, it adds the file to a new directory: @/components/ui/ rather than my existing components/ui directory.

Expected location: C:\dev\project\components\ui\accordion.tsx Actual location: C:\dev\project\@\components\ui\accordion.tsx

shadcn commented 1 year ago

Hi @jarrodwatts what's in your tsconfig.json?

jarrodwatts commented 1 year ago

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/components/*": ["./components/*"],
      "@/lib/*": ["./lib/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

mohamedaleya commented 1 year ago

You should be able to edit that prefix in your components.json file which is spawned after initializing shadcn/ui (using next.js 13.4.2 here). For example mine is like this:

components.json

"aliases": {
    "components": "~/components",
    "utils": "~/lib/utils"
  }

tsconfig.json

    "paths": {
      "~/*": ["./src/*"]
    }

I made the same mistake you did and this is how I was able to change it to the correct path. Hope this helps!

dan5py commented 1 year ago

Hi @jarrodwatts, @mohamedaleya is right, you need to have this path in your tsconfig.json:

"paths": {
    "@/*": ["./*"]
}

b4lk0n commented 1 year ago

I'm facing similar issue. The components.json is:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "~/ui",
    "utils": "~/utils"
  }
}

and tsconfig.json is:

{
  "baseUrl": ".",
  "paths": {
    "~/*": ["./src/*"]
  }
}

I expect the Button component to be added to src/ui/button.tsx. However, when I use pnpm dlx shadcn-ui add button, it creates an additional folder and places the component in src/ui/ui/button.tsx.

Is there a configuration that I might be missing?

UPD I tried using the --cwd and --path options, but they didn't have any effect. When I ran the command pnpm dlx shadcn-ui add button --cwd=. --path=src, the component was still created in src/ui/ui/button.tsx

jarrodwatts commented 1 year ago

The default behavior still seems incorrect to me.

The CLI add command out of the box adds components to a root @ folder which is not where it is expected to go

paralin commented 1 year ago

tsconfig.json:

{
  "paths": {"@ui/": ["web/ui/*"]}
}

components.json:

{
  "aliases": {"components": "@ui/*"}
}

But the add command adds to web/ui/ui/ instead of web/ui - what am I doing wrong?

stramel commented 1 year ago

I ran into this as well. I didn't have my tsconfig.json configured for paths or baseUrl yet. Would this be something that could be covered by the CLI if not present?

sitek94 commented 11 months ago

Here's what works for me:

// tsconfig.json
"baseUrl": ".",
"paths": {
  "~": ["./app"],
  "~/*": ["./app/*"]
}

// components.json
"aliases": {
  "components": "~",
  "utils": "~/lib/utils"
}

akaRicane commented 8 months ago

If someone finds this useful, here is what works for me: add -p to add the location path for the component. For example, I use pnpm and the location I want within my project is ./inertia/components/ui

pnpm dlx shadcn-ui@latest add carousel -p ./inertia/components/ui

Here is my components.json

  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "./inertia/css/app.css",
    "baseColor": "slate",
    "cssVariables": false,
    "prefix": ""
  },
  "aliases": {
    "components": "#shadcn",
    "ui": "#shadcn",
    "utils": "#shadcn/utils"
  }
}

and my tsconfig.json

{
  "extends": "@adonisjs/tsconfig/tsconfig.app.json",
  "compilerOptions": {
    "rootDir": "./",
    "outDir": "./build",
    "paths": {
      "#controllers/*": ["./app/controllers/*.js"],
      "#exceptions/*": ["./app/exceptions/*.js"],
      "#models/*": ["./app/models/*.js"],
      "#mails/*": ["./app/mails/*.js"],
      "#services/*": ["./app/services/*.js"],
      "#listeners/*": ["./app/listeners/*.js"],
      "#events/*": ["./app/events/*.js"],
      "#middleware/*": ["./app/middleware/*.js"],
      "#validators/*": ["./app/validators/*.js"],
      "#providers/*": ["./providers/*.js"],
      "#policies/*": ["./app/policies/*.js"],
      "#abilities/*": ["./app/abilities/*.js"],
      "#database/*": ["./database/*.js"],
      "#tests/*": ["./tests/*.js"],
      "#start/*": ["./start/*.js"],
      "#config/*": ["./config/*.js"],
      "#shadcn/*": ["./inertia/components/ui/*"],
    }
  },
  "exclude": ["./inertia/**/*"]
}

I personally like the #shadcn (or @shadcn) alias for my projects, as well as keeping the dedicated utils.tswithin the components/uifolder.

I link a project with AdonisJS + Inertia if you want the real implementation. It works like a charm. https://github.com/akaRicane/ricane.art.adonis Cheers

jcchrrr commented 6 months ago

Guys, are you sure you put paths inside compilerOptions in tsconfig.json?

If paths sits outside, it does nothing.

https://github.com/shadcn-ui/ui/issues/2068#issuecomment-1913611737

NatanCieplinski commented 5 months ago

tsconfig.json:
{
  "paths": {"@ui/": ["web/ui/*"]}
}
components.json:
{
  "aliases": {"components": "@ui/*"}
}
But the add command adds to web/ui/ui/ instead of web/ui - what am I doing wrong?

The alias property in components.json has another property for that, ui. So your components.json should be:

{
  "aliases": {
    "components": "@ui/*",
    "ui": "@ui/*",
   }
}

NatanCieplinski commented 5 months ago

If anyone is having the same error and forgot to correctly set the tsconfig path alias, don't forget to rerun npx shadcn-ui@latest init after fixing the alias, as suggested by this comment

HamedMP commented 5 months ago

i think we can close this now

LTOpen commented 4 months ago

I have the same issue. tsconfig.app.json

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },

components.json

  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

When I run npx shadcn-ui@latest add badge, it just add the badge outside the src folder. It creates a new "@" folder, and put the badge inside of "@/components/ui"

hunterwei commented 4 months ago

Same here.

I added "baseUrl" and "paths" into tsconfig.app.json, it fixed the import using @ alias in the .tsx issue. But seems like the shadcn-ui cli doesn't care about the "compilerOptions" in tsconfig.app.json, it only cares about "compilerOptions" in tsconfig.app.

Being said, if you add "compilerOptions" section with "baseUrl" and "paths" into tsconfig.json as well, the shadcn cli can pickup the settings and add components to the correct folder in "src".

It makes me believe this issue might be a bug in the cli.

I have the same issue. tsconfig.app.json
{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
components.json
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}
When I run npx shadcn-ui@latest add badge, it just add the badge outside the src folder. It creates a new "@" folder, and put the badge inside of "@/components/ui"

Murad71 commented 4 months ago

I faced a similar problem. Now coming to the fix.

Copy everything from tsconfic.app.json to tsconfig.json (erase whatever tsconfig.json had previously)
Delete tsconfig.app.json and tsconfig.node.json.
Only after that should you run the command : 'npm i -D @types/node' as usual.

You have to follow the order. Or else it won't work. Unfortunately, Shadcn does not recognise the tsconfig.app.json file which is the root cause of all the issues. Hopefully, they fix it.

shadcn commented 4 months ago

shadcn does not recognise the tsconfig.app.json

Interesting. Which framework uses tsconfig.app.json as default? I'll try and reproduce this.

Murad71 commented 4 months ago

Vite

On Thu, Jul 11, 2024, 10:23 PM shadcn @.***> wrote:

shadcn does not recognise the tsconfig.app.json

Interesting. Which framework uses tsconfig.app.json as default? I'll try and reproduce this.

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/1092#issuecomment-2223359592, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJRYAWKCEEHIEDSHZRI4DZTZL2WOTAVCNFSM6AAAAAA27SGBCKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRTGM2TSNJZGI . You are receiving this because you commented.Message ID: @.***>

Murad71 commented 4 months ago

Thanks for the prompt response btw.

On Thu, Jul 11, 2024, 10:27 PM Muradul Arefin Rahat @.***> wrote:

Vite

On Thu, Jul 11, 2024, 10:23 PM shadcn @.***> wrote:

shadcn does not recognise the tsconfig.app.json

Interesting. Which framework uses tsconfig.app.json as default? I'll try and reproduce this.

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/1092#issuecomment-2223359592, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJRYAWKCEEHIEDSHZRI4DZTZL2WOTAVCNFSM6AAAAAA27SGBCKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRTGM2TSNJZGI . You are receiving this because you commented.Message ID: @.***>

EthanRBrown commented 4 months ago

For me, this was a Vite-specific problem, having to do with the way Vite organizes and separates out web (app) and devtool (node) tsconfig files, as @Murad71 pointed out.

While I'm sure @Murad71's solution works (I haven't tried it), I fear it might interfere with Vite functioning correctly...after all, Vite does it that way for a reason (not saying I know what that reason is, exactly, but everything in Vite seems to be very intentional).

Here's what works for me without changing the way Vite splits the tsconfig files:

In both tsconfig.json and tsconfig.app.json, add the baseUrl and paths properties (in compilerOptions), however you would like them configured.

It feels like a slightly hacky solution...would prefer to put it in one place. But this makes everything work (resolution in VSCode, building, and running in dev mode, and using shadcn/ui to add components puts them where they should be).

RickaPrincy commented 4 months ago

Same issue (on Vite), so I just added the alias in tsconfig.json (not only inside tsconfig.app.json)

nickosmas commented 4 months ago

I had this issue for two days. The only fix you need is to follow step 3 from shadcn installation documentation exactly as stated:

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }

jostaylor7 commented 4 months ago

I am using .js and .ts so I needed to update the paths in both tsconfig and jsconfig to be //components.json "aliases": { "components": "@/components/ui", "utils": "@/lib/utils" }

// tsconfig.json

"paths": { "@/": ["./src/"] },

I have a file directory of src/components/ui/
When I add components vis CLI it now installs them at src/components/ui/ui
Because this pathway is not correct I am concerned that my lib/utils.tsx is not correctly being updated.

Inside of the chart.tsx I have the an error on the following lines of code: 

className={cn(
                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                        {

/ The error starts here "h-2.5 w-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", "my-0.5": nestLabel && indicator === "dashed", The error ends here/ } )}

shadcn commented 3 months ago

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

Mnigos commented 1 month ago

The issue is still relevant for me.

  "aliases": {
    "components": "@repo/ui/components",
    "ui": "@repo/ui/components",
    "utils": "@repo/ui/utils",
    "hooks": "@repo/ui/hooks"
  }

  {
  "extends": "@repo/typescript-config/react-library.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@repo/ui/*": ["./src/*"]
    },
    "types": ["vitest/globals", "@testing-library/jest-dom"]
  },
  "include": [    
    "**/*.ts",
    "**/*.tsx",
  ],
  "exclude": ["node_modules"]
}

and components are generated inside /ui/components/ui instead of /ui/components

shadcn-ui / ui

Components added to wrong folder from CLI #1092