【Rails】git cloneしたプロジェクトでコンパイルに失敗したときの対処法: [Webpacker] Compilation failed:error Command “webpack” not found.

rails-prograshi(プロぐらし)-kv Rails
記事内に広告が含まれていることがあります。

Github上にあるDockerに構築したRailsプロジェクトを、git cloneしてdocker-compose upしたときに、webpackerでコンパイルができないときの対処法について。

ここでは、次の2つの場合について、それぞれ解決方法を解説しています。

  1. webpackerを使った一般的なプロジェクト
  2. 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:install

docker-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, ‘キーワード1,キーワード2’) %>
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:vue

docker-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.vue

hello_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]

以上で完成です。


タイトルとURLをコピーしました