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"
}