Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
vanirvan opened this issue Sep 10, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@vanirvan
Copy link

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

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@vanirvan vanirvan added the bug Something isn't working label Sep 10, 2024
@imMatheus
Copy link

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

@denis-shvets
Copy link

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

@vanirvan
Copy link
Author

vanirvan commented Sep 17, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants