npm run production error : "unknown option no-progress"
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.
Related videos on Youtube
Larecho
Updated on November 25, 2021Comments
-
Larecho over 2 years
I am trying to run the command
npm run dev
ornpm 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.
-
Larecho about 3 yearsI think upgrading Mix 6 is not the thing which I could do. Is there any guide how I can revert to a previous version? What is responsible for Mix 6 or previous version? I mean is this Npm doing it ? or node version?
-
matticustard about 3 yearsThe easiest thing to get you back to square one is probably to restore your old
package.json
file, delete the current/node_modules
directory, then runnpm install
. Then be a bit more choosy about which packages to update. Make a backup of the folder first if you have any concerns. -
Larecho about 3 yearsshold I install latest npm and latest node before these actions? Does it make a difference ? or should I install previous versions ?
-
Larecho about 3 yearsdid what exactly you said but now I am getting the error like :
/home/coins/coins/node_modules/webpack-cli/bin/cli.js:93 throw err; ^ Error: Invalid section argument! at Object.<anonymous> (/home/coins/coins/webpack.mix.js:13:8)
. -
matticustard about 3 yearsThis is a custom error thrown from your own code at
webpack.mix.js
line 13. It would indicate thatprocess.env.npm_config_section
is not equal tojs
,css
, orserver
. This variableprocess.env.npm_config_section
appears to be associated with a 3rd-party packagelaravel-mix-merge-manifest
which is not typical of most Laravel installs. Based on your self-definednpm run
scripts, I believe you must run eithernpm run dev:all
,npm run watch:all
, ornpm run prod:all
to pass the appropriate--section
variables as opposed to the standard commands. -
Larecho about 3 years@ matticustard then it means I always must run npm run like you mentioned?
-
matticustard about 3 yearsWhoever set this up wanted to organize assets using additional webpack files:
webpack.js.mix.js
,webpack.css.mix.js
, andwebpack.server.mix.js
. Based on the custom commands in yourpackage.json
file, you need use the (:all
) commands I mentioned above, or you can run each section independently (e.g.,npm run dev --section=js
[or--section=css
, or--section=server
]) to compile only a certain group of assets. Alternatively, remove the 3rd-party app and any reference to the dynamic sections allowing you to use a traditionalwebpack.mix.js
file and commands. -
Larecho about 3 yearsThank you very much for your clear answer. I appreciate
-
Jakub Adamec over 2 yearsThis does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review