Issues when generating NUXT build - css

Question

I am building a nuxt ssr app and whenever I run build command, I get this error of css-loader related to Invalid options object.
ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue)
Module build failed (from ./node_modules/#nuxt/webpack/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 has an unknown property 'minimize'. These properties are valid:
object { url?, import?, modules?, icss?, sourceMap?, importLoaders?, esModule? }
at validate (D:\Dev\Vuejs\Nuxt\nuxt-app\node_modules\#nuxt\webpack\node_modules\css-loader\node_modules\schema-utils\dist\validate.js:98:11)
at Object.loader (D:\Dev\Vuejs\Nuxt\nuxt-app\node_modules\#nuxt\webpack\node_modules\css-loader\dist\index.js:36:28)
# ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./node_modules/vue-style-loader!./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue) 4:14-295
# ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue
# ./node_modules/vue2-google-maps/dist/main.js
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/GoogleMap.vue
# ./components/GoogleMap.vue
# ./components/AddPost.vue
# ./components/Header.vue
# ./layouts/nossr.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./.nuxt/client.js
I have install the css-loader as well but the issue persists. Below is my package.json
{
"name": "test",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
"test": "jest"
},
"dependencies": {
"#azure/storage-blob": "12.6.0",
"#capacitor-community/http": "1.0.0",
"#capacitor/android": "2.4.6",
"#capacitor/core": "2.4.6",
"#ffmpeg-installer/ffmpeg": "1.1.0",
"#fortawesome/fontawesome-svg-core": "1.2.28",
"#fortawesome/free-brands-svg-icons": "5.13.0",
"#fortawesome/free-solid-svg-icons": "5.13.0",
"#fortawesome/vue-fontawesome": "0.1.10",
"#mathieustan/vue-datepicker": "^0.2.11",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/svg": "^0.4.0",
"#vue-stripe/vue-stripe": "4.1.1",
"axios": "^0.24.0",
"azure-storage": "^2.10.4",
"capacitor-resources": "2.0.5",
"cordova-res": "0.15.3",
"core-js": "^3.15.1",
"cors": "2.8.5",
"cropperjs": "1.5.9",
"crypto-js": "4.0.0",
"css-loader": "5.0.0",
"debounce": "1.2.0",
"fluent-ffmpeg": "2.1.2",
"jquery": "1.9.1",
"lodash": "4.17.21",
"lru-cache": "6.0.0",
"luxon": "1.25.0",
"masonry-layout": "4.2.2",
"moment": "^2.9.0",
"moment-timezone": "^0.5.33",
"number-abbreviate": "^2.0.0",
"nuxt": "^2.15.7",
"photoswipe": "^5.2.4",
"postcss": "8.1.10",
"postcss-import": "13.0.0",
"postcss-loader": "4.1.0",
"postcss-url": "10.1.1",
"push-dir": "^0.4.1",
"rxjs": "6.6.3",
"simple-vue-validator": "0.16.0",
"style-loader": "^3.3.1",
"stylus-loader": "^6.2.0",
"underscore": "^1.13.1",
"v-datatable-light": "0.8.2",
"v-lazy-image": "1.4.0",
"video-metadata-thumbnails": "1.0.22",
"vue-datatables-net": "1.4.1",
"vue-datetime": "1.0.0-beta.13",
"vue-loader": "14.2.4",
"vue-meta": "2.4.0",
"vue-quill-editor": "3.0.6",
"vue-router": "3.3.4",
"vue-rx": "6.2.0",
"vue-scroll": "^2.1.13",
"vue-select": "^3.10.3",
"vue-svg-loader": "^0.16.0",
"vue-tables-2": "^2.3.1",
"vue-the-mask": "^0.11.1",
"vue-tippy": "^4.7.2",
"vue-toast-notification": "0.4.1",
"vue2-datepicker": "3.8.2",
"vue2-google-maps": "0.10.7",
"vue2-timepicker": "^1.1.6",
"vuejs-clipper": "3.0.3",
"vuejs-datepicker": "1.6.2",
"vuetable-2": "2.0.0-beta.4",
"vuex": "3.4.0",
"vuex-persistedstate": "3.0.1",
"weekstart": "1.0.1"
},
"devDependencies": {
"#capacitor/cli": "2.4.6",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"#vue/test-utils": "^1.2.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "^27.0.5",
"eslint": "6.7.2",
"jest": "^27.0.5",
"sass": "^1.50.1",
"sass-loader": "^10.2.1",
"source-map-loader": "^3.0.0",
"vue-jest": "^3.0.4",
"vue-masonry-css": "1.0.3"
},
"main": "index.js",
"license": "MIT"
}
I have searched alot but couldn't find any solution. kindly help me out. Thanks in advance!

Answer 1

This question is not really solvable without having the whole context and making an in-depth analysis of all the packages one by one: upgrading the legacy ones, removing the deprecated ones and figuring out what kind of specific configuration is in place (Stylus for example).
The given reproduction kinda shows the issue, but we cannot just solve them in package.json because it may break the logic that is based on those specific versions.
Since the project is private, there is no real way to help here without having more info.