alias
replacement doesn't work properly
#6834
Replies: 3 comments 1 reply
-
Right now I can think of three ways (in order of simplicity) to solve this: 1.
|
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
Have you tried these changes mentioned here: #6530 ? |
Beta Was this translation helpful? Give feedback.
-
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:
alias
configdlx ... add
command:tsconfig.ts
'scompilerOptions.paths
are used if setFor reference, the default config is:
For initial testing, I set the aliases to:
Import mapping
Issue 1 –
<lib>/utils
is hardcodedRunning this command...
... 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:Note the
utils
file above. The replacement is hard-coded, so I have to have autils.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
andlib
:Is there a reason we can't do something like this?
tsconfig.json
alias remappingIssue 2
Next, I wanted to check Shad Cn's remapping of
tsconfig.json
'scompilerOptions.paths
to point at the true target folders:Seems OK on first go:
But the utils path is now wrong:
I suspect at least some of the logic here is wrong?
Issue 3
Next, I wanted to see if we could put block-level components in their own subfolder:
Now we get a extra
sidebar-07/components
path segments:I'm not sure where these additional path segments came from; doing a quick search in the codebase may provide some clues:
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?
Beta Was this translation helpful? Give feedback.
All reactions