Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

npm run production error : "unknown option no-progress"

I am trying to run the command npm run dev or npm run production. But none of them are successful. Once I run the command I am getting an error like in image :

error after running npm run prod

My package.json file is like below :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "dev:all": "concurrently \"npm run dev --section=js && npm run build:lang\" \"npm run dev --section=css\" \"npm run dev --section=server\" --kill-others-on-fail",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "build:lang": "cross-env babel-node ./lang.script.js",
        "clear:babel-cache": "rimraf -rf ./node_modules/.cache/babel-loader/*",
        "clear:messages": "rimraf -rf ./resources/messages/*",
        "watch": "npm run development -- --watch",
        "watch:all": "concurrently \"npm run watch --section=js\" \"npm run watch --section=css\" \"npm run watch --section=server\" --kill-others-on-fail",
        "watch-poll": "npm run watch -- --watch-poll",
        "watch-poll:all": "concurrently \"npm run watch-poll --section=js\" \"npm run watch-poll --section=css\" \"npm run watch-poll --section=server\" --kill-others-on-fail",
        "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",
        "hot:all": "concurrently \"npm run hot --section=js\" --kill-others-on-fail",
        "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",
        "prod:all": "concurrently \"npm run prod --section=js && npm run build:lang\" \"npm run prod --section=css\" \"npm run prod --section=server\" --kill-others-on-fail",
        "ide": "php artisan ide-helper:generate && php artisan ide-helper:meta && php artisan ide-helper:models -N"
    },
    "devDependencies": {
        "@ant-design/icons": "^4.4.0",
        "@babel/node": "^7.12.10",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/preset-react": "^7.12.10",
        "@hot-loader/react-dom": "^17.0.1",
        "@loadable/component": "^5.14.1",
        "@ungap/url-search-params": "^0.2.2",
        "antd": "^4.11.2",
        "autoprefixer": "^10.2.3",
        "axios": "^0.21",
        "babel-plugin-import": "^1.13.3",
        "babel-plugin-react-intl": "^3.2.1",
        "babel-plugin-recharts": "^1.2.1",
        "clean-webpack-plugin": "^3.0.0",
        "cross-env": "^7.0.3",
        "css-loader": "^5.0.1",
        "echarts": "^5.0.1",
        "echarts-for-react": "^2.0.16",
        "fast-deep-equal": "^3.1.3",
        "file-loader": "^6.2.0",
        "flag-icon-css": "^3.5.0",
        "fs": "0.0.1-security",
        "glob": "^7.1.6",
        "history": "^5.0.0",
        "install": "^0.13.0",
        "laravel-echo": "^1.10.0",
        "laravel-mix": "^6.0.11",
        "less": "4.1.0",
        "less-vars-to-js": "^1.3.0",
        "line-awesome": "github:icons8/line-awesome",
        "line-height": "^0.3.1",
        "lodash": "^4.17.20",
        "lodash-webpack-plugin": "^0.11.6",
        "mkdirp": "^1.0.4",
        "moment": "^2.29.1",
        "node-sass": "^5.0.0",
        "nprogress": "^0.2.0",
        "postcss-less": "^4.0.0",
        "prop-types": "^15.7.2",
        "pusher-js": "^7.0.3",
        "react-dnd": "^11.1.3",
        "react-google-recaptcha": "^2.1.0",
        "react-hot-loader": "^4.13.0",
        "react-intl": "^5.10.19",
        "react-motion": "^0.5.2",
        "react-redux": "^7.2.2",
        "react-router-redux": "^5.0.0-alpha.9",
        "react-scrollbar": "^0.5.6",
        "react-slick": "^0.28.0",
        "recharts": "^2.0.4",
        "redux": "^4.0.5",
        "redux-saga": "^1.1.3",
        "redux-thunk": "^2.3.0",
        "resolve-url-loader": "^3.1.2",
        "rfs": "^9.0.3",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1",
        "socket.io-client": "^3.1.0",
        "style-loader": "^2.0.0",
        "url-search-params": "^1.1.0",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.19.0",
        "webpack-bundle-analyzer": "^4.4.0"
    },
    "browserslist": [
        "since 2015"
    ],
    "dependencies": {
        "@ant-design/dark-theme": "^2.0.2",
        "@tinymce/tinymce-react": "^3.9.0",
        "animate.css": "^4.1.1",
        "concurrently": "^5.3.0",
        "connected-react-router": "^6.8.0",
        "cropperjs": "^1.5.9",
        "cryptocoins-icons": "^2.9.0",
        "dompurify": "^2.2.6",
        "husky": "^4.3.8",
        "intl-tel-input": "^17.0.8",
        "laravel-echo-server": "^1.6.2",
        "laravel-mix-merge-manifest": "^1.0.1",
        "less-loader": "^7.3.0",
        "memfs": "^3.2.0",
        "qrcode.react": "^1.0.1",
        "raw-loader": "^4.0.2",
        "rc-color-picker": "^1.2.6",
        "react": "^17.0.1",
        "react-bottom-scroll-listener": "^5.0.0",
        "react-cryptocoins": "^1.0.11",
        "react-dom": "^17.0.1",
        "react-full-screen": "^0.3.1",
        "react-grid-layout": "^1.2.0",
        "react-helmet": "^6.1.0",
        "react-idle-timer": "^4.5.2",
        "react-infinite-scroller": "^1.2.4",
        "react-phone-input-2": "^2.13.9",
        "react-phone-number-input": "^3.1.10",
        "react-quill": "^1.3.5",
        "react-router-dom": "^5.2.0",
        "rimraf": "^3.0.2",
        "simplebar-react": "^2.3.0",
        "tinymce": "^5.6.2"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run clear:babel-cache && npm run clear:messages && npm run prod:all && git add ."
        }
    }
}

My webpack.mix.js file is like below:

const rimraf = require('rimraf');
if(['js', 'css'].includes(process.env.npm_config_section)){
    rimraf.sync('./public/mix-manifest.json');
}

if(['server'].includes(process.env.npm_config_section)){
    rimraf.sync('./public/server/mix-manifest.json');
}

if (['js', 'css', 'server'].includes(process.env.npm_config_section)) {
    require(`${__dirname}/webpack.${process.env.npm_config_section}.mix.js`)
} else {
    throw new Error('Invalid section argument!')
}

webpack folder is inside of node_modules in the directory where I have installed my laravel. (/home/coins/coins).

I am using the latest version of webpack and latest version of npm. Node version is : v14.15.4

It took my 1 week and still I am not able to figure it out. I am not able to run anything related to npm run ... .

P.S: There are some packages and dependencies were outdated and I have used npm update in order to update the packages which is mentioned in original package.json. So I am putting original package.json before I made an update maybe this is the reason why I am getting this error :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "dev:all": "concurrently \"npm run dev --section=js && npm run build:lang\" \"npm run dev --section=css\" \"npm run dev --section=server\" --kill-others-on-fail",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "build:lang": "cross-env babel-node ./lang.script.js",
        "clear:babel-cache": "rimraf -rf ./node_modules/.cache/babel-loader/*",
        "clear:messages": "rimraf -rf ./resources/messages/*",
        "watch": "npm run development -- --watch",
        "watch:all": "concurrently \"npm run watch --section=js\" \"npm run watch --section=css\" \"npm run watch --section=server\" --kill-others-on-fail",
        "watch-poll": "npm run watch -- --watch-poll",
        "watch-poll:all": "concurrently \"npm run watch-poll --section=js\" \"npm run watch-poll --section=css\" \"npm run watch-poll --section=server\" --kill-others-on-fail",
        "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",
        "hot:all": "concurrently \"npm run hot --section=js\" --kill-others-on-fail",
        "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",
        "prod:all": "concurrently \"npm run prod --section=js && npm run build:lang\" \"npm run prod --section=css\" \"npm run prod --section=server\" --kill-others-on-fail",
        "ide": "php artisan ide-helper:generate && php artisan ide-helper:meta && php artisan ide-helper:models -N"
    },
    "devDependencies": {
        "@ant-design/icons": "^2.1.0",
        "@babel/node": "^7.4.5",
        "@babel/plugin-proposal-class-properties": "^7.4.4",
        "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/preset-react": "^7.0.0",
        "@hot-loader/react-dom": "^16.8.6",
        "@loadable/component": "^5.10.1",
        "@ungap/url-search-params": "^0.1.2",
        "antd": "^3.23.1",
        "autoprefixer": "^9.6.1",
        "axios": "^0.18",
        "babel-plugin-import": "^1.11.2",
        "babel-plugin-react-intl": "^3.2.1",
        "babel-plugin-recharts": "^1.2.0",
        "clean-webpack-plugin": "^3.0.0",
        "cross-env": "^5.1",
        "css-loader": "^3.2.0",
        "echarts": "^4.2.1",
        "echarts-for-react": "^2.0.15-beta.0",
        "fast-deep-equal": "^2.0.1",
        "file-loader": "^4.2.0",
        "flag-icon-css": "^3.3.0",
        "fs": "0.0.1-security",
        "glob": "^7.1.4",
        "history": "^4.9.0",
        "install": "^0.12.2",
        "laravel-echo": "^1.5.4",
        "laravel-mix": "^4.0.7",
        "less": "2.7.3",
        "less-vars-to-js": "^1.3.0",
        "line-awesome": "github:icons8/line-awesome",
        "line-height": "^0.3.1",
        "lodash": "^4.17.11",
        "lodash-webpack-plugin": "^0.11.5",
        "mkdirp": "^0.5.1",
        "moment": "^2.24.0",
        "node-sass": "^4.13.0",
        "nprogress": "^0.2.0",
        "postcss-less": "^3.1.4",
        "prop-types": "^15.7.2",
        "pusher-js": "^4.4.0",
        "react-dnd": "^5.0.0",
        "react-google-recaptcha": "^1.0.5",
        "react-hot-loader": "^4.11.1",
        "react-intl": "^3.0.0-beta-8",
        "react-motion": "^0.5.2",
        "react-redux": "^7.1.0",
        "react-router-redux": "^5.0.0-alpha.9",
        "react-scrollbar": "^0.5.6",
        "react-slick": "^0.23.1",
        "recharts": "^1.8.5",
        "redux": "^4.0.0",
        "redux-saga": "^0.16.0",
        "redux-thunk": "^2.3.0",
        "resolve-url-loader": "^2.3.1",
        "rfs": "^8.0.4",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "socket.io-client": "^2.2.0",
        "style-loader": "^0.23.1",
        "url-search-params": "^1.1.0",
        "vue-template-compiler": "^2.6.10",
        "webpack-bundle-analyzer": "^3.3.2"
    },
    "browserslist": [
        "since 2015"
    ],
    "dependencies": {
        "@ant-design/dark-theme": "^0.2.2",
        "@tinymce/tinymce-react": "^3.3.2",
        "animate.css": "^3.7.2",
        "concurrently": "^5.0.0",
        "connected-react-router": "^6.5.2",
        "cropperjs": "^1.5.5",
        "cryptocoins-icons": "^2.9.0",
        "dompurify": "^2.0.7",
        "husky": "^3.0.8",
        "intl-tel-input": "^16.0.3",
        "laravel-mix-merge-manifest": "^0.1.2",
        "less-loader": "^5.0.0",
        "memfs": "^2.15.5",
        "qrcode.react": "^0.9.3",
        "raw-loader": "^3.1.0",
        "rc-color-picker": "^1.2.6",
        "react": "^16.8.6",
        "react-bottom-scroll-listener": "^3.0.0",
        "react-cryptocoins": "^1.0.11",
        "react-dom": "^16.9.0",
        "react-full-screen": "^0.2.4",
        "react-grid-layout": "^0.17.1",
        "react-helmet": "^5.2.1",
        "react-idle-timer": "^4.2.9",
        "react-infinite-scroller": "^1.2.4",
        "react-phone-input-2": "^2.9.5",
        "react-phone-number-input": "^2.3.21",
        "react-quill": "^1.3.3",
        "react-router-dom": "^5.0.1",
        "rimraf": "^3.0.0",
        "simplebar-react": "^1.2.3",
        "tinymce": "^4.9.6"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run clear:babel-cache && npm run clear:messages && npm run prod:all && git add ."
        }
    }
}

Any help would be highly appreciated.

like image 938
Larecho Avatar asked Jan 31 '21 06:01

Larecho


2 Answers

Laravel Mix 6 removes a number of options from the CLI. You will need to update the scripts section of your package.json file accordingly.

See Update Your NPM Scripts
https://laravel-mix.com/docs/6.0/upgrade#update-your-npm-scripts

Before:

"scripts": {
    "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 --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "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"
}

After:

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}

Or consider reverting to a previous version of Mix.

Edit: If you choose to keep Mix 6, you will want to read the entire upgrade guide, as there are most likely additional changes to webpack.mix.js required to make things work.

like image 89
matticustard Avatar answered Nov 18 '22 19:11

matticustard


I had the same issue after upgrading mix so I just reverted mix back to v5 specifically v5.0.5 running npm install [email protected] in the app root

like image 1
riggerz29 Avatar answered Nov 18 '22 20:11

riggerz29