ValidationError in CSS Loader using npm run prod (Webpack) in Laravel

Viewed 838

For almost a half year, everything worked fine running npm run prod in my Laravel application, but for an unknown reason, it throws an error since today. I have absolutely no clue what I've done, but I can't get it back to work. Unfortunately, this error stops me from further development because my .css files are missing, and I can't recreate them.

ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: 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 (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 (D:...\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11) at Object.getOptions (D:...\node_modules\webpack\lib\NormalModule.js:527:19) at Object.loader (D:...\node_modules\css-loader\dist\index.js:31:27) at processResult (D:...\node_modules\webpack\lib\NormalModule.js:701:19) at D:...\node_modules\webpack\lib\NormalModule.js:807:5 at D:...\node_modules\loader-runner\lib\LoaderRunner.js:399:11 at D:...\node_modules\loader-runner\lib\LoaderRunner.js:251:18

Before I got this error, another error was thrown, which I fixed by myself. It said it couldn't find the module 'css-loader'. So I ran npm install --save-dev css-loader (or something similar), and the new error appeared. However, I never used the css-loader package before, so why is it required now? So how do I fix the validation error above?

webpack.config.js

const path = require('path');

module.exports = {
    output: {
        chunkFilename: 'js/[name].[contenthash].js'
    },
    resolve: {
        extensions: ['.js'],
        alias: {
            '@': path.resolve(),
            '@components': path.resolve('resources/js/components')
        }
    }
};

webpack.mix.js

mix.sass('resources/sass/app.scss', 'public/css/app.css')
    .options({
        processCssUrls: false,
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
            require('autoprefixer')
        ],
        cssNano: {
            discardComments: {
                removeAll: true
            }
        }
    });

package.json

"devDependencies": {
    "@tailwindcss/forms": "^0.3.3",
    "autoprefixer": "^10.3.1",
    "axios": "^0.21.1",
    "css-loader": "^6.0.0",
    "jquery": "^3.6.0",
    "laravel-mix": "^6.0.25",
    "lodash": "^4.17.21",
    "postcss": "^8.3.5",
    "postcss-import": "^14.0.2",
    "sass": "^1.35.2",
    "sass-loader": "^12.1.0",
    "tailwindcss": "^2.2.4",
    "vue-loader": "^15.9.7",
    "vue-template-compiler": "^2.6.14"
},
"dependencies": {
    "vue": "^2.6.14"
}
1 Answers
Related