Webpackで発生する「Cannot read properties of undefined (reading 'tapAsync')」のエラーを解消する

結論

Webpackのバージョンに対応していないパッケージが使われている可能性があります。
その場合はアップデートや代替のパッケージへ変更を行うと解消が期待できます。

今回の事象

ReactでCreate React Appを使ってプロジェクトを作成しました。
いくつかコンポーネントを作成した上で、Storybookを導入（npx sb init）しました。
その上でビルド（npm run storybook, npm run build-storybook）しようとするとCannot read properties of undefined (reading 'tapAsync')のエラーが発生して失敗しました。

原因

スタックトレースを読んでみると、エラーの発生箇所はreact-scriptsが依存しているfork-ts-checker-webpack-plugin-altというパッケージでした。
かなり古い状態で更新が止まっているのでWebpackの更新に追いついていないようです。
気づいたきっかけとしては、同じくスタックトレースに原因箇所として出ていたhtml-webpack-pluginのGitHubのissueに基本原因が書かれていたからです。

This error means your plugin is not compatible with html-webpack-plugin 4.x

The error tells you also which plugin is incompatible:

TypeError: Cannot read property 'tapAsync' of undefined
at /Users/mypath/node_modules/html-webpack-preconnect-plugin/index.js:37:57

So in this case html-webpack-preconnect-plugin has to upgrade to the new hooks:

TypeError: Cannot read property 'tapAsync' of undefinedのエラーが出た場合、プラグインがhtml-webpack-plugin 4.xと互換性がないのでアップデートしてね、って感じのことを書いているようです。
つまりhtml-webpack-pluginが悪いんじゃなくて、html-webpack-pluginを使っているプラグインのパッケージが原因ってことですね。

対処

とりあえず今回のプロジェクトにインストールされていたreact-scriptsはバージョンが古かったので最新化しました。
最新化したところ、fork-ts-checker-webpack-plugin-altへの依存自体が無くなったのでエラーも出なくなりました。
おそらくreact-scriptsのメンテナーがこの問題にどこかで気づいてメンテされてないパッケージへの依存を切ったのだと思います。