🍇
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の日本語訳を見つけたので参考にどうぞ
Discussion