Laravel Mix / Tailwind compiling issue with css-loader - laravel

Question

I am trying to compile my CSS using PostCSS in Laravel Mix - Laravel 8.50.0 (as stated in Install Tailwind CSS with Laravel), but when I compile my assets using: npm run watch I receive the following error.
ERROR in ./resources/css/app.css
(./node_modules/css-loader/dist/cjs.js??clonedRuleSet-6[0].rules[0].use1!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6[0].rules[0].use[2]!./resources/css/app.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been
initialized using an options object that does not match the API
schema.
options.url should be one of these:
boolean | object { filter? }
-> Allows to enables/disables url()/image-set() functions handling.
-> Read more at https://github.com/webpack-contrib/css-loader#url
Details:
options.url should be a boolean.
options.url should be an object:
object { filter? }
at validate (/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/webpack/node_modules/schema-utils/dist/validate.js:105:11)
at Object.getOptions (/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/webpack/lib/NormalModule.js:527:19)
at Object.loader (/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/css-loader/dist/index.js:31:27)
Child mini-css-extract-plugin
/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/css-loader/dist/cjs.js??clonedRuleSet-6[0].rules[0].use1!/Users/usser/Desktop/GIT/snitch/onesnitch.com/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6[0].rules[0].use[2]!/Users/usser/Desktop/GIT/snitch/onesnitch.com/resources/css/app.css
compiled with 1 error
webpack.mix.js
const mix = require("laravel-mix");
mix.webpackConfig({
stats: {
children: true,
},
})
.options({
terser: {
extractComments: false,
},
})
.js("resources/js/app.js", "public/js")
.vue({ version: 2 })
.postCss("resources/css/app.css", "public/css", [require("tailwindcss")])
.js("resources/frontend/js/app.js", "public/js/frontend")
.postCss("resources/frontend/css/app.css", "public/css/frontend", [
require("tailwindcss"),
])
.version();
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"axios": "^0.21.1",
"css-loader": "^6.1.0",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.3.5",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"tailwindcss": "^2.1.1",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#tailwindcss/aspect-ratio": "^0.2.0",
"#tailwindcss/forms": "^0.3.2",
"#tailwindcss/typography": "^0.4.0",
"alpinejs": "^2.8.2",
"aos": "^3.0.0-beta.6",
"dayjs": "^1.10.4",
"dotenv": "^8.2.0",
"secure-ls": "^1.2.6",
"vee-validate": "^3.4.5",
"vue": "^2.6.12",
"vue-i18n": "^8.24.1",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",
"vuex-persistedstate": "^3.2.0",
"zxcvbn": "^4.4.2"
}
}
Thoughts would be greatly appreciated.

Answer 1

As a workaround, downgrade your css-loader package to a 5.x version.
npm install css-loader#5.2.7 --save-dev