how to solve Error: Cannot instantiate firebase-messaging.js - be sure to load firebase-app.js first. in react app

0
votes

I had this config which was working perfectly but when I added firebase-messaging it throws an error that firebase-app.js has to be loaded first

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/database";
import "firebase/storage";
import "firebase/functions";
import "firebase/firebase-messaging";  ---> adding this line brings the error
var config = {
  apiKey: "AIzaSyCrlr_yryEFERGXizzrjoPTB7biow",
  authDomain: "123.firebaseapp.com",
  databaseURL: "https://123.firebaseio.com",
  projectId: "123",
  storageBucket: "123.appspot.com",
  messagingSenderId: "5025880",
  appId: "1:30029661880:web:b5363d4ecddf3c32e4d64d",
  measurementId: "G-DUJNZERGRQ",
};
if (!firebase.apps.length) {
  firebase.initializeApp(config);
}
export default firebase;
export const auth = firebase.auth();
export const db = firebase.firestore();
export const database = firebase.database();
export const storage = firebase.storage();
export const functions=firebase.functions();
export const messaging = firebase.messaging();

everything else was working before, auth, firestore, everything. I have tried adding import "firebase/firebase-app" at the top but this still does not work.
I have also upgraded the firebase sdk to the latest 7.15.4 just to be sure it's not a previous sdk bug.
What am I doing wrong

1
reactjsfirebasefirebase-cloud-messaging

1 Answers

0
votes

Turns out I was importing the wrong script. It should not be import "firebase/firebase-messaging";

This is what should be imported import "firebase/messaging";