Module not found: Can't resolve '@/lib/utils'

[SureshPradhana]

Description:

When running npm run dev on /frontend directory, I encountered the following error:

Module not found: Can't resolve '@/lib/utils'

Steps to Reproduce:

1. Clone the repository and navigate to frontend.
2. Run npm install.
3. Run npm run dev.

Expected Behavior:

The project should start without errors.

Actual Behavior:

The compilation fails with the above error.

Environment:

• Next.js version: 14.2.3
• Node.js version: 20.12.2
• OS: Arch linux

Additional Details:

❯ npm run dev

> frontend@0.1.0 dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.9s
 ○ Compiling / ...
request to https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2 failed, reason:

Retrying 1/3...
 ⨯ ./src/components/ui/button.tsx:5:1
Module not found: Can't resolve '@/lib/utils'
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 |
> 5 | import { cn } from "@/lib/utils"
    | ^
  6 |
  7 | const buttonVariants = cva(
  8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/JoinCommunity/Join.tsx
./src/app/page.tsx
 ⨯ ./src/components/ui/button.tsx:5:1
Module not found: Can't resolve '@/lib/utils'
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 |
> 5 | import { cn } from "@/lib/utils"
    | ^
  6 |
  7 | const buttonVariants = cva(
  8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/JoinCommunity/Join.tsx
./src/app/page.tsx
 ⨯ ./src/components/ui/button.tsx:5:1
Module not found: Can't resolve '@/lib/utils'
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 |
> 5 | import { cn } from "@/lib/utils"
    | ^
  6 |
  7 | const buttonVariants = cva(
  8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/JoinCommunity/Join.tsx
./src/app/page.tsx
 GET / 500 in 15355ms

• It seems @/lib/utils is missing or incorrectly referenced. This may also be an alias reference issue.

[SureshPradhana]

Running npx shadcn-ui@latest init adds Shadcn's lib/utils. Is this intentional in this project?

[DevilsAutumn]

Running npx shadcn-ui@latest init adds Shadcn's lib/utils. Is this intentional in this project?

Yes this is intentional. shadcn is being used , so we need to import lib/utils.

[SureshPradhana]

Running npx shadcn-ui@latest init needs to be done once, and we can commit it thereafter. This way, we won't need to repeat this step each time the project is cloned.

[DevilsAutumn]

Feel free to create a PR if you have a solution. I'd be happy to review.