[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 shadcn-ui@0.8.0 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 shadcn-ui@0.8.0 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.