質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

解決済

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

divclass123
divclass123

総合スコア30

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

2回答

0評価

0クリップ

405閲覧

投稿2022/05/01 08:07

編集2022/05/03 12:29

結論

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を参照していただければ幸いです。

yml

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

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

json

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

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。