Tip

[Tip | NodeJS] Npm 의존성 문제로 인한 서버 실행 에러

t-opendocs 2025. 2. 27. 15:09
반응형

오래전 개발된 Nuxt2 버전의 프로젝트에서 모듈설치 후 서버 실행시 에러발생에 대한 확인 및 조치 방법을 정리한다.


> 작성일 : 2025-02-27
> OS : Windows 11 Pro (24H2)
> NodeJs : v16.20.2
> NPM : 8.19.4

 

<1> 문제상황

Nuxt2 버전으로 개발된 프로젝트를 git으로 부터 다운받아 모듈설치

git clone {git-url}
cd {project-folder}
npm install

서버 실행시 에러발생 기존 사용하던 개발자의 소스는 정상 작동함

npm run dev
Module build failed (from ./node_modules/babel-loader/lib/index.js):                                                                                                                                friendly-errors 오전 9:41:54
Error: Cannot find package '@babel/plugin-proposal-object-rest-spread' imported from C:\_Work\...\babel-virtual-resolve-base.js


 

<2> 문제확인

기존 개발자 환경에서 찾을 수 없는 패키지 의존성 확인

npm list @babel/plugin-proposal-object-rest-spread

새로 다운받은 환경에서 찾을 수 없는 패키지 의존성 확인 : (empty)로 확인된다.

npm list @babel/plugin-proposal-object-rest-spread

기존 개발자 환경에서 확인되는 @babel/plugin-proposal-object-rest-spread의 상위 모듈의 의존성을 비교해 본다.

npm list @babel/preset-env

기존 개발자 환경과 설치된 버전이 다르다

# 기존 개발자 환경
nuxt@2.15.8
- nuxt/babel-preset-app@2.15.8
-- @babel/preset-env@7.16.11
# 새로 다운받은 환경
nuxt@2.18.1
- nuxt/babel-preset-app@2.18.1
-- @babel/preset-env@7.26.9

 


 

<3> 문제해결

package.json에서 dependencies를 확인한다.

# AS-IS
"nuxt": "^2.15.8"
# TO-be
"nuxt": "2.15.8"

2.15.8 버전의 호환버전인 2.18.1이 설치된 것이므로 앞 '^'를 제거 후 모듈을 재설치 후 의존성을 재확인한다.

# 기존 개발자 환경
nuxt@2.15.8
- nuxt/babel-preset-app@2.15.8
-- @babel/preset-env@7.16.11
# 새로 다운받은 환경
nuxt@2.15.8
- nuxt/babel-preset-app@2.15.8
-- @babel/preset-env@7.26.9

@babel/preset-env 버전이 다르다. (7.16.11에서만 하위 모듈 @babel/plugin-proposal-object-rest-spread이 존재한다.)

package.json의 devDependencies에 @babel/preset-env의 버전 명시하여 7.26.9을 7.16.11로 변경할 수 있도록 한다.

    "devDependencies": {
        ...
        "@babel/preset-env": "7.16.11"
    }

명시적으로 설치시 하위 의존성에서 중복제거(deduped)되고 상위 모듈을 참조한다.

이외에도 Caret(^ - 호환 버전 자동 설치)으로 문제가 되는 부분을 체크하고 고정 버전으로 변경한다.

전체 모듈을 확인 - 다음 명령으로 전체 모듈 버전을 비교한다.

# 의존성 1depth 까지 출력
npm list -g --depth 1
# 의존성 2depth 까지 출력
npm list -g --depth 2



반응형