webpack-cli Error: Unknown option '--no-progress' - node.js

Question

I am facing some errors during refactoring an old project. also, this project is upgraded from laravel 5.8 to 6.0 laravel. but most likely it is failing during npm run prod. I wonder what is happening. just before the upgrade it was fine.
[webpack-cli] Error: Unknown option '--no-progress'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # production: `cross-env NODE_ENV=production node_modules/webpack/bin/w ebpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/w ebpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # production script.
npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2021-05-27T12_01_52_782Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # prod: `npm run production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # prod script.
npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2021-05-27T12_01_52_797Z-debug.log
so my package .json will look like this:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"resolutions": {
"minimist": "^1.2.5"
},
"dependencies": {
"#expo/vector-icons": "^10.2.1",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.58",
"#mdi/font": "^4.9.95",
"#react-pdf/renderer": "^1.6.16",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#trendmicro/react-sidenav": "^0.5.0",
"#vue/cli": "^4.5.13",
"braces": "^2.3.2",
"canvasjs": "^1.8.3",
"core-js": "^2.6.12",
"crypto-js": "^4.0.0",
"express": "^4.17.1",
"firebase": "^8.6.2",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"jquery": "^3.6.0",
"lodash": "^4.17.21",
"material-design-icons-iconfont": "^5.0.1",
"material-ui": "^0.20.2",
"material-ui-icons": "^1.0.0-beta.36",
"material-ui-password-field": "^2.1.2",
"mdbvue": "^6.7.2",
"module": "^1.2.5",
"msg91": "0.0.6",
"node-sass": "^4.14.1",
"pondjs": "^0.9.0",
"pug-plain-loader": "^1.1.0",
"react-circular-progressbar": "^2.0.4",
"react-custom-radio": "^1.0.7",
"react-feather": "^2.0.9",
"react-google-charts": "^3.0.15",
"react-move": "^6.4.0",
"react-native-vector-icons": "^6.7.0",
"react-pdf": "^4.2.0",
"react-progressbar": "^15.4.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-signature-canvas": "^1.0.3",
"react-simple-dropdown": "^3.2.3",
"react-timeseries-charts": "^0.16.1",
"react-toastify": "^5.5.0",
"react-vis": "^1.11.7",
"recharts": "^2.0.9",
"styled-components": "^5.3.0",
"vue": "^2.6.12",
"vue-awesome-swiper": "^4.1.1",
"vue-axios": "^2.1.5",
"vue-chartist": "^2.3.1",
"vue-ckeditor2": "^2.1.5",
"vue-click-outside": "^1.1.0",
"vue-custom-scrollbar": "^1.4.0",
"vue-easy-slider": "^5.3.4",
"vue-event-hub": "^1.0.3",
"vue-kanban": "^1.8.0",
"vue-loader": "^16.2.0",
"vue-picture-input": "^2.1.6",
"vue-plyr": "^5.1.3",
"vue-resizable": "^1.3.0",
"vue-router": "^3.5.1",
"vue-smooth-dnd": "^0.8.0",
"vue-split-panel": "^1.0.4",
"vue-template-compiler": "^2.6.12",
"vue-video": "^0.1.7",
"vue2-editor": "^2.10.2",
"vueditor": "^0.3.1",
"vuescroll": "^4.17.3",
"vuetify-media-player": "^0.8.1",
"vuex": "^3.6.2",
"watch": "^1.0.2",
"write-json-file": "^4.3.0"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-react": "^7.13.13",
"#fortawesome/fontawesome-free": "^5.15.3",
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"cross-env": "^5.2.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"laravel-mix": "^6.0.19",
"minimist": "^1.2.5",
"pug": "^3.0.2",
"pug-loader": "^2.4.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"resolve-url-loader": "^4.0.0",
"sass": "^1.34.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.6.3",
"vuetify": "^2.5.1",
"vuetify-loader": "^1.7.2",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-mixed-spaces-and-tabs": 0,
"no-irregular-whitespace": 0
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": []
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"description": "## Project setup ``` npm install ```",
"main": "babel.config.js",
"keywords": [],
"author": "",
"license": "ISC"
}
my webpack.mix.js
const mix = require('laravel-mix');
mix.webpackConfig({
module: {
rules: [{
test: /\.pug$/,
oneOf: [{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
{
use: ['raw-loader', 'pug-plain-loader']
},
{
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/, /\.ejs$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
}
}
]
}]
}
});
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
thanks in advance
looking for some valuable suggestions