코딩라이브러리/Vue

vue 에서 Module not found: Error: Can't resolve 'axios' in 에러 원인

유니네 라이브러리 2025. 1. 5. 23:47

Vue.js 프로젝트에서 Module not found: Error: Can't resolve 'axios' 오류가 발생했다면,

이는 axios 모듈을 찾을 수 없다는 의미이다.

 

이 오류가 발생하는 주요 원인과 해결 방법을 단계별로 알아본다.

 

📌 1. 오류 원인 분석

 

이 오류는 보통 다음 3가지 이유로 발생한다.

 

1️⃣ axios가 설치되지 않은 경우

Vue 프로젝트에 axios 패키지가 설치되지 않았거나, package.json 파일에 포함되지 않은 경우.

 

2️⃣ 잘못된 설치 경로 문제

axios가 프로젝트의 올바른 디렉터리에 설치되지 않았을 수 있다.

프로젝트에서 패키지를 관리하는 node_modules 디렉터리의 구조가 깨졌을 수 있다.

 

3️⃣ 패키지 매니저(npm, yarn) 문제

npm 또는 yarn을 사용하는 과정에서 설치가 제대로 되지 않았거나, 캐시 충돌이 발생했을 수 있다.

예를 들어, package-lock.json 또는 yarn.lock 파일이 오래된 상태라면 충돌이 발생할 가능성이 있다.

 

🔧 2. 해결 방법

 

✔ 1. axios 설치 여부 확인

 

먼저 axios가 프로젝트에 설치되어 있는지 확인해야 한다.

프로젝트 폴더 내에서 package.json 파일을 열어 dependencies 목록을 확인한다.

 

✅ package.json에서 확인 방법

package.json

👀 위와 같이 axios가 포함되어 있다면, 패키지가 설치된 상태이다.

만약 이 목록에 axios가 없다면 다음 단계를 진행한다.

 

✔ 2. axios 설치 또는 재설치

 

axios가 설치되지 않았다면, 다음 명령어를 실행하여 설치할 수 있다.

 

✅ npm을 사용한 설치

npm install axios

 

✅ yarn을 사용한 설치

yarn add axios

 

💡 Tip:

설치 후에도 문제가 발생한다면 패키지를 삭제하고 다시 설치하는 방법도 고려한다.

npm uninstall axios
npm install axios

 

✔ 3. 패키지 캐시 문제 해결

 

가끔 npm의 캐시 문제가 패키지 설치 오류를 유발할 수 있습니다.

이 경우 캐시를 삭제한 후 다시 설치하면 해결될 수 있습니다.

 

✅ npm 캐시 정리 후 재설치

npm cache clean --force
npm install

 

이 과정을 거치면 npm 캐시가 초기화되고, 패키지를 다시 정상적으로 다운로드하게 된다.

 

✔ 4. axios를 올바르게 import했는지 확인

 

설치가 정상적으로 되었더라도, axios를 불러오는 코드가 잘못되었다면 오류가 발생할 수 있다.

 

✅ Vue 컴포넌트에서 axios import 예제

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('API 요청 실패:', error);
  });

 

위 코드에서 중요한 점:

import axios from 'axios'가 정확하게 입력되었는지 확인

axios.get()을 사용하여 API 요청이 정상적으로 작동하는지 테스트

 

💡 Tip:

간혹 Webpack 또는 Vite를 사용할 때 import axios가 문제를 일으킬 수도 있다.

이 경우 console.log(axios)를 실행하여 axios가 제대로 import되었는지 확인해 본다.

 

📌 3. 해결 과정 정리

문제 해결방법
axios가 설치되지 않음 npm install axios 또는 yarn add axios 실행
패키지 설치 경로 문제 npm cache clean --force 후 다시 설치
axios import 오류 import axios from 'axios' 코드 확인

 

🚀 위 방법을 적용하면 Vue에서 axios 관련 오류를 효과적으로 해결할 수 있다.

 

💡 결론

 

Module not found: Error: Can't resolve 'axios' 오류는 대부분 axios가 설치되지 않았거나, 패키지 관리 문제로 인해 발생한다.

 

해결 방법 정리:

1️⃣ package.json에서 axios가 설치되었는지 확인

2️⃣ npm install axios 또는 yarn add axios로 설치

3️⃣ npm cache clean --force 후 패키지 재설치

4️⃣ Vue 컴포넌트에서 import axios from 'axios'를 올바르게 작성

 

이제 위 과정을 차근차근 따라가면 오류 없이 Vue에서 axios를 사용할 수 있다! 🚀