Okay to Paste-in Package-Lock.json from 19 Hours Ago to Fix "ValidationError: Progress Plugin Invalid Options" (Vue 3)?

Question

I'm using Vue 3 and I pushed a version of my project that was working well to GitHub 19 hours ago.

About 5 hours later, the problem below occurred when I entered npm run serve which resulted in these lines of information:

> [email protected] serve

> vue-cli-service serve

INFO Starting development server...

and then the following error:

ValidationError: Progress Plugin Invalid Options

options should NOT have additional properties
options should NOT have additional properties
options should NOT have additional properties
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

    at validateOptions (/Users/mgav/zagnetic_vue/zagnetic/node_modules/webpack/node_modules/schema-utils/src/validateOptions.js:32:11)
    at new ProgressPlugin (/Users/mgav/zagnetic_vue/zagnetic/node_modules/webpack/lib/ProgressPlugin.js:62:3)
    at new Progress (/Users/mgav/zagnetic_vue/zagnetic/node_modules/progress-webpack-plugin/index.js:25:21)
    at new progressPlugin (/Users/mgav/zagnetic_vue/zagnetic/node_modules/progress-webpack-plugin/index.js:127:10)
    at /Users/mgav/zagnetic_vue/zagnetic/node_modules/webpack-chain/src/Plugin.js:14:18
    at Object.toConfig (/Users/mgav/zagnetic_vue/zagnetic/node_modules/webpack-chain/src/Plugin.js:78:22)
    at /Users/mgav/zagnetic_vue/zagnetic/node_modules/webpack-chain/src/Config.js:129:63
    at Array.map (<anonymous>)
    at module.exports.toConfig (/Users/mgav/zagnetic_vue/zagnetic/node_modules/webpack-chain/src/Config.js:129:40)
    at Service.resolveWebpackConfig (/Users/mgav/zagnetic_vue/zagnetic/node_modules/@vue/cli-service/lib/Service.js:261:34)

Since Package-Lock.json has tons of changes over those few hours during which the error developed (but Package.json is 100% unchanged), is it okay to just paste the 19-hour-old Package-Lock.json file over the current one, to fix the problem?

Any dangers in doing this?

My work was almost entirely CSS, but I did some basic things after the error occurred, like npm cache clean --force which may have resulted in some of the Package-Lock.json differences.

Package-lock.json is too big to post, but here is my package.json (identical in the working pushed-to-GitHub version and the current (un-pushed) version with the error:

{
  "name": "zagnetic",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "@headlessui/vue": "^1.4.1",
    "@tailwindcss/forms": "^0.3.3",
    "@tailwindcss/typography": "^0.4.1",
    "@vue/cli": "^5.0.0-beta.3",
    "core-js": "^3.6.5",
    "date-fns": "^2.23.0",
    "firebase": "^8.9.0",
    "tailwindcss": "^2.2.14",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^5.0.0-beta.3",
    "@vue/cli-plugin-router": "^5.0.0-beta.3",
    "@vue/cli-service": "^5.0.0-beta.3",
    "@vue/compiler-sfc": "^3.2.11",
    "autoprefixer": "^10.3.4",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1"
  }
}

I've been using "^5.0.0-beta.3" for almost a week, with no troubles whatsoever, so I don't think that's the problem.

Thanks so much for any help!

Answer 1

BEFORE trying to revert to the older package-lock.json, I ran npm update in Terminal and now everything works perfectly!

I'm not marking this as the correct answer, even though it fixed the underlying problem, because it doesn't actually address the question that was asked ("Is it okay to revert to an earlier version of package-lock.json, without doing harm?").

Answer 2

Webpack5 modifies the parameter scheme of of instantiating ProgressPlugin.

This link indicates that in webpack 5, the parameter can be HandlerFunction or ProgressPluginOptions.

The definition of ProgressPluginOptions is:

interface ProgressPluginOptions {
  activeModules: boolean
  dependencies: boolean
  dependenciesCount: number
  entries: boolean
  handler: HandlerFunction
  modules: boolean
  modulesCount: number
  percentBy: enum
  profile: enum
}

This link indicates that in webpack 4, the parameter can be HandlerFunction or ProgressPluginOptions. The definition of ProgressPluginOptions is:

interface ProgressPluginOptions {
  activeModules: boolean
  entries: boolean
  handler: HandlerFunction
  modules: boolean
  modulesCount: number
  profile: enum
}

If instantiate ProgressPlugin in the way of webpack 5 in the webpack 4 environment, such ValidationError: Progress Plugin Invalid Options error will appear.

In this commit, progress-webpack-plugin modified the way of instantiating ProgressPlugin and use webpack 5 way.

Therefore, either downgrade progress-webpack-plugin to v0.0.24, or upgrade webpack to 5.

If you want to upgrade webpack to version 5. Many modules support both webpack 4 and 5. You can check the dependency of each module on the webpack version through npm list webpack command. Check every package's package.json file in node_modules directory and view the version requirements of peerDependencies for webpack. Upgrade modules that only support webpack 4. Finally, the dependent version of webpack of the whole project will be unified.

Answer 3

I set the webpack version in package.json to the latest at the time of writing, "^5.55.1", which fixed this issue for me for now.

And also upgraded/updated both Node and npm, just to be on the safe side.

Answer 4

Go to the serve.js file located in node_modules@vue\cli-service\lib\commands and comment/remove the below lines of code:

// if (!process.env.VUE_CLI_TEST && options.devServer.progress !== false) {
    //   // the default progress plugin won't show progress due to infrastructreLogging.level
    //   webpackConfig
    //     .plugin('progress')
    //     .use(require('progress-webpack-plugin'))
    // }