最近、webpack ver.4 -> ver.5 にアプデした途端に、ビルドエラーが起きるようになったが、
原因がわかりにくかったのでメモ書き
背景
webpack4でWeb開発していましたが、
yarn audit で webpack4の脆弱性警告発生
脆弱性対応のためにwebpack4->webpack5 にアプデすることになった
問題
webpack のメジャーバージョンアップ ということで、以下の手順書を読みながら移行
https://webpack.js.org/migrate/5/
webpack.config.js で、loaderをuseに手動で変更する必要があった点などわかりにくいので注意
（options 引数が無い場合、loader は使えないらしい）
まあこの辺はビルドエラーメッセージに出てくるので恐らく大丈夫だと思います
一通りの手順を踏んだが、以下のエラーが発生（○○○には、ファイルパスが入ります）
Module not found: Error: Can't resolve "○○○"
What's?
解決方法
ググってみても、似た問題はたくさんヒットするが、解消できる記事は見当たらず
webpackの実行時のコンソールログを出しまくって解析
どうやら、「○○○」というファイルに記載されている型定義が読み込めていない模様
そのファイルをimport している箇所を検索して見比べてみると、
ファイルパスの末尾にスラッシュが入っているかどうかにバラつきがあった
import { ○○○ } from '○○○';
or
import { ○○○ } from '○○○/'; // ←この書き方だとNGの場合がある
末尾のスラッシュを除去すると、webpackのビルド成功
Why?
原因
原因は、webpack4では問題なかった import の書き方が、webpack5になったタイミングで問題になったこと
import の書き方の問題とは？
import するファイルのファイルパスの末尾にスラッシュを付けると、
webpack4 まではいい感じに型定義を探してきてくれたが、
webpack5 になると、必ず 「○○○/index.d.ts」 を探しにいってしまうようになった
パッケージのフォルダ構成次第で、○○○/index.d.ts に型定義が入っていないものがあると、そこでimport エラー
スラッシュを除去したファイルパスにすれば解消した
（もしくは、型定義ファイルindex.d.ts への正しいファイルパスを入れてもOK）
今回我々の例だと、kintoneのUIライブラリ（kintone-ui-component）でimport エラー
○○○/index.d.ts ではなく、その下に掘られたフォルダ内に型定義ファイルが存在していた
なぜこの問題がわかりにくいのか
まず、エラーメッセージが、OSSで「○○○の定義がありません」と出るので、
OSSに問題があるのでは？とyarn install し直したりキャッシュを削除したりNodeを入れ直したりといった
誤った対処方法を取ろうとしてしまいがち
OSSには問題がないので、上記対処方法をとっても解消しません
さらに、この原因をわかりにくくしている要因として、
最初にパッケージをimport した時点で問題ない場合、
その後のimport でファイルパスの書き方に問題があってもimportエラーが起きない（！！）
※webpackが一度型定義を読み込めたらそれを流用するためだと考えられる
ファイルパスの末尾のスラッシュ有無にバラツキがあると、ビルドが成功したりエラーになったり
実装状況や環境によって変化する
まとめ
import文のファイルパスの末尾スラッシュは付けないのが正しいんだろう
webpack5にあげた途端に急にimportエラーでビルドエラーが起きるようになった件に対して、
import しているファイルパスの末尾スラッシュを除去すると解消するかも
同じお悩みを抱えて検索して来てくださった方のお役に立てればと思います
参考になったという方はGoodボタン押して頂けると嬉しいです