【배포】package.json의 dependencies와 devDependencies의 차이로 프로덕션 환경 배포 실패

소개

Rails+Vue.js의 SPA를 프로덕션 환경(Heroku)에 배포하려고 할 때 다음 오류가 발생했습니다.

ModuleNotFoundError: Module not found: Error: Can’t resolve ‘vuetify’ in ...

아니, 개발시는 Vuetify 보통으로 사용하고 있었구나… 라고 생각하면서, 이쪽을 해결한 방법을 남깁니다.

환경

OS: macOS Catalina 10.15.1

결론 : package.json에서 실수 발견

【Before】

package.json

{
  "name": "app_name",
  "private": true,
  "version": "0.1.0",
  "dependencies": {
...
  },
  "devDependencies": {
    "vuetify": "^2.1.15", //これがおかしい
    "webpack-dev-server": "^3.10.1"
  }
}

↓
【After】

package.json

{
  "name": "app_name",
  "private": true,
  "version": "0.1.0",
  "dependencies": {
...
    "vuetify": "^2.1.15", //移動
  },
  "devDependencies": {
    "webpack-dev-server": "^3.10.1"
  }
}

이유

devDependencies에 나열된 패키지는 프로덕션 환경에 반영되지 않습니다.
【지금이지만】package.json의 dependencies와 devDependencies - Qiita

{ 
  "name": "app_name",
  "dependencies": {
    //どの環境でも使用するパッケージ（本番環境含む）
  },
  "devDependencies": {
    //開発環境のみで使用するパッケージ
  }
} 

왜 devDependencies에 들어갔습니까?

아마도 yarn add 때 실수했다고 생각됩니다.
종속성 관리 | Yarn

yarn add --dev는 devDependencies를 추가합니다.

보통은

$ yarn add vuetify

에서 설치하지만,

$ yarn add --dev vuetify

그리고 설치 중에 명령을 잘못 버린 것 같습니다.

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

【지금이지만】package.json의 dependencies와 devDependencies - Qiita

종속성 관리 | Yarn