Ionic 3 can't use any native plugins

HI, I am trying to add a plugin to my existing ionic 3 app and do exactly like it is written here.

After trying to execute the code

this.toast.show(`I'm a toast`, '5000', 'center').subscribe(
  toast => {
    console.log(toast);
  }
);

I am getting an error

ERROR TypeError: Object(...) is not a function
    at Toast.show (index.js:28)

I tried:

  1. to include a plugin like that
    import { Toast } from '@ionic-native/toast/ngx';
  2. to install new rxjs
    npm install rxjs@6 rxjs-compat@6 --save

and also put it to app.modules.ts and adding it to providers array. It still produces the error above.

My ionic info:

cli packages: (C:\Users\Kesselring\AppData\Roaming\npm\node_modules)
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:
    cordova (Cordova CLI) : 7.1.0

local packages:
    @ionic/app-scripts : 3.2.1
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:
    Android SDK Tools : 26.1.1
    Node              : v8.9.3
    npm               : 5.3.0
    OS                : Windows 7

Environment Variables:
    ANDROID_HOME : D:\Android\Sdk

Misc:
    backend : pro

This is package.json

 "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/badge": "^4.7.0",
    "@ionic-native/core": "4.5.2",
    "@ionic-native/device": "^5.0.0",
    "@ionic-native/diagnostic": "^5.0.0",
    "@ionic-native/document-viewer": "^4.10.0",
    "@ionic-native/facebook": "^4.15.0",
    "@ionic-native/file": "^4.10.0",
    "@ionic-native/file-opener": "^4.11.0",
    "@ionic-native/file-transfer": "^4.10.0",
    "@ionic-native/geolocation": "^5.0.0",
    "@ionic-native/in-app-browser": "^4.9.1",
    "@ionic-native/keyboard": "^4.12.0",
    "@ionic-native/mixpanel": "^4.18.0",
    "@ionic-native/native-page-transitions": "^4.7.0",
    "@ionic-native/onesignal": "^4.17.0",
    "@ionic-native/splash-screen": "4.5.2",
    "@ionic-native/status-bar": "4.5.2",
    "@ionic-native/toast": "^5.0.0",
    "@ionic/app-scripts": "^3.2.1",
    "@ionic/pro": "^1.0.16",
    "@ionic/storage": "2.1.3",
    "@types/cordova": "0.0.34",
    "@types/moment-timezone": "^0.5.9",
    "android-versions": "^1.4.0",
    "com.telerik.plugins.nativepagetransitions": "~0.6.5",
    "cordova-android": "^7.0.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-badge": "~0.8.7",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-document-viewer": "~0.9.10",
    "cordova-plugin-facebook4": "~3.1.0",
    "cordova-plugin-file": "~6.0.1",
    "cordova-plugin-file-opener2": "~2.0.19",
    "cordova-plugin-file-transfer": "~1.7.1",
    "cordova-plugin-geolocation": "git+https://github.com/chemerisuk/cordova-plugin-geolocation.git",
    "cordova-plugin-inappbrowser": "^2.0.2",
    "cordova-plugin-ionic": "^5.0.3",
    "cordova-plugin-ionic-webview": "^2.2.0",
    "cordova-plugin-mixpanel": "^4.2.0",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.1",
    "cordova-plugin-x-toast": "^2.7.2",
    "cordova.plugins.diagnostic": "^4.0.10",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "moment": "^2.20.1",
    "moment-timezone": "^0.5.21",
    "onesignal-cordova-plugin": "~2.3.3",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "typescript": "2.4.2"
  },

I cannot afford to transition the whole app to Ionic 4. How to use these plugins? Please help.

Try downgrading the @ionic-native/toast plugin to something with 4.x.x
That’s how I fixed my app which used geolocation. I used 4.12.0

1 Like

I was facing the same issue, because of the update of ionic 4 compatible plugins in @ ionic-native GitHub repo. You need to install older version using: npm install --save @ ionic-native /plugin_of_your_choice@4.20.0

Remember - don’t play with the number after, go to the repo and check for versions, and install accordingly. I

I was facing the same issue, and it stopped after I followed the above-mentioned solution. You can also see :https://stackoverflow.com/questions/54361396/ionic-3-error-install-native-plugin-after-ionic-4-release

2 Likes

@samsep10l @muthukumar02 thank you for your answers. Your answers are resolving the problem.
I tried it with Toast and it does work I want to thank you and shake your hands
Just to state here - what I did is:

  1. npm uninstall @ionic-native/toast
  2. When to github https://github.com/ionic-team/ionic-native and clicked releases tab. As you said the version I need is 4.20.0
  3. Then I did npm install @ionic-native/toast@4.20.0
  4. Imported it in app.module.ts import { Toast } from ‘@ionic-native/toast’; and added Toast to providers.
  5. Imported Toast to page controller and in constructor - then it worked out on the device and at IonicDevApp.

Hope it will also help someone.

3 Likes