Npm unfixable problems after update to Ionic CLI 6.12.4

Ionic Framework
1

I just updated my Ionic CLI from 6.12.3 to 6.12.4 and after that I got some unfixable vulnerabilities on the npm stack:

ini  <1.3.6
Prototype Pollution - https://npmjs.com/advisories/1589
fix available via `npm audit fix`
node_modules/@angular/cli/node_modules/ini
node_modules/@schematics/update/node_modules/ini
node_modules/ini
  @angular/cli  6.2.9 || 7.1.0-beta.0 - 9.1.12 || 10.0.0-next.0 - 10.2.0 || 11.0.0-next.0 - 11.0.4 || 11.1.0-next.0 - 11.1.0-rc.0
  Depends on vulnerable versions of @schematics/update
  Depends on vulnerable versions of ini
  node_modules/@angular/cli
  @schematics/update  0.11.0-beta.0 - 0.901.12 || 0.1000.0-next.0 - 0.1002.0 || 0.1100.0-next.0 - 0.1100.4 || 0.1101.0-next.0 - 0.1101.0-rc.0
  Depends on vulnerable versions of ini
  node_modules/@schematics/update

serialize-javascript  <3.1.0
Severity: high
Remote Code Execution - https://npmjs.com/advisories/1548
fix available via `npm audit fix`
node_modules/serialize-javascript
  copy-webpack-plugin  4.3.0 - 5.1.1
  Depends on vulnerable versions of serialize-javascript
  node_modules/copy-webpack-plugin
    @ionic/angular-toolkit  2.2.0 - 2.3.0
    Depends on vulnerable versions of copy-webpack-plugin
    node_modules/@ionic/angular-toolkit

6 vulnerabilities (3 low, 3 high)

I tried to fix them running both npm audit fix and sudo npm audit fix, but in boths cases the result is the same:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: com.dooliz.eazytablepay@0.0.1
npm ERR! Found: @angular/compiler-cli@9.1.13
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"~9.1.6" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler-cli@"^11.0.0 || ^11.1.0-next" from @angular-devkit/build-angular@0.1101.2
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^0.1101.2" from the root project
npm ERR!   peer @angular-devkit/build-angular@">=0.800.0" from @ionic/angular-toolkit@2.3.3
npm ERR!   node_modules/@ionic/angular-toolkit
npm ERR!     dev @ionic/angular-toolkit@"^2.2.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This the content of the report file generated:

# npm resolution error report

2021-02-03T14:49:34.413Z

While resolving: com.dooliz.eazytablepay@0.0.1
Found: @angular/compiler-cli@9.1.13
node_modules/@angular/compiler-cli
  dev @angular/compiler-cli@"~9.1.6" from the root project

Could not resolve dependency:
peer @angular/compiler-cli@"^11.0.0 || ^11.1.0-next" from @angular-devkit/build-angular@0.1101.2
node_modules/@angular-devkit/build-angular
  dev @angular-devkit/build-angular@"^0.1101.2" from the root project
  peer @angular-devkit/build-angular@">=0.800.0" from @ionic/angular-toolkit@2.3.3
  node_modules/@ionic/angular-toolkit
    dev @ionic/angular-toolkit@"^2.2.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "@angular/compiler-cli",
    "version": "9.1.13",
    "whileInstalling": {
      "name": "com.dooliz.eazytablepay",
      "version": "0.0.1",
      "path": "/Users/victorespina/Work/Fuentes/NOI/DEV/ds/cfp"
    },
    "location": "node_modules/@angular/compiler-cli",
    "dependents": [
      {
        "type": "dev",
        "name": "@angular/compiler-cli",
        "spec": "~9.1.6",
        "from": {
          "location": "/Users/victorespina/Work/Fuentes/NOI/DEV/ds/cfp"
        }
      }
    ]
  },
  "edge": {
    "type": "peer",
    "name": "@angular/compiler-cli",
    "spec": "^11.0.0 || ^11.1.0-next",
    "error": "INVALID",
    "from": {
      "name": "@angular-devkit/build-angular",
      "version": "0.1101.2",
      "whileInstalling": {
        "name": "com.dooliz.eazytablepay",
        "version": "0.0.1",
        "path": "/Users/victorespina/Work/Fuentes/NOI/DEV/ds/cfp"
      },
      "location": "node_modules/@angular-devkit/build-angular",
      "dependents": [
        {
          "type": "dev",
          "name": "@angular-devkit/build-angular",
          "spec": "^0.1101.2",
          "from": {
            "location": "/Users/victorespina/Work/Fuentes/NOI/DEV/ds/cfp"
          }
        },
        {
          "type": "peer",
          "name": "@angular-devkit/build-angular",
          "spec": ">=0.800.0",
          "from": {
            "name": "@ionic/angular-toolkit",
            "version": "2.3.3",
            "whileInstalling": {
              "name": "com.dooliz.eazytablepay",
              "version": "0.0.1",
              "path": "/Users/victorespina/Work/Fuentes/NOI/DEV/ds/cfp"
            },
            "location": "node_modules/@ionic/angular-toolkit",
            "dependents": [
              {
                "type": "dev",
                "name": "@ionic/angular-toolkit",
                "spec": "^2.2.0",
                "from": {
                  "location": "/Users/victorespina/Work/Fuentes/NOI/DEV/ds/cfp"
                }
              }
            ]
          }
        }
      ]
    }
  },
  "peerConflict": null,
  "strictPeerDeps": false,
  "force": false
}

and this is my Ionic info:

Ionic:

   Ionic CLI                     : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.1101.2
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 7 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.1
   native-run (update available: 1.3.0)   : 0.2.7

System:

   Android SDK Tools : 26.1.1 (/Users/victorespina/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v12.18.0 (/usr/local/bin/node)
   npm               : 7.5.2
   OS                : macOS Catalina
   Xcode             : Xcode 12.2 Build version 12B45b

I’ve already searched google and this forum for some clue on how to fix this, but no luck so far. I also deleted the node_modules folder and ran npm install but it fails with the same 6 vulnerabilities.

2

Additionaly, now I can’t add custom plugins (action that was working perfectly fine before upgrading):

$ cordova plugins add plugins_src/HelloWorld
CordovaError: Could not determine package name from output:
added 1 package, and audited 1930 packages in 5s

2 packages are looking for funding
  run `npm fund` for details

6 vulnerabilities (3 low, 3 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
    at getTargetPackageSpecFromNpmInstallOutput (/usr/local/lib/node_modules/cordova/node_modules/cordova-fetch/index.js:91:15)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  jse_shortmsg: 'Could not determine package name from output:\n' +
    'added 1 package, and audited 1930 packages in 5s\n' +
    '\n' +
    '2 packages are looking for funding\n' +
    '  run `npm fund` for details\n' +
    '\n' +
    '6 vulnerabilities (3 low, 3 high)\n' +
    '\n' +
    'To address all issues, run:\n' +
    '  npm audit fix\n' +
    '\n' +
    'Run `npm audit` for details.',
  jse_info: {}
}

This is happening with all my custom plugins on this project.

3

I can’t even start a blank new project:

$ ionic start

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: Angular

Every great app needs a name! 😍

Please enter the full name of your app. You can change this at any time. To
bypass this prompt next time, supply name, the first argument to ionic start.

? Project name: cfp2

Let's pick the perfect starter template! 💪

Starter templates are ready-to-go Ionic apps that come packed with everything
you need to build your app. To bypass this prompt next time, supply template,
the second argument to ionic start.

? Starter template: blank
✔ Preparing directory ./cfp2 in 1.97ms
✔ Downloading and extracting blank starter in 375.34ms
? Integrate your new app with Capacitor to target native iOS and Android? No

Installing dependencies may take several minutes.

  ──────────────────────────────────────────────────────────────────────────────

         Ionic Advisory, tailored solutions and expert services by Ionic

                             Go to market faster 🏆
                    Real-time troubleshooting and guidance 💁
        Custom training, best practices, code and architecture reviews 🔎
      Customized strategies for every phase of the development lifecycle 🔮

                        👉  https://ion.link/advisory  👈

  ──────────────────────────────────────────────────────────────────────────────


> npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: cfp2@0.0.1
npm ERR! Found: @angular/compiler@11.0.9
npm ERR! node_modules/@angular/compiler
npm ERR!   dev @angular/compiler@"~11.0.5" from the root project
npm ERR!   peer @angular/compiler@"11.0.9" from @angular/compiler-cli@11.0.9
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     dev @angular/compiler-cli@"~11.0.5" from the root project
npm ERR!     peer @angular/compiler-cli@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1100.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.1.1" from @angular/localize@11.1.1
npm ERR! node_modules/@angular/localize
npm ERR!   peerOptional @angular/localize@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~0.1100.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/victorespina/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/victorespina/.npm/_logs/2021-02-03T15_40_01_940Z-debug.log
[ERROR] An error occurred while running subprocess npm.
        
        npm i exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more
        information.
$
4

Well, I tried this command:

npm audit fix --legacy-peer-deps

and it seems have fixed all pending vulnerabilities, but I can’t still add my custom cordova plugin.

Will try to reinstall cordova to see what happens.

1 Like
5

I would recommend downgrading npm from 7 to 6, looks like it have a few problems on angular projects, angular CLI in example doesn’t allow to create new projects on npm 7, but a few other of their packages have problems too.
Not entirely an angular problem, it’s part of npm 7 problem too.