プロジェクト内にwebpackが複数バージョン存在してしまう問題

Rails6のプロジェクトで bundle exec rails webpacker:compile を実行したところ、下記コンパイルエラーが出てきました。

console

Compiling...
Compilation failed:
[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/test/node_modules/@rails/webpacker/node_modules/webpack/lib/NormalModule.js:203:10)
    at WebpackAssetsManifest.handleCompilation (/test/node_modules/@rails/webpacker/node_modules/webpack-assets-manifest/src/WebpackAssetsManifest.js:778:18)
    at Hook.eval [as call] (eval at create (/test/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:102:1)
    at Hook.CALL_DELEGATE [as _call] (/test/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/test/node_modules/webpack/lib/Compiler.js:1031:26)
    at /test/node_modules/webpack/lib/Compiler.js:1073:29
    at Hook.eval [as callAsync] (eval at create (/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/test/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/test/node_modules/webpack/lib/Compiler.js:1068:28)
    at /test/node_modules/webpack/lib/Compiler.js:496:12
The command '/bin/sh -c bundle exec rails webpacker:compile' returned a non-zero code: 1

的を射ないスタックトレースで、解決にだいぶ苦戦しました。

#環境

console

$ ruby -v
ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin19]

$ rails -v
Rails 6.1.3.1

$ yarn --version
1.19.1

$ npm list webpack
test@0.1.0 /Users/hanpen/projects/test
├─┬ @rails/webpacker@6.0.0-rc.5
│ ├─┬ babel-loader@8.2.2
│ │ └── webpack@5.53.0 deduped
│ ├─┬ compression-webpack-plugin@8.0.1
│ │ └── webpack@5.53.0 deduped
│ ├─┬ terser-webpack-plugin@5.2.4
│ │ └── webpack@5.53.0
│ ├─┬ webpack-assets-manifest@5.0.6
│ │ └── webpack@5.53.0 deduped
│ ├─┬ webpack-cli@4.8.0
│ │ └── webpack@5.53.0 deduped
│ └── webpack@5.53.0
├─┬ webpack-cli@4.7.2
│ ├─┬ @webpack-cli/configtest@1.0.4
│ │ └── webpack@5.38.1 deduped
│ └── webpack@5.38.1 deduped
├─┬ webpack-dev-server@4.2.1
│ ├─┬ webpack-dev-middleware@5.1.0
│ │ └── webpack@5.38.1 deduped
│ └── webpack@5.38.1 deduped
└── webpack@5.38.1

#原因
環境の項で記載した通り、プロジェクトにはwebpackを使用するパッケージが複数ありました。
しかし、各パッケージが依存関係として落としてくるwebpackにはバージョンが複数あり、その状況が今回のコンパイルエラーを起こしていたようです。

####各パッケージの使用しているwebpackのバージョン

• ＠rails/webpacker＠6.0.0-rc.5
  • webpack＠5.53.0
• webpack-cli＠4.7.2
  • webpack＠5.38.1
• webpack-dev-server＠4.2.1
  • webpack＠5.38.1

※明示的にインストールしているwebpackは5.38.1
#解決方法
明示的にインストールしているものと、依存関係としてインストールされるもののバージョンを固定してしまいます。

package.json

{
  "name": "test",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^6.0.0-rc.5",
    "turbolinks": "^5.2.0",
    "webpack": "5.53.0",
    "webpack-cli": "4.7.2"
  },
  "resolutions": {
    "webpack": "5.53.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.5.2",
    "babel-plugin-macros": "^3.1.0",
    "webpack-dev-server": "^4.2.1"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ]
}

package.jsonに resolutionsを追加することで、依存関係としてインストールされるパッケージのバージョンを指定することができます。ここでの目的はwebpackのバージョンを一つに統一することですので、resolutionsにはwebpackerの依存関係に使用されているwebpackのバージョン5.53.0を指定します。
明示的にインストールしているwebpackのバージョンも5.53.0に揃えましょう。

最後に、 yarn installでパッケージをインストールし直して、ビルドすれば完了です。