GitLab - CI-CD - Node

NPM Force Resolutions

Solution to Javascript pipelines failing in the Build step using the proper preinstall script.

Problem

1. If JavaScript pipelines are suddenly failing then the Build step, then "npm-force-resolutions" has pushed a new version ( 0.0.4 ) that is broken.
2. In some applications, a package.json file may specify version 4.0 of a package, but a sub-dependency, or sub-sub-dependency, might require version 3.0. These sub-dependencies are managed through the respective package. Manual attempts to update it through package.json or package-lock.json are not reliable. Use npm-force-resolutions if sonarqube finds an issue with a sub-dependencies package version.

Solution

In order to force the use of the old version 0.0.3, users should update 'package.json' preinstall script to 'npx npm-force-resolutions@0.0.3'. For example, BattleDrill-Frontend .

How To Use Force Resolutions

To get an overview of the steps required, use the following documents:

• Package Documentation
• Hackernoon: How To Fix Security Vulnerabilities in NPM Dependencies in 3 Minutes

1. Update package.json with a field called 'resolutions'.

    "resolutions": {
        "hoek": "4.2.1"
    }

2. To patch package-lock.json before every npm install, add 'npm-force-resolutions' to the preinstall script.

    "scripts": {
    "preinstall": "npx npm-force-resolutions"
    }

3. Npm install can then be run normally.
4. Use 'npm ls xxxx' to verify package version.
5. NPM Package Management is shown below:

## Trouble Shooting Node Package Management Issues

### Sample Update Dependencies Scenario
#### a general pattern for getting a project npm dependencies up to date
##### be sure to have a fresh clean node_modules folder
- rm -r node_modules/
- npm install

##### list findings and vulnerability in packages
  - npm audit

##### attempt to fix any vulnerabilities without any major version changes
  - npm audit fix

##### list packages that my be candidates for upgrade
  - npm outdated

##### update all packages within minor version scope
  - npm update

##### upgrade a specific package version
  - the latest version for cli-service identified by looking up ate npmjs.org
  - npm install @vue/cli-service@4.5.3
  - npm outdated
    - based on results of npm outdated
    - npm install @vue/cli-service@4.5.3
    - npm install @vue/cli-plugin-babel@4.5.3
    - npm install @vue/cli-plugin-eslint@4.5.3
  - npm install @vue/eslint-config-prettier@6.0.0

### Forcing use of a specific package version - LAST RESORT
- ref https://www.npmjs.com/package/npm-force-resolutions


- Example
{
    "name": "hello-react",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "react": "16.13.0",
        "react-dom": "16.13.0",
        "react-scripts": "3.4.0"
    },
    "homepage": "/react-world",
    "scripts": {
        "preinstall": "npx npm-force-resolutions",
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test:unit": "react-scripts test --coverage --watchAll=false",
        "lint": "./node_modules/.bin/eslint . --ext js,ts,tsx",
        "eject": "react-scripts eject",
        "test:e2e": "npx cypress run",
        "test:e2e-ci": "npx cypress run --env configFile=pipeline"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "cypress": "^3.4.1",
        "eslint": "^6.8.0",
        "eslint-config-airbnb": "^17.1.1",
        "eslint-plugin-cypress": "^2.6.1",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.19.0"
    },
    "resolutions": {
        "acorn": "^7.1.1"
    },
    "lint-staged": {
        "*.{js,md,css,html}": [
            "prettier --trailing-comma es5 --single-quote --write",
            "git add"
        ]
    },
    "jest": {
        "collectCoverageFrom": [
            "src/**/*.{js,jsx}",
            "!<rootDir>/node_modules/",
            "!<rootDir>/src/index.js",
            "!<rootDir>/src/serviceWorker.js"
        ]
    }
}

VueJS and Package Aliases

A solution for ensuring a dependency check will support package aliases.

Problem

1. Dependency check does NOT support package aliases in the 'package-lock.json'.
2. The following screenshots shows the support package aliases as not supported by a dependency check:

Solution

Modify the product yaml and add the following switch to the dependency check command using the code below:

`DEPENDENCY_CHECK_EXTRA: "--nodeAuditSkipDevDependencies"`

This will disable the dependency check from trying to access npmjs.org, looking for audit issues on development dependencies, and prevent crashing for referencing aliases if the aliased package is a development dependency.

NPM and Yarn

A solution for a Node pipeline using Yarn as an alternative package manager.

Problem

Broke in CI but could not reproduce locally. CI is Drone-based, high volume disposable build envs. Generated package-lock.json are already gone.

NOTE

Pipelines that use Yarn to manage the package-lock.json may cause failures in dependency check.

Solution

Drop synp and generate package-lock.json for scan with npm directly from package.json rather than through yarn && synp. Yarn is still used for build. In addition, dependency-check parameters we adjusted according to Dependency Recommendations.