最近、webpack ver.4 -> ver.5 にアプデした途端に、ビルドエラーが起きるようになったが、
原因がわかりにくかったのでメモ書き
背景
webpack4でWeb開発していましたが、
yarn audit で webpack4の脆弱性警告発生
脆弱性対応のためにwebpack4->webpack5 にアプデすることになった
問題
webpack のメジャーバージョンアップ ということで、以下の手順書を読みながら移行
https://webpack.js.org/migrate/5/
webpack.common.js で、loaderをuseに手動で変更する必要があった点などわかりにくいので注意
(options 引数が無い場合、loader は使えないらしい)
まあこの辺はビルドエラーメッセージに出てくるので恐らく大丈夫だと思います
一通りの手順を踏んだが、以下のエラーが発生
「Module not found: Error: Can't resolve "○○"」
○○には、ファイルパスが入ります
解決方法
ググってみても、似た問題はたくさんヒットするが、解消できる記事は見当たらず
webpackの実行時のコンソールログを出しまくって解析
どうやら、「○○」というファイルに記載されている型定義が読み込めていない模様
そのファイルをimport している箇所を検索して見比べてみると、
ファイルパスの末尾にスラッシュが入っているかどうかにバラつきがあった
import { XXX } from '****'
or
import { XXX } from '****/' ←この書き方だとNGの場合がある
末尾のスラッシュを除去すると、webpackのビルド成功
原因
原因としては、webpack4では問題なかった書き方が、webpack5になったタイミングで問題になった
ファイルパスの末尾にスラッシュを付けると、
webpack4 まではいい感じに型定義を探してきてくれたが、
webpack5 になると、必ず ****/index.d.ts を探しにいってしまうようになった
パッケージのフォルダ構成次第で、****/index.d.ts に型定義は入っていないものがあると、そこでimport エラー
スラッシュを除去したファイルパスにすれば解消
(もしくは、型定義ファイルindex.d.ts への正しいファイルパスを入れてもOK)
この原因をわかりにくくしている要因として、
該当するパッケージを最初にimport した時点で問題ないと、
その後のimport でファイルパスの書き方に問題があった場合(スラッシュをつけてしまっている場合)、
webpackがパッケージの内容をキャッシュしているのでimportエラーが起きない
つまり、再現性が高くなく、100%起きるわけではないことが挙げられる
まとめ
webpack5にあげた途端に急にimportエラーでビルドエラーが起きるようになった件に対して、
import しているファイルパスの末尾スラッシュを除去すると解消するかも
同じお悩みを抱えて検索して来てくださった方のお役に立てればと思います
参考になったという方はGoodボタン押して頂けると嬉しいです
↧