【2021年】rails使用時のwebpacker v6にアップグレードする方法とエラーについて

TL;DR

公式ドキュメント読もう。

背景

プロジェクトの定期的なアップグレードをしていた際にwebpack v5に対応したwebpacker v6を使用した時の苦労を簡単にメモします。
日本語の記事が少なかったので、誰かの役に立てばと思って書きます。その代わり(?)に情報の質は低いです(確信ないまま書いていることが多い)。ご了承ください。

この記事の対象先

• 最新のwebpackerで困ってる人
• webpackerを嫌いになりたくない人
• 今までwebpackerを使ってた人
• これからwebpackerを使う人はだいたい対象じゃありません。

こんなエラーが起きてる人向け

• Field 'browser' doesn't contain a valid alias configuration
• Webpacker::Manifest::MissingEntryError
• TypeError: Cannot read property 'plugins' of undefined

なんでこんなことになった？

• webpackが2020年10月にバージョン5になった。
• webpackerが2020年12月にバージョン6(β版)になった。
• これらのせいでフォルダ構成を含め、めちゃくちゃ変わった。
• 大掛かりな変更をしなければついていけないぞ。(2021年3月現在は)

私の環境

"@rails/webpacker": "4.2.2" → "@rails/webpacker": "^6.0.0-beta.5"
"webpack": "^4.41.2" → "webpack": "^5.11.0"

公式手順

1: app/javascript フォルダを中身そのままに app/packs にリネームします。(ようやくrailsのプロジェクトっぽいフォルダ名になりましたね)

$ mv app/javascript app/packs  

2: app/packs/packs(旧app/javascript/packs) フォルダを中身そのままに app/packs/entrypoints にリネームします。

$ mv app/packs/packs app/packs/entrypoints

3: config/webpack フォルダはいっぱい書き換えるので、別名で保存しておきましょう。 (config/webpack を config/webpack_old にでもしておきましょう)

$ mv config/webpack config/webpack_old

4: config/webpacker.yml はいっぱい書き換えるので、別名で保存しておきましょう。
(config/webpacker.yml を config/webpacker_old.ymlにでもしておきましょう)

$ mv config/webpacker.yml config/webpacker_old.yml

5: 今のwebpack-dev-serverを一回アンインストールしましょう。

$ yarn remove webpack-dev-server

6: webpackerをアップグレードしましょう

Gemfile

gem 'webpacker', '~> 6.0.0.beta.6' # beta.6が投稿時の最新

$ bundle install

$ yarn add @rails/webpacker@next

※私はpackage.jsonの中身をコピーしておいて、一回削除してから以下をしました。なおその際は、後からまたyarn addで戻してあげましょう。

$ bundle exec rails webpacker:install

7-8: もしあなたがjsだけでなく、cssやsass、tsなどもwebpackerの管理下に収めてるなら、ここを参考にしながらconfigを修正しようね。
(Field 'browser' doesn't contain a valid alias configuration)のエラーが大量に出る場合の原因はここが悪い。

今までのenvironment.jsはなくなりました。base.jsがその代わりです。
細かい修正はご自身で。environmentはwebpackConfigへと変わりました。

参考までに私の完成例をあげます。

base.js

const { webpackConfig, merge } = require('@rails/webpacker')
const webpack = require('webpack')
const erb = require('./loaders/erb')

module.exports = merge(webpackConfig, {
  plugins: [new erb()],
  //js.erbを読み込めるようにしています。
  resolve: {
    extensions: ['.css', '.scss']
    //scssとjsをwebpacker管理下に置いています。
  }
});

webpackConfig.plugins.unshift(
  new webpack.ProvidePlugin({
    $:         'jquery/src/jquery',
    jQuery:    'jquery/src/jquery',
    jquery:    'jquery/src/jquery',
  })
  //いつも起こる$やjQueryが読み込めない問題への対応
)

また、私はcss(scss)のために、以下の手順を行いました。

yarn add css-loader mini-css-extract-plugin css-minimizer-webpack-plugin

yarn add sass-loader

9: .browserlistrc とか browserlist をいじってた人はドキュメントみつつよしなにやってください。
.browserlistrc と browserlist が両方あるよってエラーが出てたら、

rm .browserlistrc

で消しましょう。

10: extensionsはやり方が変わったとのことです。私は関係なかったのでよくわかりません。ドキュメントみつつよしなにやってください。

エラー解説

エラー

Field 'browser' doesn't contain a valid alias configuration

これはwebpackerというよりwebpackのエラー。あんまりわかってないんだけど、ファイルが見つからないよエラー。エラーが起きててもサーバー実行時に問題ないこともあるのは謎。
大体拡張子への対応問題(解説7番を見てね)。じゃなくてyarnで独自にインストールしたライブラリ周りでなんかそれらのエラーが起きてるなら、多分そのライブラリのissueにこの問題が上がってる。(2件中2件上がってた)

---

エラー

warning package.json: No license field

ライセンスを入れなきゃいけなくなったらしい。private使用だぞってことでこう書いておけばok

package.json

{
  ...いろいろ...
  "license": "UNLICENSED",
  "private": true
}

---

エラー

Webpacker::Manifest::MissingEntryError

EntryPointになにもないよってエラー。私は公式の手順を踏まず、gemのwebpackerだけを最新に上げた際に起きた。javascript/packs じゃなくて packs/entrypoints がエントリーポイントに変わったんなら、そりゃあるわけないよね。手順をしっかり踏もう。

---

エラー

TypeError: Cannot read property 'plugins' of undefined

今までのenvironments.jsを読み込んでると起こるエラー。書き方が変わってるんだから、昔の書き方がうまくいくわけないね。ちゃんと一回きれいにwebpacker:installしよう。

参考にした記事

• webpack-dev-serverの歴史がわかった記事 → https://qiita.com/IgnorantCoder/items/74b60ef53c3c1aa4aebc