heroku本番環境でerror Command "webpack" not found.やActionView::Template::Error(Webpacker can't find)

Question

結論

herokuにデプロイが完了し、ブラウザで確認したところsomthing went wrongが出て、ログを確認したところ
error Command "webpack" not found.やActionView::Template::Error
とエラーが起きました。

原因はおそらくherokuでのnodeが10系と古かったので、

heroku run rails webpacker:compile

を実行しても

error Command "webpack" not found.

とエラーがでて vueをコンパイルできずに

ActionView::Template::Error (Webpacker can't find application.js

とエラーがででしまうと思っています。
nodeのバージョンが古いことが全てのエラーの諸悪の根源な気がします。
heroku でnodeのバージョンを上げるにはどうすればいいでしょうか？

実際にExpected version "14.15.0". Got "10.24.0"
のエラーが確認できました。

前提、詳細

本番環境heroku で　rails と vueを組み合わせたアプリのデプロイ完了後、ログには

error Command "webpack" not found.

や

ActionView::Template::Error (Webpacker can't find application.js in /ideaFrameworks/public/packs/manifest.json.

といったようなエラーがでました。(もちろん開発環境ではうまくいってます、後ほどエラー全文貼り付けます。)

「ActionView::Template::Error (Webpacker can't find」
と調べたら下記の記事が出てきました。
https://qiita.com/negisys/items/2bf88659f584fe45b686
vue(js)がコンパイルできていないことが原因だと書いてあったので
この記事を参考に

heroku run rails webpacker:install

を実行しました
各種設定ファイルをオーバーライトするか聞かれましたが、
すでに各種設定ファイルはあったので更新せずに「n」ボタンを押しました。
Webpacker successfully installed
と表示されうまくいったように思えます。
次に

heroku run rails webpacker:compile

を実行しました。

しかし

Compilation failed:
yarn run v1.22.18
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.


error Command "webpack" not found.

と表示されてしまいました。

https://www.somethinggood.work/151

この方の記事では

こちらの「error Command "webpack" not found.」はぱっと見webpackが必要と思ってしますが、それは間違いです！実は、webpackの設定がrails内に残っているため、出てきているエラーになります〜

ですので、しなければならなことは「webpack」を取り除くことです！

と書いてあったので、

heroku run yarn remove webpack

を行いましたが、

error idea-frameworks@0.1.0: The engine "node" is incompatible with this module. Expected version "14.15.0". Got "10.24.0"
error Found incompatible module.

このようなエラーがでました。

おそらくnodeのバージョンが開発環境では14.15でしたが、herokuだと10系だったので
開発環境ではうまくいったけど、本番環境ではうまくいかなかったのかな。と思いました。

なのでnodeのバージョンをあげようと思いました

https://devcenter.heroku.com/ja/articles/nodejs-support#specifying-a-node-js-version
上記の記事を参考に、heroku/nodejsを導入しました。

soichirohara@SoichironoMacBook-Pro ideaFrameworks % heroku buildpacks                    
 ›   Warning: heroku update available from 7.59.2 to 7.60.2.
=== ideaframeworks Buildpack URLs
1. heroku/nodejs
2. heroku/ruby

package.jsonでも

  },
  "engines": {
    "node": "14.15.0"
  }
}

このように記述し、nodeのバージョンを指定しました。
それをgitにpushし、heroku pushしましたがエラーが変わりませんでした。
なので
heroku run node -vを実行してみると
v10.24.0
とバージョンが変わっていませんでした。

こうなったらherokuにnodebrewを直接導入するしかないと思い

heroku run curl https://raw.githubusercontent.com/hokaccha/nodebrew/master/nodebrew | perl - setup

を実行して

heroku run export PATH=$HOME/.nodebrew/current/bin:$PATH

を実行

一応herokuにvimを導入し~/.bash_profileに
export PATH=$HOME/.nodebrew/current/bin:$PATH
を記述し、source ~/.bash_profile
を実行したが

~ $ nodebrew setup
bash: nodebrew: command not found

となってしまいました。
herokuのnodeのバージョンを上げる方法があればご教授いただければ幸いです。

該当ファイル

該当ファイルはお手数ですが文字数の関係でgithubを参照していただければ幸いです。

• config/webpacker.yml

production:
  <<: *default 

  # Production depends on precompilation of packs prior to booting for performance.
  compile: true

コンパイル trueにはなっております。

• package.json

  "engines": {
    "node": "14.15.0"
  }

このようにバージョン指定をしました。

• app/view/layouts/application.html.haml

    = javascript_pack_tag 'application'

でエラーが起きています。

• gemfile
  • gem 'webpacker', '~> 5.0'

デプロイ用のファイル

Dockerfile.production

heroku.yml

エラー全文

抜粋

error Command "webpack" not found.

ActionView::Template::Error (Webpacker can't find application.js in /ideaFrameworks/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
  unless you are using the `webpack -w` or the webpack-dev-server.
 2. webpack has not yet re-run to reflect updates.

エラー全文

ideaframeworks app/web.1 I, [2022-05-01T07:03:47.658841 #5]  INFO -- : [65ca396d-b6f0-4b6b-bdce-901b9d20029e] Started GET "/" for 126.245.85.95 at 2022-05-01 07:03:47 +0000
May 01 00:03:48 ideaframeworks app/web.1 I, [2022-05-01T07:03:47.659738 #5]  INFO -- : [65ca396d-b6f0-4b6b-bdce-901b9d20029e] Processing by MandalartsController#index as HTML
May 01 00:03:48 ideaframeworks app/web.1 I, [2022-05-01T07:03:47.683310 #5]  INFO -- : [65ca396d-b6f0-4b6b-bdce-901b9d20029e]   Rendered mandalarts/index.html.haml within layouts/application (Duration: 5.3ms | Allocations: 487)
May 01 00:03:48 ideaframeworks app/web.1 I, [2022-05-01T07:03:47.686453 #5]  INFO -- : [65ca396d-b6f0-4b6b-bdce-901b9d20029e] [Webpacker] Compiling...
May 01 00:03:51 ideaframeworks heroku/router at=info method=GET path="/" host=ideaframeworks.herokuapp.com request_id=65ca396d-b6f0-4b6b-bdce-901b9d20029e fwd="126.245.85.95" dyno=web.1 connect=0ms service=3417ms status=500 bytes=1827 protocol=https
May 01 00:03:51 ideaframeworks app/web.1 E, [2022-05-01T07:03:51.066623 #5] ERROR -- : [65ca396d-b6f0-4b6b-bdce-901b9d20029e] [Webpacker] Compilation failed:
May 01 00:03:51 ideaframeworks app/web.1 yarn run v1.22.18
May 01 00:03:51 ideaframeworks app/web.1 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
May 01 00:03:51 ideaframeworks app/web.1 error Command "webpack" not found.
May 01 00:03:51 ideaframeworks app/web.1 I, [2022-05-01T07:03:51.070609 #5]  INFO -- : [65ca396d-b6f0-4b6b-bdce-901b9d20029e]   Rendered layout layouts/application.html.haml (Duration: 3392.6ms | Allocations: 2459)
May 01 00:03:51 ideaframeworks app/web.1 I, [2022-05-01T07:03:51.070904 #5]  INFO -- : [65ca396d-b6f0-4b6b-bdce-901b9d20029e] Completed 500 Internal Server Error in 3411ms (ActiveRecord: 10.0ms | Allocations: 3074)
May 01 00:03:51 ideaframeworks app/web.1 F, [2022-05-01T07:03:51.071853 #5] FATAL -- : [65ca396d-b6f0-4b6b-bdce-901b9d20029e]   
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e] ActionView::Template::Error (Webpacker can't find application.js in /ideaFrameworks/public/packs/manifest.json. Possible causes:
May 01 00:03:51 ideaframeworks app/web.1 1. You want to set webpacker.yml value of compile to true for your environment
May 01 00:03:51 ideaframeworks app/web.1    unless you are using the `webpack -w` or the webpack-dev-server.
May 01 00:03:51 ideaframeworks app/web.1 2. webpack has not yet re-run to reflect updates.
May 01 00:03:51 ideaframeworks app/web.1 3. You have misconfigured Webpacker's config/webpacker.yml file.
May 01 00:03:51 ideaframeworks app/web.1 4. Your webpack configuration is not creating a manifest.
May 01 00:03:51 ideaframeworks app/web.1 Your manifest contains:
May 01 00:03:51 ideaframeworks app/web.1 {
May 01 00:03:51 ideaframeworks app/web.1 }
May 01 00:03:51 ideaframeworks app/web.1 ):
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e]      7:     = csrf_meta_tags
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e]      8:     = csp_meta_tag
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e]      9:     = stylesheet_link_tag 'application', media: 'all'
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e]     10:     = javascript_pack_tag 'application'
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e]     11:   %body
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e]     12:     = yield
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e]   
May 01 00:03:51 ideaframeworks app/web.1 [65ca396d-b6f0-4b6b-bdce-901b9d20029e] app/views/layouts/application.html.haml:10

Answer 1

https://qiita.com/divclass123/items/37d57cdab75e9eba4d22
こちらの方法で解決できたました。
自力で解決した様子を記事にまとめました。

Answer 2

https://devcenter.heroku.com/ja/articles/nodejs-support
既に見たかと思いますが、この公式のドキュメントに、

Node バージョンがエンジンで指定されない場合、14.x​ リリースが使用されます。

と書かれています。これを信頼するなら、10系のnodeが動作してしまう事の原因は、あなたのアプリケーションか、あなたが行った操作のどちらかになります。

私なら、nodeの10系がなぜ使用されるようになってしまったか、原因の切り分けをしていくと思います。
まず、rails newして何も手を加えていないアプリをデプロイしてみたら、ちゃんと14系が使用されるか。使用されなければ、これはherokuに問い合わせをしたほうが良い話かもしれません。
14系が使用されるなら、自分のアプリと手を加えていないアプリの違いは何か、というのを絞り込んで行くと思います。少しづつ、新しいアプリに手を加えて、自分のアプリの内容に近づけて行ったとき、どこかのタイミングで、nodeが10系に切り替わるかもしれません。切り替わったら、そのときに行った修正が原因ということになるでしょう。

Comments

[divclass123]

nodeの10系がなぜ使用されるようになってしまったか、原因の切り分けはできませんでしたが、
発生環境の切り分けには成功したような気がします。
アドバイスありがとうございます。