UI that imports other UI in package causes causes error I found a solution

[bernardstein]

so if you use a component like toast or form that imports another ui element it cant find it when building change the @ui/: [./src/] to @repo/ui/: [./src/]

[bernardstein]

also change the import alias to "aliases": { "components": "@repo/ui/components", "utils": "@repo/ui/lib/utils" }

[bernardstein]

that way when adding a component like form or toast it creates the import like import { Label } from "@repo/ui/components/ui/label"; and import { cn } from "@repo/ui/lib/utils";

[bernardstein]

in the ui's package.json my exports are: "exports": { "./components/": [ "./src/components/.ts", "./src/components/.tsx" ], "./lib/": "./src/lib/*.ts", "./globals.css": "./src/globals.css", "./tailwind.config": "./tailwind.config.ts", "./postcss.config": "./postcss.config.js" } }

[fkysly]

packages/ui/src/components/ui/*:

• replace @ui/components/ui to ../ui
• replace @ui/lib to ../../lib

packages/ui/component.json:

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

[dan5py]

@fkysly that would be good but it doesn't work. The CLI requires valid ts aliases and absolute/relative paths throw an error.

[dan5py]

Should work fine now, thanks @bernardstein