css-loaderを4に上げたらfile-loaderでバンドルしたファイルが読み込めなくなった

原因

css-loaderはv4.0.0からesModuleがdefaultとなりました。
他のloderがCommonJSの場合、競合してしまいfile-loaderでバンドルしたファイルが読み込めなくなってしまいました。

T http://localhost:3000/[object%20Module] net::ERR_ABORTED 404 (Not Found)

the esModule option is true by default
https://github.com/webpack-contrib/css-loader/releases/tag/v4.0.0

esModuleについて

対応方法1

Asset Modulesに変更する

webpack5からraw-loader,url-loader,file-loaderは非推奨になり、Asset Modulesが追加されました。
loaderを使用する設定を変更してAsset Modulesに切り替えます。

以前	Asset Modules
file-loader	asset/resource
url-loader	asset/inline
raw-loader	asset/source

下記リンクにあるtype: 'javascript/auto'はwebpackが様々な種類のJavaScriptモジュールを自動で判定する為の設定です。
今回はこの判定でCommonJSになってしまっていました。

Asset Modulesについて

対応方法2

css-loaderをesModuleではなくCommonJSにする

 {
   loader: "css-loader",
   options: {
     esModule: false,
   },
 },      

その他

Webpack5ガイドのAsset Modulesの日本語訳を見つけたので参考にどうぞ
https://note.com/stein2nd/n/n7502b20a3f4f