TypeError: __webpack_require__.i(...) is not a function at Firebase, FcmProvider

I recently added Firebase dependency to my ionic/cordova app
followed this guide:


This error happens everytime when I try to run ionic serve or build on iOS/android platform

error logs from the image above:

Error: Uncaught (in promise): TypeError: __webpack_require__.i(...) is not a function
TypeError: __webpack_require__.i(...) is not a function
    at Firebase.onNotificationOpen (http://localhost:8100/build/main.js:98335:148)
    at FcmProvider.listenToNotifications (http://localhost:8100/build/main.js:93277:36)
    at http://localhost:8100/build/main.js:144884:17
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
    at Object.onInvoke (http://localhost:8100/build/main.js:4510:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:8911)
    at r.run (http://localhost:8100/build/polyfills.js:3:4140)
    at http://localhost:8100/build/polyfills.js:3:13731
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9655)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4501:37)
    at c (http://localhost:8100/build/polyfills.js:3:13190)
    at http://localhost:8100/build/polyfills.js:3:13762
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9655)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4501:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9576)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:4831)
    at o (http://localhost:8100/build/polyfills.js:3:1891)
    at HTMLDocument.invoke (http://localhost:8100/build/polyfills.js:3:10673)

package.json

"@angular/cli": "^7.3.6",
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/fire": "^5.1.2",
"cordova-android": "^6.4.0",
"cordova-browser": "~5.0.4",
"cordova-ios": "4.5.5",
"ionic-angular": "3.5.0",
"@ionic-native/firebase": "^5.0.0",
"cordova-plugin-firebase": "^2.0.5",
"firebase": "^4.6.0",
"angularfire2": "^5.0.0-rc.3",
"@ionic-native/fcm": "^5.3.0",
"cordova-plugin-fcm-with-dependecy-updated": "^2.4.0",

Any help would be appreciated, thank you ~

Finally I figured it out…
downgrade
"@ionic-native/push": "^5.3.0"
to
"@ionic-native/push": "^4.20.0"

you have to use the version @ionic-native/5.x.x for ANGULAR and @ionic-native/4.x.x for ANGULAR-IONIC.
Check your project type on your ionic.config.json file

For those facing a similar but not exact issue, and are here because of Google, see this…

webpack_require.e not a function errors in Ionic 3 are due to lazy loading usually.

This post has the details (thanks @derecto)

The key is for the rootPage ( not necessarily other pages )

  1. that if you are using lazy loading, you only reference it by string and
  2. that you remove HomePage or HomePageModule from app.module.ts imports.
  3. run npm run clean – this part is important
  4. now npm start will work.