【デプロイ】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