[개인 프로젝트 VSCode] Ant Design 적용 중 'Module not found: Error: Can't resolve 'antd/dist/antd.css' 오류 해결 과정

기존에는 주로 Material Design(MUI)을 사용했지만, 이번 개인 프로젝트에서 Ant Design을 사용해보려 한다.
프로젝트에서 Carousel 컴포넌트를 활용할 계획인데, Ant Design은 다양한 컴포넌트를 제공하고 기능이 잘 구성되어 있어 이번에 사용하게 되었다. 그런데 설치하던 중 오류가 나서 오류를 해결하는 과정도 같이 적어보았다.
[Ant Design 공식 사이트] https://ant.design/components/overview

1.  Ant Design 설치

// npm 사용하는 경우
npm install antd

// yarn 사용하는 경우
yarn add antd

2.  Ant Design CSS 파일 추가

// index.js 또는 App.js 파일에 import 해주어야한다.
import 'antd/dist/antd.css';

3.  Ant Design 컴포넌트 사용

import React from 'react';
import { Button } from 'antd';

const App = () => {
  return (
    <div>
      <Button type="primary">안녕하세요, Ant Design!</Button>
    </div>
  );
};

export default App;

 

설치 후 antd.css 파일을 import 하니까 오류가 났다.

※ 오류 내용 
Module not found: Error: Can't resolve 'antd/dist/antd.css' 
※ 오류 원인 
 Ant Design의 CSS 파일이 올바른 경로에 없거나 설치되지 않았을 때 나타나는 오류이다.

---

오류 해결 과정 

1.  Ant Design 설치 확인

# 설치 확인
// npm 사용하는 경우
npm list antd

// yarn 사용하는 경우
yarn list antd

# 만약 설치되어 있지 않다면, 아래 명령어 입력
// npm 사용하는 경우
npm install antd

// yarn 사용하는 경우
yarn add antd

2. CSS 파일 경로 확인 

import에 오타가 없는지, import 한 경로에 antd.css 파일이 있는지 확인해 준다.

* antd.css 파일이 해당 경로에 있는지는 꼭 확인해주어야 한다. 이 부분을 확인 안 해서 조금 헤매었다..

// index.js 또는 App.js 파일에 import
import 'antd/dist/antd.css';

3. Node Modules 재설치 & 기존 패키지 삭제 및 재설치 

# Node Modules 삭제
rm -rf node_modules

# npm을 사용하는 경우
// 기존 패키지 삭제
rm package-lock.json
// 다시 설치
npm install

# yarn을 사용하는 경우
// 기존 패키지 삭제
rm yarn.lock
// 다시 설치
yarn install

4.  node 버전  변경

• 현재 사용하던 node버전은 v16.20.2인데  npm의 버전과 호환되지 않는다고 해서 버전을 20으로 올려주었다.
• npm은 ^18.17.0 || >=20.5.0 버전을 지원하기 때문에, Node.js의 버전이 낮으면 npm 사용 시 여러 가지 문제가 발생할 수 있다고 한다.

// node 버전 20으로 update
nvm use 20

5. 다시 Ant Design 설치 확인

# 설치 확인
// npm 사용하는 경우
npm list antd

// yarn 사용하는 경우
yarn list antd

# 만약 설치되어 있지 않다면, 아래 명령어 입력
// npm 사용하는 경우
npm install antd

// yarn 사용하는 경우
yarn add antd

6. yarn 캐시 지우기

yarn cache clean

7. 패키지 디렉토리 확인 

• 터미널에 아래의 명령어를 입력해 node_modules 디렉토리 내에 antd.css 파일이 있는지 확인해 주었다.
  * 패키지 디렉토리 안에 antd.css 또는 antd.min.css 파일이 존재해야 한다.
• 하지만 난 antd.css가 없었다. reset.css만 있었다.. 😱

// 패키지디렉토리 확인
ls node_modules/antd/dist

※ reset.css 파일 이란? 

• reset.css는 웹 페이지의 기본 스타일을 초기화하거나 리셋하는 데 사용되는 CSS 파일이라고 한다. 그래서 기본 HTML 요소의 스타일은 리셋되지만, Ant Design 컴포넌트는 적용되지 않는다.
• reset.css가 포함되어 있으면 antd.css, antd.min.css 파일은 없나 보다..

# antd.css가 없다.
ls node_modules/antd/dist

antd-with-locales.js                    antd.js.map
antd-with-locales.js.map                antd.min.js
antd-with-locales.min.js                antd.min.js.LICENSE.txt
antd-with-locales.min.js.LICENSE.txt    antd.min.js.map
antd-with-locales.min.js.map            reset.css  
antd.js

# 원래 이렇게 나와야한다.(antd.min.css, antd.css 있음)
ls node_modules/antd/dist

antd-with-locales.js            antd.js.map
antd-with-locales.js.map        antd.less
antd-with-locales.min.js        antd.min.css     <- 여기
antd-with-locales.min.js.map    antd.min.css.map
antd.compact.css                antd.min.js
antd.compact.css.map            antd.min.js.map
antd.compact.less               antd.variable.css
antd.compact.min.css            antd.variable.css.map
antd.compact.min.css.map        antd.variable.less
antd.css  <- 여기                antd.variable.min.css
antd.css.map                    antd.variable.min.css.map
antd.dark.css                   compact-theme.js
antd.dark.css.map               dark-theme.js
antd.dark.less                  default-theme.js
antd.dark.min.css               theme.js
antd.dark.min.css.map           variable-theme.js
antd.js

8. CSS Import 수정 (antd.min.css, reset.css)

• antd.css 대신 antd.min.css 파일로 수정해 보았는데 여전히 오류가 났다.
• reset.css로 수정하니 오류는 나지 않았는데, 이러면 Ant Design 컴포넌트를 사용하지 못한다... 

// App.js 또는 index.js 파일
import "antd/dist/antd.min.css"; // 기본 스타일의 압축 버전
import 'antd/dist/reset.css'; // Reset 스타일

---

reset.css로 오류가 안 나는 건 의미가 없다. Ant Design 컴포넌트를 사용하려는 건데..

어떻게든 방법을 찾아보겠다는 마음으로 다시 좀 더 찾아보았다. 

---

9. 패키지 재설치

rm -rf node_modules
rm yarn.lock
yarn instal

10. 모든 패키지 업그레이드

yarn upgrade

---

11. 드디어 해결 

해결 한 방법 (antd 버전 변경)

• antd 버전이 5 버전이었는데 4 버전대로 다운그레이드하니 해결되었다.
• 기존에 있던 패키지를 제거하고 4 버전대로 설치해 주었다.

[참고한 글] : https://www.inflearn.com/community/questions/696763/can-x27-t-resolve-x27-antd-dist-antd-css-x27-오류-발생?srsltid=AfmBOopzLj6LksB5RWaQ36GRtOy5LvFpVnojRKuIFWm8tdxgdrBz55yl 

# 기존의 Ant Design 패키지 제거
// npm을 사용하는 경우
npm uninstall antd 

// yarn 사용하는 경우
yarn remove antd

# 특정 버전 설치
// npm 사용하는 경우
npm install antd@^4.24.0 

// yarn 사용하는 경우
yarn add antd@^4.24.0

새로 설치 후 CSS Import, 패키지 디렉토리 확인 

4 버전대로 다운그레이드하니 antd.css import에도 오류가 나지 않고 패키지 디렉토리에도 antd.css 파일이 생겼다. 

// App.js 또는 index.js 파일에 import
import 'antd/dist/antd.css'; 

// 터미널에 입력해 패키지 확인
ls node_modules/antd/dist

antd-with-locales.js            antd.js.map
antd-with-locales.js.map        antd.less
antd-with-locales.min.js        antd.min.css   <- 여기
antd-with-locales.min.js.map    antd.min.css.map
antd.compact.css                antd.min.js
antd.compact.css.map            antd.min.js.map
antd.compact.less               antd.variable.css
antd.compact.min.css            antd.variable.css.map
antd.compact.min.css.map        antd.variable.less
antd.css       <- 여기           antd.variable.min.css
antd.css.map                    antd.variable.min.css.map
antd.dark.css                   compact-theme.js
antd.dark.css.map               dark-theme.js
antd.dark.less                  default-theme.js
antd.dark.min.css               theme.js
antd.dark.min.css.map           variable-theme.js
antd.js

---

Ant Design   CSS 파일들 

// 지금 당장은 antd.css 외에는 사용하지않는데 찾다보니 이런게 있구나 알게 되어서 적어두었다.
import 'antd/dist/antd.css'; // 기본 Ant Design 스타일
import 'antd/dist/antd.min.css'; // 기본 스타일의 압축 버전
import 'antd/dist/antd.dark.css'; // 어두운 테마 스타일
import 'antd/dist/antd.compact.css'; // 컴팩트 스타일