Uncaught ReferenceError: firebase is not defined vue js

Question

I have a subscribe button I've written a small function but am getting the error above

methods: {
    subscribe(){
        firebase.messaging.requestPermission()
                          .then(() => {
                              console.log('Notification permission granted.');
                              return this.messaging.getToken();
                          })
    }
}

Button

<button id="subscribe" @click="subscribe">Subscribe</button>

It looks like you haven't integrated the FCM JavaScript SDK correctly. — Doug Stevenson
– Doug Stevenson, Commented Jan 19, 2020 at 21:48

evolon · Accepted Answer · 2020-01-19 22:17:06Z

1

1.Install firebase to your project:

npm install --save firebase

2.Then add the messaging module in your project. E.g. index.js file.

import 'firebase/messaging'

3.Then use the messaging in your component:

import firebase from 'firebase';

...

methods: {
    subscribe () {
        const messaging = firebase.messaging();
        messaging.requestPermission().then(
            ...
        );
    }
}

Just remember that the Firebase SDK is modular, Although you reference everything from the firebase package, If you don't include the referencing module (messaging in this case) in your final bundle, the firebase will complain about it missing.

Take a look at here for more information: https://firebase.google.com/docs/web/setup

edited Jan 19, 2020 at 22:17

answered Jan 19, 2020 at 22:06

evolon

1,6261 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mimi kiduchu Over a year ago

am getting the error TypeError: firebase__WEBPACK_IMPORTED_MODULE_9___default.a.messaging.requestPermission is not a function"

evolon Over a year ago

Did you do the 2nd step? And don't forget that messaging is a function not a property. So you should do it like this: firebase.messaging().requestPermission()

evolon Over a year ago

And did you try firebase.messaging().requestPermission() instead of firebase.messaging.requestPermission()?

mimi kiduchu Over a year ago

firebase.messaging().requestPermission() is throwing an error Deprecated symbol used, consult docs for better alternative

evolon Over a year ago

That's because requestPermission() method is deprecated. Take a look at here: firebase.google.com/docs/reference/js/…

Collectives™ on Stack Overflow

Uncaught ReferenceError: firebase is not defined vue js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related