2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webpackerに適用しよう。【エラー集】

Last updated at Posted at 2019-09-28

過去の記事はwebpackerは捨てて、、、みたいな記事が多かったですが、
Rails6ではデフォルトになる webpackerにいい加減慣れておきます。(もう6はリリースされていますがw)


今まで当然のようにSprocketsに依存していましたが、

> Rails.application.config.assets.paths
=> ["/Users/u/file/app/assets/config", 
"/Users/u/file/app/assets/images", "/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/chartkick-3.0.2/vendor/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/parsley-rails-2.8.1.0/vendor/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/parsley-rails-2.8.1.0/vendor/assets/stylesheets", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/flat-ui-rails-0.0.2/vendor/assets/images", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/flat-ui-rails-0.0.2/vendor/assets/stylesheets", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/bootstrap3-datetimepicker-rails-4.17.47/vendor/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/bootstrap3-datetimepicker-rails-4.17.47/vendor/assets/stylesheets", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/momentjs-rails-2.20.1/vendor/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/coffee-rails-4.2.2/lib/assets/javascripts", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actioncable-5.2.2/lib/assets/compiled", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/actionview-5.2.2/lib/assets/compiled", 
"/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/activestorage-5.2.2/app/assets/javascripts", 
#<Pathname:/Users/u/file/node_modules>]

これを

> Rails.application.config.assets.precompile
=> [#<Proc:0x00007fe7e415d528@/Users/u/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/sprockets-rails-3.2.1/lib/sprockets/railtie.rb:84 (lambda)>, /(?:\/|\\|\A)application\.(css|js)$/]

これだけに削減しました。
javascript_include_tagとstylesheet_link_tag は今回でばいばい。

apps/images以外は、frontend/packs 以下にjsファイルを、 frontend/stylesheets以下にcss系を配置しました。(この辺は他の記事が優秀なので割愛)

移行にあたり はまったところ集(エラーと対応方法)

1. manifest.json(public/packsにできる)も最新のコンパイルされたファイルに変更されるが、staging・productionなどで走らせるとローカルでコンパイルしといたファイル(manifest.jsonがあるのに)また Compiling...が走ってしまう。

【解決法】 デフォルトでは、webpacker.ymlのpublic_output_pathはすべて同じなので、一見環境変数による影響がないのかなと思っていましたが、内部的には保持している様子。そのため、RAILS_ENVで指定していないコンパイルだった場合、またCompiling..が走ってしまうようです。

環境によって出力される先(public/packs部分を出し分ける)
当然clobber(削除)するときも環境変数を見ているので、RAILS_ENVを指定しましょう。

production:
 <<: *default

 # Production depends on precompilation of packs prior to booting for performance.
 compile: false
 public_output_path: packs-production

2. compiled failed: (空白) で再度Compling...し始める

【解決法】
が表示された場合、理由が見えないので、いったん bin/webpack を走らせて、そうすると理由がわかる。ので、修正して、またcompileさせる

3. Webpackerを入れてるのに「ねえよ」って怒られる

以下でリフレッシュ

> yarn install --check-files

4. 今までちゃんとbin/webpackできていたのに、急に「jQueryねえよ」って言われだす

> yarn upgrade

6. ファイルがなく500エラー

【解決法】
コンパイルし直す(dev-server -> productionみたいに変更があった場合にファイルエラー。再度立ち上げ直す。念の為clobberしておく。


途中コンパイル関係のエラーはコンパイルしてみないと結果がわからない&コンパイルするのに時間がかかる ので、どうなるかと思ったけど、驚くほどファイル構造がすっきりした。あとはimagesの移行ですね〜。

参考
Rails Asset Pipelineがうまくいかないときの問題の切り分けかた
https://qiita.com/metheglin/items/c5c756246b7afbd34ae2

webpack 4 入門
https://qiita.com/soarflat/items/28bf799f7e0335b68186

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?