Next.js 프로젝트에서 '@/components/ui/tabs' 모듈을 찾을 수 없는 오류 해결 방법

Front-End/Next.js

봉의일상 2025. 5. 7. 17:45

Next.js로 프로젝트를 개발하다 보면 아래와 같은 오류를 만날 수 있습니다:

Module not found: Can't resolve '@/components/ui/tabs'

이 오류는 프로젝트가 @/components/ui/tabs 경로에 해당하는 파일이나 모듈을 찾을 수 없을 때 발생합니다. 이번 글에서는 이 문제를 해결하는 방법을 단계적으로 정리해보겠습니다.

1. 경로에 파일이 실제로 존재하는지 확인

가장 먼저 확인할 것은 tabs.tsx 파일이 실제로 존재하는지 여부입니다.

경로 예시:

src/
└── components/
    └── ui/
        └── tabs.tsx

혹은 tabs/index.tsx 형식으로 되어 있을 수도 있습니다. 파일이 존재하지 않으면 직접 생성하거나, 다음 단계로 넘어가세요.

2. @ alias가 작동하도록 설정되었는지 확인 (tsconfig.json)

@를 사용하는 경우, 해당 경로를 tsconfig.json 또는 jsconfig.json에서 설정해야 합니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

이 설정이 없다면 @/components/...는 정상적으로 인식되지 않습니다. 설정을 저장한 후, 에디터와 서버를 재시작해야 적용됩니다.

3. Shadcn UI를 사용하는 경우

shadcn/ui 컴포넌트 라이브러리를 사용하는 프로젝트라면, 해당 컴포넌트를 명령어로 추가해야 합니다.

npx shadcn-ui@latest add tabs

위 명령어를 실행하면 components/ui/tabs.tsx가 생성되어 오류가 해결됩니다.

4. 캐시 삭제 후 재빌드

가끔 Next.js의 캐시로 인해 오류가 지속되는 경우가 있습니다. 다음 명령어로 .next 캐시 폴더를 삭제하고 다시 실행해보세요.

rm -rf .next
npm run dev

5. 기타 체크리스트