Resolving Component Governance and Dependabot issues (updating package lock.json)

Pre-requisites

• Ensure you have the right version of node and npm (as documented in CONTRIBUTING.md

Instructions

• Assume jquery-ui needs to be updated to a minimum of 1.13.2
  • Add a section in overrides within the package.json file as follows

  "overrides": {
      "jquery@<1.13.2": "1.13.2"

  • Next run npm install and this will ensure the package-lock.json is updated accordingly.
  • This will ensure any package using jquery-ui < 1.13.2 will be udpated to 1.13.2
  • Try to use < or the like, to ensure packages can continue to use the latest versions. I.e. we don't want a package that uses jquery 1.19.0 to be forced into using 1.13.2 A more real world example is, if the package that depends on [email protected] later updates the jquery version to 1.13.4 as part of addressing the dependabot issue, then our fix is no longer necessary.

Avoid

• Avoid updating package-lock.json manually
  • Tomorrow if we end up re-generating the package-lock.json again, then the past updates will be lost.
  • Hence give preference to using overrides when updating packages to resolve dependabot issues.
• Never install packages manually as dependencies or devDependencies to address CG or dependabot issues. I.e. always specify values in overrides.
  • Except when the package is already an item within the dependencies or devDependencies section.
  • Basically, alway use overrides in package.json to update nested dependencies.

Quirks

• Sometimes the package-lock.json could have an entry that needs to be updated without the < range.
  • Assume terser needs to be udpated to 5.14.2, and we have added the following section into package.json

  "overrides": {
      "terser@<5.14.2": "5.14.2"

  • If you inspect package-lock.json you might still find a reference to 5.12.2 as follows:

  "terser": {
      "version": "5.12.1",
      "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
      "integrity": "sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==",
      "dev": true,
      "requires": {
          "acorn": "^8.5.0",
          "commander": "^2.20.0",
          "source-map": "~0.7.2",
          "source-map-support": "~0.5.20"
      },

  • The only way to fix this is to remove the range specifier from the overrides as follows

  "overrides": {
      "terser": "5.14.2"

  • Then run npm i to cause an update of the package-lock.json file.
  • Then update overrides to contain the range specifier again

  "overrides": {
      "terser@<5.14.2": "5.14.2"