Webpacker を 3.0.2 から 3.3.1 に上げたらアセットプリコンパイルで3連続エラーになった

背景

ローカルで Rails アプリを production モードで起動する - Qiita を行なっている最中に、
アセットプリコンパイルで以下のエラーが発生しました。

ERROR in application-f48cf4883ba9fb65ce1e.js from UglifyJs
Unexpected token: operator (>) [./node_modules/popper.js/dist/popper.js:34,0][application-f48cf4883ba9fb65ce1e.js:14240,20]

詳細は覚えていないのですが、 Issue を眺めていると、修正がマージされているっぽいので、
バージョンアップすれば治るかも？と思って bundle update webpacker しました。
上記エラーは解消しましたが、他のエラーが発生しました。
解消してはエラー、解消してはエラーになったので、対処方法をまとめておきます。

バージョン情報

Ruby : 2.4.2
Rails : 5.1.4
React : 16.2.0
Redux : 3.7.2
Webpacker : 3.0.2 -> 3.3.1

発生したエラーと対処方法

発生したエラー

• can't find executable webpack for gem webpacker (Gem::Exception)
• Cannot find module 'postcss-smart-import'
• TypeError: environment.plugins.set is not a function

以下に、それぞれの対処方法をまとめます。

can't find executable webpack for gem webpacker (Gem::Exception)

エラーの詳細は以下。

/Users/yuichiro/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/bundler-1.16.1/lib/bundler/rubygems_integration.rb:458:in `block in replace_bin_path': can't find executable webpack for gem webpacker (Gem::Exception)
    from /Users/yuichiro/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/bundler-1.16.1/lib/bundler/rubygems_integration.rb:489:in `block in replace_bin_path'
    from ./bin/webpack:17:in `<main>'

Heroku: can't find executable webpack for gem webpacker (Gem::Exception) · Issue #1321 · rails/webpacker
を読むと、 bundle exec rails webpacker:binstubs を実行しろと書いてあるので、その通りにしてこのエラーは解決した。

$ bundle exec rails webpacker:binstubs
Copying binstubs
       exist  bin
    conflict  bin/webpack
Overwrite /Users/yuichiro/projects/pomodoro-rails/bin/webpack? (enter "h" for help) [Ynaqdh] y
       force  bin/webpack
    conflict  bin/webpack-dev-server
Overwrite /Users/yuichiro/projects/pomodoro-rails/bin/webpack-dev-server? (enter "h" for help) [Ynaqdh] y
       force  bin/webpack-dev-server

どうやら、 webpacker の binstub が Webpacker のバージョンと合わなかったようだ。
この場合は、 bin/webpack と bin/webpack-dev-server で、この2つを上書きした。

Cannot find module 'postcss-smart-import'

以下にまとめたので、参照ください。

Webpacker バージョンアップ後、アセットプリコンパイルで Cannot find module 'postcss-smart-import' エラー - Qiita

TypeError: environment.plugins.set is not a function

webpackerを使ったrailsアプリを実行するとき、TypeError: environment.plugins.set is not a functionというエラーが出る - Qiita
を参考にして解消しました。ありがとうございます

config/webpack/environment.js(diff)

 const { environment } = require('@rails/webpacker')
 const webpack = require('webpack')

-environment.plugins.set(
+environment.plugins.prepend(
   'Provide',
   new webpack.ProvidePlugin({
     jQuery: 'jquery/dist/jquery',