Npm install removing other packages in Ionic (I suspect its Yarn)

Ionic Framework ionic-v3
1

Good day,

I recently had to install Yarn (via Homebrew) on my machine for a project I’m working on. After I installed Yarn and went back to my Ionic project, upon trying to install firebase into my project: npm install --save firebase I get the following: + firebase@4.3.1 added 22 packages and removed 35 packages

I then see that some other packages in in my app.module.ts file are showing a red line saying [ts] Cannot find module '@ionic-native/social-sharing'. This happens for 3 other packages too. I don’t know what else is affected.

How can I fix this from happening? I tried to uninstall Yarn via homebrew: brew uninstall yarn but the issue still persists!

Here is my system info:

npm -v5.4.2

node -v6.11.2

ionic info in my project:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.1
    Node       : v6.11.2
    npm        : 5.4.2
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
2

maybe try installing firebase again?

3

Hi there,

I’m afraid that is not the solution.

4

Can you show your package.json? always add packages with --save if you need them in your application. If you did, try removing your node_modules directory and running npm install again.

5 
{
  "name": "app-name",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "config": {
    "ionic_copy": "./config/copy.config.js"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/admob-free": "^4.1.0",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/in-app-browser": "^4.2.1",
    "@ionic-native/media": "^4.2.1",
    "@ionic-native/social-sharing": "^4.1.0",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic-native/streaming-media": "^4.1.0",
    "@ionic-native/three-dee-touch": "^4.2.1",
    "@ionic/storage": "2.0.1",
    "ajv": "^5.2.2",
    "animate.css": "^3.5.2",
    "com.rd11.remote-controls": "https://github.com/shi11/RemoteControls",
    "cordova-plugin-3dtouch": "^1.3.5",
    "cordova-plugin-admob-free": "~0.10.0",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-file": "^4.3.3",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-media": "^3.0.1",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.2",
    "cordova-plugin-whitelist": "1.3.1",
    "cordova-plugin-x-socialsharing": "^5.2.0",
    "es6-promise-plugin": "^4.1.0",
    "firebase": "^4.3.1",
    "font-awesome": "^4.7.0",
    "ionic-angular": "3.6.0",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "onesignal-cordova-plugin": "^2.2.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "2.1.3",
    "@ionic/cli-plugin-cordova": "1.6.2",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "ionic": "3.9.2",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "platforms": [],
    "plugins": {
      "com.rd11.remote-controls": {},
      "cordova-plugin-admob-free": {},
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-3dtouch": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-media": {
        "MICROPHONE_USAGE_DESCRIPTION": " "
      }
    }
  }
}
6

i would delete your node_modules directory and reinstall them, fixes issues with npm 9 out of 10 of times :slight_smile:

7

Hi, I’m afraid that is not working either. When I delete node modules and try installing them again, I get the following errors:

npm ERR! path /Users/user/.npm/_cacache/tmp/git-clone-c543219d/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/Users/user/.npm/_cacache/tmp/git-clone-c740929d/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
8

I would recommend taking this opportunity to install nvm. It makes managing (and cleaning) node installations much smoother.

9

hi
add /ngx at the end of your module
‘@ ionic-native/social-sharing/ngx’
and the same for 3 other packages