[bug]: Components refer to wrong "utils.ts" file after "utils.ts" file renamed and moved to different folder [Remix]

[vanirvan]

Describe the bug

when adding a new components for example npx shadcn@latest add button. usually the components importing the generated "utils" file, however, i rename the file to "cn.ts" and move it from ~/lib/utils to ~/lib/utils/cn. I also change the generated components.json file and refer the moved utils file to correct path.

here's my components.json file:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/tailwind.css",
    "baseColor": "neutral",
    "cssVariables": false,
    "prefix": ""
  },
  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils/cn", // before was ~/lib/utils
    "ui": "~/components/ui",
    "lib": "~/lib",
    "hooks": "~/hooks"
  }
}

also my tsconfig.json file (i'm not changing anything):

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Vite takes care of building everything, not tsc.
    "noEmit": true
  }
}

I do the same thing when working with Nextjs project, and everything works fine, but in Remix, this happened.

Affected component/components

Probably all components, but i only try it on Button, Label, and Form

How to reproduce

1. install shadcn ui in Remix project and follow all instruction.
2. create new folder inside lib folder named utils
3. move utils.ts to inside utils folder
4. rename utils.ts into cn.ts
5. in components.json, replace "utils": "~/lib/utils", to "utils": "~/lib/utils/cn",
6. add components like usual, for example npx shadcn@latest add button
7. after component installed, open button.ts
8. see that the components have an error cannot find module ~/lib/utils

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Nothing relevant

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[imMatheus]

What exactly is going wrong? Is the CLI not picking up your new utils file path?

[denis-shvets]

@imMatheus I guess the button.ts still contains import { cn } from "~/lib/utils" instead of import { cn } from "~/lib/utils/cn".

[vanirvan]

What exactly is going wrong? Is the CLI not picking up your new utils file path?

Yes, sorry for not replying as soon as possible, the button component is importing the utils.ts file from ~/lib/utils not cn.ts file from ~lib/utils/cn.

Expected Output:

...

import { cn } from "~/lib/utils/cn";

// the rest of button component

Intead of :

...

import { cn } from "~/lib/utils";

// the rest of button component

[andrewbrey]

@vanirvan I am not a maintainer or contributor to this project, but I ran into this on my own project and did some investigation/testing and it seems as though the issue is that you're using something other than @ as the start of your path alias for the components key in your components.json. To confirm, temporarily change your components key to @/components and give a try to npx shadcn@latest add button (or any other component) and I suspect it will then respect your custom path alias to the utils. I'm fairly certain this is a bug in the new shadcn cli because trying with the old cli (aka npx [email protected] add button) seems to just take the value of the utils alias verbatim and doesn't try to do any calculation to determine the correct path to use for the utils file.

[shadcn]

I'll take a look.

[vanirvan]

@vanirvan I am not a maintainer or contributor to this project, but I ran into this on my own project and did some investigation/testing and it seems as though the issue is that you're using something other than @ as the start of your path alias for the components key in your components.json. To confirm, temporarily change your components key to @/components and give a try to npx shadcn@latest add button (or any other component) and I suspect it will then respect your custom path alias to the utils. I'm fairly certain this is a bug in the new shadcn cli because trying with the old cli (aka npx [email protected] add button) seems to just take the value of the utils alias verbatim and doesn't try to do any calculation to determine the correct path to use for the utils file.

@andrewbrey Hello sir, sorry for not replying as soon as possible, and seems like your advice is indeed works, i changed the path alias from ~/app into @/app and it works very well, thankyou, maybe the downside is i only need change the path alias. But i hope in the future, shadcn-ui team would fix this.

once again, thank you

[farwayer]

I encountered the same problem This worked before but it seems something was broken.

[mindofjonas]

Seeing this issue also. It likely may be due to this related bug: https://github.com/shadcn-ui/ui/issues/5433#issuecomment-2425131609

[tomas223]

I'm encountering same issue. lib or utils config aliases seems to be ignored.

[MoSattler]

Yes, same here

[RestfuI]

Hi everyone,

I’ve been testing this issue myself since I encountered it as well. With the current support for ShadCN in an NX monorepo, having to manually correct the imports for each component became unmanageable.

As @andrewbrey pointed out, older versions seem to work fine, but version 2.1.8 introduces the problem. I’ve reviewed recent versions to pinpoint where the functionality started breaking.

It appears that [email protected] works correctly and generates the appropriate imports. However, starting from 2.1.7, the behaviour changes unexpectedly: the @ namespace is ignored, and the imports default to @namespace/lib/utils, which is quite frustrating.

As a temporary workaround, you can downgrade the CLI to version 2.1.6, which resolves the issue for now.

For example:
CLI: npx [email protected] add button

Button.tsx (Correct):

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

// Correct  
import { cn } from "@example-mono/shadcn-ui/utils";  

//...  

CLI: npx [email protected] add button

Button.tsx (Incorrect):

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

// Incorrect  
import { cn } from "@example-mono/lib/utils";  

//...  

For reference, here are the relevant configurations:

components.json:

{  
  "$schema": "https://ui.shadcn.com/schema.json",  
  "style": "new-york",  
  "rsc": false,  
  "tsx": true,  
  "tailwind": {  
    "config": "apps/**/tailwind.config.ts",  
    "css": "apps/**/src/app/global.css",  
    "baseColor": "stone",  
    "cssVariables": false  
  },  
  "aliases": {  
    "components": "@example-mono/shadcn-ui/components",  
    "utils": "@example-mono/shadcn-ui/utils"  
  }  
}  

tsconfig.json:

{  
  "compilerOptions": {  
    "baseUrl": ".",  
    "paths": {  
      "@example-mono/shadcn-ui": ["libs/shadcn-ui/src/index.ts"],  
      "@example-mono/shadcn-ui/*": ["libs/shadcn-ui/src/*"]  
    }  
  }  
}  

I hope this helps others encountering the same issue. I’ll try to find some time to review the code and create a PR to address this.

[imCorfitz]

Not sure if this relates, but noticed that the utils path also is wrong when changing the @workspace name. If I spin up a new monorepo using pnpm dlx shadcn@canary init and choose Next.js (Monorepo) - then when I run an install of a component like: pnpm dlx shadcn@canary add dialog -c apps/web, it works perfectly fine, and imports cn correctly from import { cn } from "@workspace/ui/lib/utils".

However, if I replace every instance of @workspace with something else like @repo before running the add command, the import now omits the /ui from the path.

Mind you - the components.json files haven't changed aside from the @repo prefix:

// apps/web/components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "../../packages/ui/tailwind.config.ts",
    "css": "../../packages/ui/src/styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "hooks": "@/hooks",
    "lib": "@/lib",
    "utils": "@repo/ui/lib/utils",
    "ui": "@repo/ui/components"
  }
}

// ---

// packages/ui/components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@repo/ui/components",
    "utils": "@repo/ui/lib/utils",
    "hooks": "@repo/ui/hooks",
    "lib": "@repo/ui/lib",
    "ui": "@repo/ui/components"
  }
}

Even by changing the aliases.utils to something else like "utils": "Hello World!", it is ignored and remains import { cn } from "@repo/lib/utils". However - if the ui alias is different in apps/web/components.json (for example: "ui": "@foo/ui/components") the utils alias is preserved (despite of course, now the package is being created in a sub directory in the web directory).

[dnntung]

+1

Use the downgraded version (2.1.6) fixed my issue

[ScreamZ]

+1 @shadcn

[HarlonGarcia]

+1

[3pleFly]

+1

[maelp]

Same bug

[garretteklof]

Encountered this same issue. Switching to @ alias fixes it (as opposed to my app default ~)

Is the plan perchance still to address this @shadcn ? 🙏 🍒 🍰

[sakib412]

same issue, I configured this as :

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

in any component it imported from import { cn } from "~/lib/utils" instead it should imported from import { cn } from "@rd/shared"

[infectiousstupidity]

Been banging my head against this issue too. Just adding a / to the components alias fixes the utils import. Hope this gets fixed.

This creates "import { cn } from "@components/lib/utils"

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

This creates "import { cn } from "@utils/cn"

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