laravel - npm 运行生产错误 : "unknown option no-progress"

Question

我正在尝试运行命令 npm run dev或 npm run production .但没有一个是成功的。一旦我运行命令，我就会收到类似图像的错误:
error after running npm run prod
我的 package.json 文件如下所示:

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

我的 webpack.mix.js 文件如下所示:

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 文件夹位于我安装 Laravel 的目录中的 node_modules 内。 (/home/coins/coins)。
我正在使用最新版本的 webpack 和最新版本的 npm。节点版本为: v14.15.4我花了 1 周的时间，但我仍然无法弄清楚。我无法运行任何与 npm run ... 相关的东西。
P.S:有一些包和依赖项已经过时，我使用 npm update 来更新原始 package.json 中提到的包。所以我在更新之前放置了原始 package.json 也许这就是我收到此错误的原因:

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

任何帮助将不胜感激。

Answer 1

Laravel Mix 6 从 CLI 中删除了许多选项。您将需要更新 scripts您的 package.json 部分相应地归档。
见 更新您的 NPM 脚本
https://laravel-mix.com/docs/6.0/upgrade#update-your-npm-scripts
前:

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

后:

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

或者考虑恢复到以前版本的 Mix。
编辑:如果您选择保留 Mix 6，您将需要阅读整个 upgrade guide ，因为最有可能对 webpack.mix.js 进行其他更改使事情发挥作用所必需的。