Nativescript-vue Build에러가 나는 경우 -(1)

Nativescript-vue Build 에러가 나는 경우는 매우 다양한데 camera 모듈을 추가할 때 어떤걸 해야 할지 몰라 이것 저것 막 추가하다보니 library가 충돌을 일으켰다. Camera 모듈을 추가했는데

WARNING in ../node_modules/nativescript-camera/camera.android.js 20:24-63
Module not found: Error: Can't resolve 'tns-core-modules/utils/types' in 'C:\Project\Vue\node_modules\nativescript-camera'

...

WARNING in ../node_modules/nativescript-camera/camera.android.js 64:34-73
Module not found: Error: Can't resolve 'tns-core-modules/application' in 'C:\Project\Vue\node_modules\nativescript-camera'

와 같은 에러가 5개가 동시에 떴다. 필요 없는 모듈을 지우려고 npm uninstall 명령을 해 봐도 소용이 없고 plugin을 어떻게 하나씩 지우는지 알수도 없어서 인터넷을 여기 저기 뒤져서 찾은 방법은

1. ns clean으로 정리

먼저 프로젝트 폴더에서 ns clean 으로 nativescript의 plugin을 일단 모두 정리한다.

C:\project\vue\myFarm> ns clean
- Cleaning project...
√ Cleaned directory hooks
√ Cleaned directory platforms
√ Cleaned directory node_modules
√ Cleaned file package-lock.json
√ Project successfully cleaned.

C:\project\vue\myFarm> npm list
myFarm@1.0.0 C:\Project\Vue\myFarm
+-- UNMET DEPENDENCY @nativescript/android@8.3.1
+-- UNMET DEPENDENCY @nativescript/core@~8.3.0
+-- UNMET DEPENDENCY @nativescript/preview-cli@1.0.1
+-- UNMET DEPENDENCY @nativescript/theme@~3.0.2
+-- UNMET DEPENDENCY @nativescript/webpack@~5.0.6
+-- UNMET DEPENDENCY nativescript-vue-template-compiler@~2.9.0
`-- UNMET DEPENDENCY nativescript-vue@~2.9.0

npm ERR! code ELSPROBLEMS
npm ERR! missing: @nativescript/android@8.3.1, required by myFarm@1.0.0
npm ERR! missing: @nativescript/core@~8.3.0, required by myFarm@1.0.0
npm ERR! missing: @nativescript/preview-cli@1.0.1, required by myFarm@1.0.0
npm ERR! missing: @nativescript/theme@~3.0.2, required by myFarm@1.0.0
npm ERR! missing: @nativescript/webpack@~5.0.6, required by myFarm@1.0.0
npm ERR! missing: nativescript-vue-template-compiler@~2.9.0, required by myFarm@1.0.0
npm ERR! missing: nativescript-vue@~2.9.0, required by myFarm@1.0.0

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Local\npm-cache\_logs\2022-10-03T04_37_37_063Z-debug-0.log

2. package.json 수정

이 상태에서 build를 하면 다시 재설치되어 버리므로 프로젝트의 package.json 파일을 수정한다.

파일을 열어보면 dependencies 항목에 추가 설치된 plugin 들이 포함되어 있다. 이 중 필요없는 library/plugin을 삭제하고 저장한다.

[ package.json 파일 ]
{
  "name": "myFarm",
  "main": "app/app.js",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/camera": "^5.0.13",
    "@nativescript/core": "~8.3.0",
    "@nativescript/theme": "~3.0.2",
    "nativescript-camera": "^4.5.0",
    "nativescript-vue": "~2.9.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.3.1",
    "@nativescript/preview-cli": "1.0.1",
    "@nativescript/webpack": "~5.0.6",
    "nativescript-vue-template-compiler": "~2.9.0"
  }
}

3. build

그 다음 다시 필요한 plugin을 설치하거나 build 또는 android를 실행하면 필요한 라이브러리가 설치된다.

C:\project\vue\myFarm> ns run android