Firebase is already defined in the global scope. Please make sure Firebase library is only loaded once

Viewed 5266

I am getting this alert 2 times in the console, I check the network and when loading the home, it registers two identical events, indicated in the image, the only difference between one and the other is the versions, which one is 6.6.1 that It is the one I currently have, and 7.15.4 (Which I do not have installed in my project, nor do I have any configuration with it, I looked for it in the whole project, and it is neither in package.json nor in the lock.json, absolutely nothing about that version, I want you to stop showing me that warning and not that.

enter image description here

The only settings that I have that call the firebase are this file

importScripts('https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.6.1/firebase-messaging.js');

firebase.initializeApp({
messagingSenderId: "xxxxxxxxxxx"
});

const messaging = firebase.messaging();

console.log('Handling background message')
messaging.setBackgroundMessageHandler(function(payload) {
 console.log('Handling background message ', payload);

 return self.registration.showNotification(payload.data.title, {
    body: payload.data.body,
    icon: payload.data.icon,
    data: {
        click: payload.data.click,
        userId: payload.data.userId,
        pushId: payload.data.pushId,
    }
});
});

self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(self.clients.openWindow(event.notification.data.click));
})

And this one, which is in the index.html

<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-messaging.js"></script>  
<script>
    try {
        window
            .firebase
            .initializeApp({
                apiKey: "%REACT_APP_FIREBASE_ANALYTICS_API_KEY%",
                authDomain: "%REACT_APP_FIREBASE_ANALYTICS_AUTH_DOMAIN%",
                databaseURL: "%REACT_APP_FIREBASE_ANALYTICS_DATABASE_URL%",
                projectId: "%REACT_APP_FIREBASE_ANALYTICS_PROJECT_ID%",
                storageBucket: "%REACT_APP_FIREBASE_ANALYTICS_STORAGE_BUCKER%",
                messagingSenderId: "%REACT_APP_FIREBASE_ANALYTICS_MESSAGING_SENDER_ID%",
                appId: "%REACT_APP_FIREBASE_ANALYTICS_APP_ID%",
                measurementId: "%REACT_APP_FIREBASE_ANALYTICS_MEASUREMENT_ID%"
            })
    } catch (e) {
        console.error(e)
    }
</script>
1 Answers

I'm not completely sure of how you are loading your files, but if they are independent of each other, both

<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>

and

importScripts('https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js');

are fetching firebase. You should only keep one if both files are being used.

Related