CODEWITHSUNDEEP
firebasevue.jsnpmvuejs3
Venkatesh A
Venkatesh A

Reputation: 2474

Firebase NPM package fails to compile on vue 3

Installed firebase as an npm package and imported it into the vue project. On trying to run the vue project I get the following error

ERROR  Failed to compile with 1 error                                                                                                 01:06:50

This dependency was not found:

* https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js in ./node_modules/firebase/firebase-messaging.js

To install it, you can run: npm install --save https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js

package.json looks like this

{
  "name": "vue-push-notif",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "firebase": "^9.0.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

created a firebase.js inside src like below

import firebase from 'firebase/app'
import 'firebase/firebase-messaging'

var config = {
    apiKey: "<key>",
    authDomain: "<domain>",
    databaseURL: "<url>",
    projectId: "<id>",
    storageBucket: "<bucket>",
    messagingSenderId: "<id>",
    appId: "<id>",
    measurementId: "<id>"
};

firebase.initializeApp(firebaseConfig)

export default firebase.messaging()

and main.js is below

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import firebaseMessaging from './firebase.js'

const app = createApp(App)

app.config.globalProperties.$messaging = firebaseMessaging

app.use(store).use(router).mount('#app')

app.mount('#app')

It looks like that the vue compiler doesnt take it as a remote resource and looks for it locally. Maybe the issue is with the vue compiler??

Thanks for the help...!!

Upvotes: 0

Views: 820

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50830

You are not using the new Firebase Modular SDK syntax. You would have to change your imports to:

import { initializeApp } from 'firebase/app'
import { getMessaging } from 'firebase/messaging'

const app = initializeApp(firebaseConfig)

const messaging = getMessaging(app)

export { messaging }

You can read more about that at: Set up a Javascript Firebase cloud messaging client

Upvotes: 1

Related Questions