shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
69.88k stars 4.18k forks source link

[bug]: CLI errors when using relative path as util alias #3854

Open ImPrankster opened 3 months ago

ImPrankster commented 3 months ago

Describe the bug

When using relative path as the alias for util import (I'm using a monorepo, the cn function is under /src on the same level with other components, using absolute/aliased import will cause apps to not be able to resolve cn, so I tried to use import { cn } from ".", which works fine for using components) ,but the CLI outputs error:

[
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "resolvedPaths",
      "utils"
    ],
    "message": "Required"
  }
]

Seems to be caused by the CLI not be able to resolve the path from "." with tsconfig

Possible fix: adding a option in CLI to opt out of trying to resolve the path

Affected component/components

CLI

How to reproduce

Edit the component.json > aliases > utils to "." Try shadcn-ui add

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

on latest shadcn-ui CLI version

Before submitting

Antonytm commented 2 months ago

I have the same issue

mishelen commented 2 months ago

definitely, there should be clear way described in the docs for projects without aliases

nikachello commented 2 months ago

i am already tired with installing this shadcn, documentation is not working for vite/react/ts. does someone have way to teach how can i do it?

PradalCyril commented 2 months ago

i am already tired with installing this shadcn, documentation is not working for vite/react/ts. does someone have way to teach how can i do it?

Hello, I experiment this issue.. and i resolved it with the components.json file and tsconfig. (I'm using vite without path alias... )

I try to put "./" in aliases field and bim! error : "aliases": { "components": "./lib/components", "utils": "./lib/utils" }

I replace './' to : "aliases": { "components": "@/components", "utils": "@/utils" }

and add this in tsconfig:

"baseUrl": ".", "paths": { "@/*": ["lib/*"] }

And Done 🟢

My components.json :

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