Can not findo module '@ionic-native/firebase';


#1

Hi,
I am trying use Firebase native plugin, but shows this error:

Cannot find module ‘@ionic-native/firebase’.

import { Firebase } from '@ionic-native/firebase';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({ 
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    private firebase: Firebase) {

  } 

} 

Look this error in this screen capture:

Captura%20de%20tela%20de%202018-04-11%2014-10-13

I used this to install plugin:

$ ionic cordova plugin add cordova-plugin-firebase
$ npm install --save @ionic-native/firebase

My ionic cordova plugin --list:

cordova-plugin-device 2.0.1 “Device”
cordova-plugin-firebase 0.1.25 “Google Firebase Plugin”
cordova-plugin-ionic-keyboard 2.0.5 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 1.2.0 “cordova-plugin-ionic-webview”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-whitelist 1.3.3 “Whitelist”


#2

Not sure if it helps but try to import the core before.

Also the plugin is there in the actual folder?

You can try to remove and install again the plugin

In the module the plugin is imported correctly?


#3

I tried this too, same problem.

Yes, in “plugins” folder.

I did three times

Same problem.

Can you try creating test project and import this native plugin?


#4

What’s your package.json?


#5

This is my package.json.
Thanks for reply.

{
  "name": "push",
  "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"
  },
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/pro": "1.0.20",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.1.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-firebase": "^0.1.25",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-firebase": {}
    },
    "platforms": [
      "android"
    ]
  }
}

#6

It’s strange that Component is also being underlined. Are we seeing the first line of the file, or are there other imports?

Another debugging technique: delete node modules and rerun npm install.


#7

Create a line like this, but for the firebase native shim, and run npm update.


#8

I inserted this line:
@ionic-native/firebase”: “0.1.25”,

(0.1.25 is the lastest version)

The npm update returned:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @ionic-native/firebase@0.1.25
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

#9

Latest version is 4.7.0, see here: https://github.com/ionic-team/ionic-native/blob/master/CHANGELOG.md


#10

Sorry! I made now:

@ionic-native/firebase”: “4.7.0”,

Solved the problem. Thanks.
Can you explain?


#11

You know how you sometimes need an adapter to plug a cord into a socket? Your Ionic app is the socket, the Cordova plugin is the cord, and the ionic native shim is the adapter. You were missing the adapter.


#12

Excellent way to explain. :handshake: Thank you again. I understood.