After successfully running npm run prod in my Laravel application for several months, it suddenly started throwing an error out of the blue today. I am at a loss as to what caused this issue and cannot seem to resolve it. This error is hindering my development progress as some crucial .css files are missing and I am unable to 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
Prior to encountering this latest error, I had already resolved another issue where it could not find the 'css-loader' module. To address this, I executed
npm install --save-dev css-loadercss-loader package before, so why is it necessary now? How can I rectify the validation error mentioned 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"
}