vue-loader-v15 Not Found 문제 해결

문제

vue-loader-v15 Not Found 오류가 출력되며 npm install, npm build 오류로 vue 프로젝트가 실행되지 않는 문제가 발생했습니다.

 

 

오류명

npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN old lockfile HttpErrorGeneral: 404 Not Found - GET https://registry.npmjs.org/@vue%2fvue-loader-v15 - Not found
npm WARN old lockfile     'x-fetch-attempts': [ '1' ],
npm WARN old lockfile     'x-local-cache-status': [ 'skip' ]
npm WARN old lockfile   },
npm WARN old lockfile   statusCode: 404,
npm WARN old lockfile   code: 'E404',
npm WARN old lockfile   method: 'GET',
npm WARN old lockfile   uri: 'https://registry.npmjs.org/@vue%2fvue-loader-v15',
npm WARN old lockfile   body: { error: 'Not found' },
npm WARN old lockfile   pkgid: '@vue/vue-loader-v15@15.10.0'
npm WARN old lockfile }

 

 

원인

vue-loader-v15 ^15.9.7 버전이 문제가 발생하여 registry에서 제거되었기 때문에 not found가 발생하였습니다.

 

 

환경

• Node: v18.13.0
• Vue: v3
• Vue-CLI: v5.0.8

 

 

해결

일단 실행하게 수정했는데, 버전이 좀 되어서 가능하다면 최신 버전으로 개발하는게 좋을 것 같습니다.

 

1. package-lock.json 파일에서 vue-loader 버전 변경해주기

- 수정한 파일명: package-lock.json
{
	"packages": {
		"node_modules/@vue/cli-service": {
			"dependencies": {
				// "@vue/vue-loader-v15": "npm:vue-loader@^15.9.7",  // 수정 전
				"@vue/vue-loader-v15": "npm:vue-loader@^15.11.1",  // 수정 후 (해결)

...



// 2. npm install 명령어 실행



// 3. package-lock.json 파일 수정 후 npm install 명령어를 실행해주면 아래 부분도 version이 동일하게 변경 적용 된다.
{
	"packages": {
		"node_modules/@vue/vue-loader-v15": {
      			"name": "vue-loader",
      			"version": "15.11.1",

...

 

 

2. npm install 명령어 실행하여 적용.

npm install

 

 

3. package-lock.json 파일 수정 후 npm install 명령어를 실행해주면 아래 부분도 version이 동일하게 변경 적용 된다.

{
	"packages": {
		"node_modules/@vue/vue-loader-v15": {
      			"name": "vue-loader",
      			"version": "15.11.1",

...

 

 

참고 링크

• https://github.com/vuejs/vue-cli/issues/7098

 

 

<추가적으로 함께 알면 좋은 것>

여러 Node 버전의 프로젝트를 관리 중이라면 nvm을 이용하여 Node 버전을 알맞게 바꿔주세요.

• nvm이란?
  • node 버전을 관리해주는 기능입니다.
• windows nvm 설치 다운로드
  • https://github.com/coreybutler/nvm-windows?tab=readme-ov-file
• Linux nvm 설치 방법
  • https://herojoon-dev.tistory.com/113
• nvm 명령어

// nvm 설치
// nvm install [설치할 node 버전]
nvm install 18.13.0

// 설치된 node 버전 확인
nvm list

// nvm 버전 선택
// nvm use [사용할 node 버전]
nvm use 18.13.0