Github上にあるDockerに構築したRailsプロジェクトを、git cloneしてdocker-compose upしたときに、webpackerでコンパイルができないときの対処法について。
ここでは、次の２つの場合について、それぞれ解決方法を解説しています。
- webpackerを使った一般的なプロジェクト
- webpacker + Vue.jsを使ったプロジェクト
webpackerを使った一般的なプロジェクト
エラー内容
webpackerを使って、次のようにコンパイルしたファイルを呼び出していプロジェクトで、ページにアクセスしたときに次のようなエラーが発生することがあります。
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>rails-test-web | [Webpacker] Compiling…
rails-test-web | [Webpacker] Compilation failed:
rails-test-web | yarn run v1.22.5
rails-test-web | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
rails-test-web |
rails-test-web |
rails-test-web | error Command “webpack” not found.
rails-test-web |
rails-test-web | Rendered layout layouts/application.html.erb (Duration: 3456.4ms | Allocations: 15833)
rails-test-web | Completed 500 Internal Server Error in 3490ms (ActiveRecord: 0.0ms | Allocations: 19684)
rails-test-web |
rails-test-web |
rails-test-web |
rails-test-web | ActionView::Template::Error (Webpacker can’t find application.js in /rails-test/public/packs/manifest.json. Possible causes:
rails-test-web | 1. You want to set webpacker.yml value of compile to true for your environment
rails-test-web | unless you are using the webpack -w or the webpack-dev-server.
rails-test-web | 2. webpack has not yet re-run to reflect updates.
rails-test-web | 3. You have misconfigured Webpacker’s config/webpacker.yml file.
rails-test-web | 4. Your webpack configuration is not creating a manifest.
rails-test-web | Your manifest contains:
rails-test-web | {
rails-test-web | }
rails-test-web | ):
rails-test-web | 7: <%= csp_meta_tag %>
rails-test-web | 8:
rails-test-web | 9: <%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %>
rails-test-web | 10: <%= javascript_pack_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %>
rails-test-web | 11:
rails-test-web | 12:
rails-test-web | 13:
rails-test-web |
rails-test-web | app/views/layouts/application.html.erb:10
エラー内容に記述があるように、error Command “webpack” not found. つまり、webpackが存在していない状態です。
これは、Macで作成したプロジェクトをWindowsのDocker for Desktop（WSL2）環境に展開したときに、依存関係が解決できずに発生すると考えられます。
対処法
webpackerを入れ直せば、webpackコマンドが使えるようになります。
コンテナ内でrails webpacker:install を実行します。
#起動中のコンテナの確認
docker ps
#コンテナ内に入る
docker exec -it <コンテナ名> bash
#webapckerのインストール
rails webpacker:installdocker-compose.ymlのあるディレクトリに移動して、次を実行します。
docker-compose run <サービス名> rails webpaker:install実例
$ docker exec -it rails-test-web bash
root@e1c25463cf4f:/rails-test# rails webpacker:install
identical config/webpacker.yml
Copying webpack core config
exist config/webpack
identical config/webpack/development.js
identical config/webpack/environment.js
（省略）
Done in 246.79s.
Webpacker successfully installed 🎉 🍰
webpackerのインストールが完了したら、WEBページをリロードします。
するとコンパイルが走り、ページが正しく表示されます。
rails-test-web | [Webpacker] Hash: e2a8a876c5815bee1e21
rails-test-web | Version: webpack 4.46.0
rails-test-web | Time: 27357ms
rails-test-web | Built at: 07/25/2021 9:33:56 AM
rails-test-web | Asset Size Chunks Chunk Names
rails-test-web | js/application-e421b4aa3f716bebdab1.js 125 KiB application [emitted] [immutable] application
rails-test-web | js/application-e421b4aa3f716bebdab1.js.map 139 KiB application [emitted] [dev] application
rails-test-web | manifest.json 364 bytes [emitted]
rails-test-web | Entrypoint application = js/application-e421b4aa3f716bebdab1.js js/application-e421b4aa3f716bebdab1.js.map
rails-test-web | [./app/javascript/channels sync recursive _channel\.js$] ./app/javascript/channels sync _channel\.js$ 160 bytes {application} [built]
rails-test-web | [./app/javascript/channels/index.js] 211 bytes {application} [built]
rails-test-web | [./app/javascript/packs/application.js] 492 bytes {application} [built]
rails-test-web | [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
rails-test-web | + 3 hidden modules
rails-test-web |
rails-test-web | Rendered layout layouts/application.html.erb (Duration: 52956.0ms | Allocations: 4785)
rails-test-web | Completed 200 OK in 52961ms (Views: 52958.5ms | Allocations: 7843)以上で完了です。
webpacker + Vue.jsを使ったプロジェクト
続いて、同じくDocker上のRailsですがVue.jsも使っている場合についてです。
エラーの原因
発生している現象は同じく、webpakcerが存在しない状態です。
rails-vue-web | [Webpacker] Compiling…
rails-vue-web | [Webpacker] Compilation failed:
rails-vue-web | yarn run v1.22.5
rails-vue-web | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
rails-vue-web |
rails-vue-web |
rails-vue-web | error Command “webpack” not found.
rails-vue-web |
rails-vue-web | Rendered home/index.html.erb within layouts/application (Duration: 4143.1ms | Allocations: 14306)
rails-vue-web | Rendered layout layouts/application.html.erb (Duration: 4143.8ms | Allocations: 14371)
rails-vue-web | Completed 500 Internal Server Error in 4167ms (ActiveRecord: 0.0ms | Allocations: 15672)
rails-vue-web |
rails-vue-web |
rails-vue-web |
rails-vue-web | ActionView::Template::Error (Webpacker can’t find main.js in /rails-vue/public/packs/manifest.json. Possible causes:
rails-vue-web | 1. You want to set webpacker.yml value of compile to true for your environment
rails-vue-web | unless you are using the webpack -w or the webpack-dev-server.
rails-vue-web | 2. webpack has not yet re-run to reflect updates.
rails-vue-web | 3. You have misconfigured Webpacker’s config/webpacker.yml file.
rails-vue-web | 4. Your webpack configuration is not creating a manifest.
rails-vue-web | Your manifest contains:
rails-vue-web | {
rails-vue-web | }
rails-vue-web | ):
rails-vue-web | 1: <% provide(:title, ‘ホーム’) %>
rails-vue-web | 2: <% provide(:description, ‘SEO用の説明文です’) %>
rails-vue-web | 3: <% provide(:keywords, ‘キーワード１,キーワード２’) %>
rails-vue-web | 4: <%= javascript_packs_with_chunks_tag ‘main’ %>
rails-vue-web |
rails-vue-web | app/views/home/index.html.erb:4
Gracefully stopping… (press Ctrl+C again to force)
対処法
ここでは、webpackerとvueをセットでインストールします。
コンテナ内でrails webpacker:install:vue を実行します。
#起動中のコンテナの確認
docker ps
#コンテナ内に入る
docker exec -it <コンテナ名> bash
#webapckerのインストール
rails webpacker:install:vuedocker-compose.ymlのあるディレクトリに移動して、次を実行します。
docker-compose run <サービス名> rails webpaker:install:vue実例
$ docker exec -it rails-test-web bash
root@971671b873ec:/rails-vue# rails webpacker:install:vue
Copying vue loader to config/webpack/loaders
identical config/webpack/loaders/vue.js
Adding vue loader plugin to config/webpack/environment.js
File unchanged! The supplied flag value not found! config/webpack/environment.js
File unchanged! The supplied flag value not found! config/webpack/environment.js
Adding vue loader to config/webpack/environment.js
（省略）
Done in 115.55s.
Webpacker now supports Vue.js 🎉
途中で、app/javascript/packs/hello_vue.js や app/javascript/app.vueを生成しようとします。既に存在している場合は、conflict と表示され、上書きするか確認されます。
必要ないので、nを入力してEnterをクリックします。
conflict app/javascript/app.vue
Overwrite /rails-vue/app/javascript/app.vue? (enter "h" for help) [Ynaqdhm] n
skip app/javascript/app.vuehello_vue.js などファイル名を変更している場合は自動で生成されます。ですが不要なので、削除して問題ありません。
最後にWebpacker now supports Vue.js と表示されれば完了です。
webpackerのインストールが完了したら、WEBページをリロードします。
するとコンパイルが走り、ページが正しく表示されます。
rails-vue-web | [Webpacker] Hash: 9b3b27b6b479c919176a
rails-vue-web | Version: webpack 4.46.0
rails-vue-web | Time: 45815ms
rails-vue-web | Built at: 07/25/2021 6:07:51 AM
rails-vue-web | Asset Size
Chunks Chunk Names
rails-vue-web | js/active_admin-3e373868b3ff0bcddf10.chunk.js 214 KiB
active_admin [emitted] [immutable] active_admin
rails-vue-web | js/active_admin-3e373868b3ff0bcddf10.chunk.js.map 219 KiB
active_admin [emitted] [dev] active_admin
rails-vue-web | js/active_admin/print-cb91db7294ed29e13438.chunk.js 62.4 KiB
active_admin/print [emitted] [immutable] active_admin/print
rails-vue-web | js/active_admin/print-cb91db7294ed29e13438.chunk.js.map 65.3 KiB
active_admin/print [emitted] [dev] active_admin/print
rails-vue-web | js/application-0ce13fa1ee500fe202c3.chunk.js 3.53 KiB
application [emitted] [immutable] application
rails-vue-web | js/application-0ce13fa1ee500fe202c3.chunk.js.map 1.57 KiB
application [emitted] [dev] application
rails-vue-web | js/hello_vue-1dc1c45dfefd129ea040.chunk.js 2.78 KiB
hello_vue [emitted] [immutable] hello_vue
rails-vue-web | js/hello_vue-1dc1c45dfefd129ea040.chunk.js.map 2.45 KiB
hello_vue [emitted] [dev] hello_vue
rails-vue-web | js/hello_vue~main-76c0dd5923bf6a639102.chunk.js 40 KiB
hello_vue~main [emitted] [immutable] hello_vue~main
rails-vue-web | js/hello_vue~main-76c0dd5923bf6a639102.chunk.js.map 16.6 KiB
hello_vue~main [emitted] [dev] hello_vue~main
rails-vue-web | js/main-7fc397951b2ff27066e9.chunk.js 3.64 KiB
main [emitted] [immutable] main
rails-vue-web | js/main-7fc397951b2ff27066e9.chunk.js.map 2.69 KiB
main [emitted] [dev] main
rails-vue-web | js/runtime~active_admin-02fecad041ceb1b4f539.js 6.2 KiB runtime~active_admin [emitted] [immutable] runtime~active_admin
rails-vue-web | js/runtime~active_admin-02fecad041ceb1b4f539.js.map 6.1 KiB runtime~active_admin [emitted] [dev] runtime~active_admin
rails-vue-web | js/runtime~active_admin/print-3564a29137662b252005.js 6.2 KiB runtime~active_admin/print [emitted] [immutable] runtime~active_admin/print
rails-vue-web | js/runtime~active_admin/print-3564a29137662b252005.js.map 6.11 KiB runtime~active_admin/print [emitted] [dev] runtime~active_admin/print
rails-vue-web | js/runtime~application-aa001ceb574a6f67800d.js 6.2 KiB runtime~application [emitted] [immutable] runtime~application
rails-vue-web | js/runtime~application-aa001ceb574a6f67800d.js.map 6.1 KiB runtime~application [emitted] [dev] runtime~application
rails-vue-web | js/runtime~hello_vue-818eba5af0151079cb6c.js 6.2 KiB
runtime~hello_vue [emitted] [immutable] runtime~hello_vue
rails-vue-web | js/runtime~hello_vue-818eba5af0151079cb6c.js.map 6.1 KiB
runtime~hello_vue [emitted] [dev] runtime~hello_vue
rails-vue-web | js/runtime~main-48b161085c7dabc1724f.js 6.19 KiB
runtime~main [emitted] [immutable] runtime~main
rails-vue-web | js/runtime~main-48b161085c7dabc1724f.js.map 6.09 KiB
runtime~main [emitted] [dev] runtime~main
rails-vue-web | js/vendors~active_admin-d271d7e86910090f7a6a.chunk.js 427 KiB vendors~active_admin [emitted] [immutable] vendors~active_admin
rails-vue-web | js/vendors~active_admin-d271d7e86910090f7a6a.chunk.js.map 475 KiB vendors~active_admin [emitted] [dev] vendors~active_admin
rails-vue-web | js/vendors~active_admin~application-f4b6302a8e18f2758487.chunk.js 311 KiB vendors~active_admin~application [emitted] [immutable] vendors~active_admin~application
rails-vue-web | js/vendors~active_admin~application-f4b6302a8e18f2758487.chunk.js.map 368 KiB vendors~active_admin~application [emitted] [dev] vendors~active_admin~application
rails-vue-web | js/vendors~application-76fff8ffce918e69a590.chunk.js 117 KiB vendors~application [emitted] [immutable] vendors~application
rails-vue-web | js/vendors~application-76fff8ffce918e69a590.chunk.js.map 133 KiB vendors~application [emitted] [dev] vendors~application
rails-vue-web | js/vendors~hello_vue~main-fea87275ab407e394e20.chunk.js 246 KiB vendors~hello_vue~main [emitted] [immutable] vendors~hello_vue~main
rails-vue-web | js/vendors~hello_vue~main-fea87275ab407e394e20.chunk.js.map 302 KiB vendors~hello_vue~main [emitted] [dev] vendors~hello_vue~main
rails-vue-web | js/vendors~main-85d99a1d6ca702222725.chunk.js 3.09 MiB
vendors~main [emitted] [immutable] vendors~main
rails-vue-web | js/vendors~main-85d99a1d6ca702222725.chunk.js.map 3.42 MiB
vendors~main [emitted] [dev] vendors~main
rails-vue-web | manifest.json 5.83 KiB
[emitted]
rails-vue-web | media/images/mountain-83434a53.jpg 210 KiB
[emitted]以上で完成です。
