Node.js 및 NPM 호환성 문제 해결하기 : Failed to resolve entry for package "vite". The package may have incorrect main/module/exports specified in its package.json

 

 

최근 프로젝트에서 Vite와 Laravel Vite 플러그인을 사용하면서 Node.js와 NPM의 버전 호환성 문제에 직면했습니다. 이 글에서는 발생한 문제와 해결 과정을 상세히 공유하려 합니다.

 

 Failed to resolve entry for package "vite". The package may have incorrect main/module/exports specified in its package.json 라는 메시지를 npm install이후 npm run dev를 실행 시킨이후 만나게 되었는데요. npm install에서 shell에서 인식을 못해서 경로 설정을 재설정한 이후 만난 오류 였습니다. ㅠㅠ

문제 발생

1. 첫 번째 문제: Node.js의 낮은 버전에서 최신 Vite와 Laravel Vite 플러그인을 실행하려 할 때 호환성 경고가 발생했습니다.
2. 두 번째 문제: WSL 환경에서 UNC 경로 문제로 인해 NPM 스크립트 실행 시 오류가 발생했습니다.

해결 과정

1. Node.js 및 NPM 버전 업그레이드
   • Node.js를 버전 16에서 18로 업그레이드하였고, 필요에 따라 NVM을 사용하여 버전 관리를 수행했습니다.
   • NPM도 최신 버전으로 업그레이드하여 호환성을 보장했습니다.
     

     Paste the following command to download and install nvm:
     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
     
     Or, if you prefer using wget:
     wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
     
     After installing, you may need to close and reopen your terminal or run the following command to use nvm:
     bash
     export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
     [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
     
     // Verify the installation by typing:
     nvm --version
     
     // Node.js 업그레이드: 필요한 패키지가 Node.js 18 버전 이상을 요구하므로,
     Node.js를 18 버전으로 업그레이드해야 합니다.
     
     nvm install 18
     nvm use 18
     nvm alias default 18
     
     // npm 업데이트: npm 역시 최신 버전으로 업데이트하는 것이 좋습니다. 
     이는 새로운 Node.js 버전과 더 잘 호환되며, 최신 기능과 보안 패치를 제공합니다.
     npm install -g npm@10.7.0
     
     // 의존성 재설치: Node.js 및 npm 업데이트 후에는 프로젝트 의존성을 다시 설치하는 것이 좋습니다.
     이를 통해 모든 패키지가 새로운 환경에 맞게 올바르게 설치되고 구성됩니다.
     
     rm -rf node_modules package-lock.json
     npm install​

2. UNC 경로 문제
   • Windows의 CMD가 WSL 경로를 올바르게 해석하지 못하는 문제를 해결하기 위해 NPM 구성을 수정했습니다.
   • npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe" 명령을 통해 Git Bash를 스크립트 쉘로 설정하여 문제를 해결했습니다.
3. 의존성 재설치
   • 모든 Node 모듈을 삭제한 후 재설치하여 환경을 깨끗하게 정리했습니다.

 

문제를 해결한 후, 개발 서버를 성공적으로 실행할 수 있었으며, npm run dev 명령으로 Vite 서버를 구동할 수 있었습니다. 이 과정을 통해 Node.js 환경에서 발생할 수 있는 다양한 문제와 그 해결 방법을 배울 수 있었습니다. 개발 중 문제에 직면했을 때는 문서를 철저히 검토하고, 필요한 경우 커뮤니티의 도움을 받거나 관련 문서를 찾아보는 것이 좋습니다. WSL과 Windows 간의 경로 호환성 문제는 종종 발생할 수 있으니, 스크립트 쉘 설정과 같은 해결 방법을 기억해 두세요.

 

#오류오류 태그 삭제#ViTEViTE 태그 삭제#라이브와이어라이브와이어 태그 삭제#npmnpm 태그 삭제#서버구동서버구동 태그 삭제#NVMNVM 태그 삭제#라라벨라라벨 태그 삭제#npmrundevnpmrundev 태그 삭제#