alias replacement doesn't work properly

[davestewart]

Overview

I've been running tests in a throwaway project to see if I can understand the alias config, and from what I can tell, it's half-broken / doesn't work correctly.

How I understand how it works:

• you set up the alias config
  • keys represent types of import
  • values hold relative paths or (existing) tsconfig aliases
• when you add components using the dlx ... add command:
  • the CLI maps the new file paths / imports against this configuration:
    • files are saved to the configured folders
    • default import paths are replaced with configured paths
    • tsconfig.ts's compilerOptions.paths are used if set

For reference, the default config is:

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

For initial testing, I set the aliases to:

  "aliases": {
    "components": "TEST/COMPONENTS",
    "utils": "TEST/UTILS",
    "ui": "TEST/UI",
    "lib": "TEST/LIB",
    "hooks": "TEST/HOOKS"
  },

Import mapping

Issue 1 – <lib>/utils is hardcoded

Running this command...

npx shadcn@latest add sidebar-07

... created the following:

✔ Checking registry.
✔ Updating app/globals.css
✔ Installing dependencies.
✔ The file page.tsx already exists. Would you like to overwrite? … yes
✔ Created 17 files:
  - TEST/COMPONENTS/app-sidebar.tsx
  - TEST/COMPONENTS/nav-main.tsx
  - TEST/COMPONENTS/nav-projects.tsx
  - TEST/COMPONENTS/nav-user.tsx
  - TEST/COMPONENTS/team-switcher.tsx
  - TEST/UI/sidebar.tsx
  - TEST/UI/button.tsx
  - TEST/UI/separator.tsx
  - TEST/UI/sheet.tsx
  - TEST/UI/tooltip.tsx
  - TEST/UI/input.tsx
  - TEST/HOOKS/use-mobile.ts
  - TEST/UI/skeleton.tsx
  - TEST/UI/breadcrumb.tsx
  - TEST/UI/collapsible.tsx
  - TEST/UI/dropdown-menu.tsx
  - TEST/UI/avatar.tsx
ℹ Updated 1 file:
  - app/dashboard/page.tsx

Checking the new sidebar.tsx file, we see the imports:

import { useIsMobile } from "TEST/HOOKS/use-mobile"
import { cn } from "TEST/LIB/utils"              // <-- `utils` file
import { Button } from "TEST/UI/button"
import { Input } from "TEST/UI/input"
import { Separator } from "TEST/UI/separator"
...

Note the utils file above. The replacement is hard-coded, so I have to have a utils.ts file.

What if I want the Shad Cn functions elsewhere, such as utils/ui.ts ?

Also, there seems to be some ambiguity between utils and lib:

aliases.utils
Import alias for your utility functions.

aliases.lib
Import alias for lib functions such as format-date or generate-id.

FWIW, I couldn't find a reference to the utils alias anywhere in the code.

Is there a reason we can't do something like this?

alias: {
  utils: 'path/to/the/actual/file'
}

tsconfig.json alias remapping

Issue 2

Next, I wanted to check Shad Cn's remapping of tsconfig.json's compilerOptions.paths to point at the true target folders:

// components.json
"aliases": {
  "components": "@COMPONENTS",
  "utils": "@UTILS",
  "ui": "@UI",
  "lib": "@LIB",
  "hooks": "@HOOKS"
},

// tsconfig.json
"paths": {
  "@/*": ["./*"],
  "@COMPONENTS/*": ["./TEST/components/*"],
  "@COMPONENTS": ["./TEST/components"],
  "@UI/*": ["./TEST/components/ui/*"],
  "@UI": ["./TEST/components/ui"],
  "@UTILS/*": ["./TEST/utils/*"],
  "@UTILS": ["./TEST/utils"],
  "@LIB/*": ["./TEST/lib/*"],
  "@LIB": ["./TEST/lib"],
  "@HOOKS/*": ["./TEST/hooks/*"],
  "@HOOKS": ["./TEST/hooks"],
}

Seems OK on first go:

+- server
   +- TEST
      +- components
         +- ui
            +- avatar.tsx
            +- breadcrumb.tsx
            +- button.tsx
            +- collapsible.tsx
            +- dropdown-menu.tsx
            +- input.tsx
            +- separator.tsx
            +- sheet.tsx
            +- sidebar.tsx
            +- skeleton.tsx
            +- tooltip.tsx
         +- app-sidebar.tsx
         +- nav-main.tsx
         +- nav-projects.tsx
         +- nav-user.tsx
         +- team-switcher.tsx
      +- hooks
         +- use-mobile.ts

But the utils path is now wrong:

import { cn } from "@COMPONENTS/lib/utils"

I suspect at least some of the logic here is wrong?

• https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/src/utils/transformers/transform-import.ts#L43-L96

Issue 3

Next, I wanted to see if we could put block-level components in their own subfolder:

// components.json
"aliases": {
  "components": "@BLOCKS",
  "utils": "@UTILS",
  "ui": "@UI",
  "lib": "@LIB",
  "hooks": "@HOOKS"
},

// tsconfig.json
"paths": {
  "@/*": ["./*"],
  "@BLOCKS/*": ["./TEST/components/blocks/*"],
  "@BLOCKS": ["./TEST/components/blocks"],
  "@UI/*": ["./TEST/components/ui/*"],
  "@UI": ["./TEST/components/ui"],
  "@UTILS/*": ["./TEST/utils/*"],
  "@UTILS": ["./TEST/utils"],
  "@LIB/*": ["./TEST/lib/*"],
  "@LIB": ["./TEST/lib"],
  "@HOOKS/*": ["./TEST/hooks/*"],
  "@HOOKS": ["./TEST/hooks"],
}

Now we get a extra sidebar-07/components path segments:

+- server
   +- TEST
      +- components
         +- blocks
            +- sidebar-07
               +- components
                  +- app-sidebar.tsx
                  +- nav-main.tsx
                  +- nav-projects.tsx
                  +- nav-user.tsx
                  +- team-switcher.tsx
         +- ui
            +- avatar.tsx
            +- breadcrumb.tsx
            +- button.tsx
            +- collapsible.tsx
            +- dropdown-menu.tsx
            +- input.tsx
            +- separator.tsx
            +- sheet.tsx
            +- sidebar.tsx
            +- skeleton.tsx
            +- tooltip.tsx
      +- hooks
         +- use-mobile.ts

I'm not sure where these additional path segments came from; doing a quick search in the codebase may provide some clues:

• https://github.com/search?q=repo%3Ashadcn-ui%2Fui%20sidebar-07&type=code

Conclusion

So, all in all, the remapping seems pretty broken indeed.

It seems some of the decisions made in transform-import.ts are potentially either too opinionated or don't consider some use cases. My initial feeling is it's too complicated; too much switching logic; surely this should be simpler.

I'm happy to take a look at this; what's the best way to start running the code locally?

Also, I see some talk of subpath imports which I don't know anything about; is this related?

[davestewart]

Right now I can think of three ways (in order of simplicity) to solve this:

1. tsconfig alias on @/lib/utils

If one simply accepts erroneous paths, one could (in theory) just remap:

{
  "paths": [
    "@/lib/utils": "./utils/ui.ts"
  ]
}

2. Node script

A simple Node script could:

• run the install for me
• scan the loaded files and just do a find and replace
• correct any erroneous folder paths should there be any

3. PR

If I / anyone had some time, we could jump in and fix the logic

[davestewart]

Oh no... it gets worse!

Looking at the registry sidebar code:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/registry/default/hooks/use-mobile"
import { cn } from "@/registry/default/lib/utils"
import { Button } from "@/registry/default/ui/button"
import { Input } from "@/registry/default/ui/input"
import { Separator } from "@/registry/default/ui/separator"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/registry/default/ui/sheet"
import { Skeleton } from "@/registry/default/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/registry/default/ui/tooltip"

Now look at the sidebar code in the docs (which I presume has been transformed):

"use client"
 
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"
 
import { useIsMobile } from "@/components/hooks/use-mobile"
import { cn } from "@/components/lib/utils" //              <-- !!!!!!
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

The { cn } import should not be from @/components/lib/utils but from @/lib/utils 🤦 .

[gokaygurcan]

Have you tried these changes mentioned here: #6530 ?

[davestewart]

It looks like that would have already been merged by the time I was testing this.

But I'll try and take a look this weekend if I get time for OSS!