【webpack】sassをバンドルする際に出たエラーの対処

環境

PHP 7.3.8
Laravel 6.18.40
webpack 4.27.1

TypeError: text.forEach is not a function ... というエラー

Docker開発環境下で、npm run watch-poll でビルドを試みるも以下エラーで失敗する。

ERROR in ./resources/scss/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: text.forEach is not a function
    at /var/www/node_modules/extract-text-webpack-plugin/dist/loader.js:145:16
（略）

結論から言うと、sassのバンドルにはcss-loader、node-sass、sass-loader、style-loaderを用いているが、それぞれのバージョンによる互換性の問題であった。

今回はcss-loaderのバージョンを4.3から下げる事で改善した。

npm uninstall --save-dev css-loader
npm install --save-dev css-loader@3.5.3

最終的に以下の構成でビルドを確認した。

package.json

"css-loader": "^3.5.3",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"node-sass": "^4.14.1",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"style-loader": "^1.2.1",

参考にした記事

・npm がどうしてもエラーになる
・Laravel6でVueを使おうとnpm run watchをするとエラーが出る