【Heroku】Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.【Rails&yarn】

最初に

git push heroku mainとコマンドを打って、herokuにpushした。 そうすると、次のようなエラーがでた。

Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.

このエラーをググって出てきた解決策だと、解決しなかったのでブログに書くことにした。

巷の解決策

「バージョンを変更するといい」みたいな解決策がヒットしたが、これだとうまくいかなかった。

実際のエラーの解決

"@vue/compiler-sfc"が必要らしい。 package.jsonを見ると、何故か"devDependencies"の中に記載されていた。 devはdevelopment(開発)の略で、開発環境だけで使われる想定なのだろう。 これを"dependenciesの方に移してやることにした。

{
  "name": "application-name",
  "private": true,
  "dependencies": {
    "vue": "^3.0.7",
    "vue-loader": "16.0.0-rc.0",
    "vue-template-compiler": "^2.6.12",
    "@vue/compiler-sfc": "^3.0.11",
    "vuex": "^3.6.2"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

それから、再びyarnでインストールし直すところから。 yarn upgradeして、git add .&git commit -m "@vue/compiler-sfcを本番環境に"として、再びgit push heroku main。 これでエラーはでなくなった。めでたし、めでたし。

改めて見てみると

package.jsonを見慣れてなくて、dependency treeが具体的に何を指してるのかピンとこなかったけれど、 解決して改めて見てみると、エラー文はそのまんまの解決策。