最近、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 するファイルのファイルパスの末尾にスラッシュを付けると、
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が一度型定義を読み込めたらそれを流用するためだと考えられる

ファイルパスの末尾のスラッシュ有無にバラツキがあると、ビルドが成功したりエラーになったり
実装状況や環境によって変化する

webpack5にあげた途端に急にimportエラーでビルドエラーが起きるようになった件に対して、
import しているファイルパスの末尾スラッシュを除去すると解消するかも

同じお悩みを抱えて検索して来てくださった方のお役に立てればと思います
参考になったという方はGoodボタン押して頂けると嬉しいです