Ionic 4: Object(…) is not a function


#1

Hi,

I’m having some troubles when running ionic serve . The page stays blank and I get the following in my console.

index.js:739 Uncaught TypeError: Object(...) is not a function
    at index.js:739
    at Object../node_modules/@ionic-native/onesignal/index.js (index.js:1021)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app.module.ts (app.component.ts:15)
    at __webpack_require__ (bootstrap:81)
    at Object../src/main.ts (environment.ts:17)
    at __webpack_require__ (bootstrap:81)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:81)
    at checkDeferredModules (bootstrap:43)
import { OneSignal } from "@ionic-native/onesignal";

providers: [
        ...
        OneSignal,
        ...
    ]

What is the problem? I found this error every time I try to install a @ionic-native plugin


Ionic Native Object(…) is not a function
#2

Only the 7 or 8 times I give the exact same answer on the forum…anyhow use /ngx with Ionic Native v5-beta

import { OneSignal } from "@ionic-native/onesignal/ngx";

Ionic 4 PayPal causes TypeError: Object(...) is not a function on implementation
#3

@reedrichards I have "@ionic-native/core": "5.0.0-beta.15"

If I use import { OneSignal } from "@ionic-native/onesignal/ngx"; I receive the following error : Module not found: Error: Can't resolve '@ionic-native/onesignal/ngx'


#4

As always, did you inject it as a provider in your app.module ?


#5

yes, I did

import { OneSignal } from "@ionic-native/onesignal/ngx";

providers: [
        ...
        OneSignal,
        ...
    ]

#6

Mmmh should work, I double checked there is an implementation https://github.com/ionic-team/ionic-native/blob/v5/src/%40ionic-native/plugins/onesignal/index.ts

Did you also npm install @ionic-native/core/beta?

P.S.: I just link this issue because I guess there are related Onesignal not work in ionic 4


#7

no , I don’t have @ionic-native/core/beta , I cannot find this package and npm install @ionic-native/core/beta doesn’t work.

This is what I have

  "dependencies": {
    "@angular/common": "~6.1.0",
    "@angular/core": "~6.1.0",
    "@angular/forms": "~6.1.0",
    "@angular/http": "~6.1.0",
    "@angular/platform-browser": "~6.1.0",
    "@angular/platform-browser-dynamic": "~6.1.0",
    "@angular/router": "~6.1.0",
    "@ionic-native/core": "5.0.0-beta.15",
    "@ionic-native/in-app-browser": "5.0.0-beta.15",
    "@ionic-native/onesignal": "^4.12.2",
    "@ionic-native/splash-screen": "5.0.0-beta.15",
    "@ionic-native/status-bar": "5.0.0-beta.15",
    "@ionic/angular": "^4.0.0-beta.5",
    "@ionic/storage": "^2.1.3",
    "@types/lodash": "^4.14.116",
    "chart.js": "^2.7.2",
    "cordova-android": "7.1.1",
    "cordova-ios": "^4.5.5",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.7",
    "lodash": "^4.17.10",
    "onesignal-cordova-plugin": "^2.4.3",
    "rxjs": "6.2.2",
    "rxjs-compat": "^6.3.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.7.1",
    "@angular-devkit/build-angular": "~0.7.1",
    "@angular-devkit/core": "~0.7.1",
    "@angular-devkit/schematics": "~0.7.1",
    "@angular/cli": "~6.1.0",
    "@angular/compiler": "~6.1.0",
    "@angular/compiler-cli": "~6.1.0",
    "@angular/language-service": "~6.1.0",
    "@ionic/lab": "^1.0.0",
    "@ionic/ng-toolkit": "^1.0.0",
    "@ionic/schematics-angular": "^1.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^4.4.4",
    "husky": "^0.14.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "tslint": "^5.11.0",
    "typescript": "~2.9.2"
  },

#8

If use you Ionic v4, use should strictly only use ionic native v5 beta. In your package.json I see that one signal is on v4.12.2 which is not correct, you should upgrade it to v5.0.0-beta.15


#9

Ohh thank you, didn’t notice that… You saved me with this. I had that problem with many plugins.

I upgraded to v5.0.0-beta.15 and now I could import OneSignal from @ionic-native/onesignal/ngx and declare it into my providers … I will go further with the implementation, hope it will work.

Thank you again and have a nice day


#10

Cool happy to hear it worked out


#11

I tried the following:

import { PayPal } from '@ionic-native/paypal/ngx';

I get the following response:

Cannot find module '@ionic-native/paypal/ngx'

My package is set to:

"@ionic-native/core": "5.0.0-beta.15"

I have also tried to add it as a provider in my app.module.ts but it’s the same problem:

import { PayPal } from '@ionic-native/paypal/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    PayPal,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

Did I do that wrong?


#12

Ok, got it.
I had to manually go into package.json and update the paypal to the beta version:

"@ionic-native/paypal": "5.0.0-beta.15",

then run npm install. Seems to work now.