'firebase is not being recognized in Unity webGL Build

I have set up a test project in order to test Firebase with unity webGL builds. I have created a *.jslib plugin to keep my js functions in there :

mergeInto(LibraryManager.library, {

  GetJSON: function (path, objectName, callback, fallback) {
        var parsedPath = Pointer_stringify(path);
        var parsedObjectName= Pointer_stringify(objectName);
        var parsedCallback = Pointer_stringify(callback);
        var parsedFallback = Pointer_stringify(fallback);

        try{
        firebase.database().ref(parsedPath).once('value').then(function(snapshot) {
            window.unityInstance.SendMessage(parsedObjectName, parsedCallback , JSON.stringify(snapshot.val()));


        });

        } catch(error){
            window.unityInstance.SendMessage(parsedObjectName, parsedFallback, "There was an error: " + error.message);
            
        }
        }
});

After building and running, I add my Firebase config snippet into the index.html file(I have hidden the actual keys on this snippet):

   <script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-analytics.js";
        // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries

        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "key",
            authDomain: "domain",
            projectId: "id",
            storageBucket: "bucket",
            messagingSenderId: "senderID",
            appId: "appId",
            measurementId: "measurementId"
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const analytics = getAnalytics(app);
    </script>

In unity, I am testing this by calling the GetJSON function, and I have a callback, and a fallback method:

 void Start()
    {
        text.text = "Start worked";
        GetJSON(path: "example", gameObject.name, callback: "OnRequestSuccess", fallback: "OnRequestFailed");
    }

    public void OnRequestSuccess(string data)
    {
        text.color = Color.green;
        text.text = data;
    }

    public void OnRequestFailed(string error)
    {
        text.color = Color.red;
        text.text = error;
    }

After I have built and run my webGL project, and updated the index.html file with the proper configurations, the text turns red (Which means the OnRequestFailed() was called) and it says: "There was an error: firebase is not defined". Which means, it does not recognize the firebase when I use it on the *.jslib plugin. Where should the firebase be defined exactly? Because I am defining it in my index.html, or at least I think so?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source