FirebaseWebGL
FirebaseWebGL copied to clipboard
rotolonico
error : Firebase is not defined
Hello Guys, I have an issue. I have implemented everything correctly but still there is an error in my webGL build which says that "there was an error: firebase is not defined". I did everything as in the video. What should i do to solve this problem?
Dude, it resolved by itself. I did not do anything 🙂 I think it is about firebase version.
Outlookhttp://aka.ms/weboutlook'tan gönderildi
Gönderen: GaHyungLee @.> Gönderildi: 23 Mart 2022 Çarşamba 16:02 Kime: rotolonico/FirebaseWebGL @.> Bilgi: ahmetteksas @.>; Author @.> Konu: Re: [rotolonico/FirebaseWebGL] error : Firebase is not defined (Issue #13)
i think different version make error firebase released v9 firebase
— Reply to this email directly, view it on GitHubhttps://github.com/rotolonico/FirebaseWebGL/issues/13#issuecomment-1076349947, or unsubscribehttps://github.com/notifications/unsubscribe-auth/APB3CA4ADKJR36SW246PVWTVBMI6BANCNFSM5PIGFATQ. You are receiving this because you authored the thread.Message ID: @.***>
Dude, it resolved by itself. I did not do anything 🙂 I think it is about firebase version. Outlookhttp://aka.ms/weboutlook'tan gönderildi … ________________________________ Gönderen: GaHyungLee @.> Gönderildi: 23 Mart 2022 Çarşamba 16:02 Kime: rotolonico/FirebaseWebGL @.> Bilgi: ahmetteksas @.>; Author @.> Konu: Re: [rotolonico/FirebaseWebGL] error : Firebase is not defined (Issue #13) i think different version make error firebase released v9 firebase — Reply to this email directly, view it on GitHub<#13 (comment)>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/APB3CA4ADKJR36SW246PVWTVBMI6BANCNFSM5PIGFATQ. You are receiving this because you authored the thread.Message ID: @.***>
can i see your code? i want resolved this problem
Any luck with this, guys? I am having the same issue now out of nowhere. It was working it stopped.
Any luck with this, guys? I am having the same issue now out of nowhere. It was working it stopped.
dont worry buddy you must change firebase version8. if you do it , your code work well :D this opensource working in version 8
Any luck with this, guys? I am having the same issue now out of nowhere. It was working it stopped.
dont worry buddy you must change firebase version8. if you do it , your code work well :D this opensource working in version 8
Do you have a snippet of what your .html file looks like with version8 included instead of v9?
Any luck with this, guys? I am having the same issue now out of nowhere. It was working it stopped.
dont worry buddy you must change firebase version8. if you do it , your code work well :D this opensource working in version 8
Do you have a snippet of what your .html file looks like with version8 included instead of v9? i think you dont need any example. you just change your index.html
if you have firebase docs, you can see version 8 in CDN mode
I have finally got it worked ^^ I'm using v8.8.0 firebase unity sdk, and in the index.html I extended these:
- at line 7 after the title I inserted this:
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase.js"></script> - after
}).then((unityInstance) => {I inserted these 2 lines:
this.unityInstance = unityInstance;
this.firebase = firebase;
- and between
</script>and</body>I inserted this:
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
I don't know if all of them are needed or not, and on the console there is a warning that "Firebase is already defined in the global scope.", but it works now so I leave it as it is.
My index.html from a project built directly from master looks like this. I'm still getting similar errors when trying to implement your solution into my code.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | WebGL Firebase Test</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/3.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">WebGL Firebase Test</div>
</div>
</div>
</body>
</html>
Here's my index file with my web api key + database service
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | WebGL Firebase Test</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/5.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">WebGL Firebase Test</div>
</div>
</div>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
//import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-analytics.js";
import { getDatabase } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-database.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: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
//const analytics = getAnalytics(app);
</script>
</body>
</html>
My firebase.jslib location in ~/Assets/Plugins/firebase.jslib
mergeInto(LibraryManager.library, {
GetJSON: function (path, objectName, callback, fallback) {
var pasredPath = Pointer_stringify(path);
var pasredObjectName = Pointer_stringify(objectName);
var pasredCallback = Pointer_stringify(callback);
var pasredFallback = Pointer_stringify(fallback);
try{
firebase.database().ref(parsedPath).once('value').then(function(snapshot){
unityInstance.Module.SendMessage(pasredObjectName,pasredCallback,JJSON.stringify(snapshot.val()));
});
} catch(error) {
unityInstance.Module.SendMessage(pasredObjectName,pasredFallback,"There was an error: " + error.message);
}
}
});
I've attached an image of the error im getting.
I have finally got it worked ^^ I'm using v8.8.0 firebase unity sdk, and in the index.html I extended these:
- at line 7 after the title I inserted this:
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase.js"></script>- after
}).then((unityInstance) => {I inserted these 2 lines:this.unityInstance = unityInstance; this.firebase = firebase;
- and between
</script>and</body>I inserted this:<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script> <script> // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script>I don't know if all of them are needed or not, and on the console there is a warning that "Firebase is already defined in the global scope.", but it works now so I leave it as it is.
Are you adding both the Unity and Javascript SDK to your project?
no! i just adding code in index.html. jslib is not need to change. "import" is firebase 9version , "<script ~~" is firebase 8 version. so you can solve this problem
no! i just adding code in index.html. jslib is not need to change. "import" is firebase 9version , "<script ~~" is firebase 8 version. so you can solve this problem
Thank you for your help, I was able to get it working using version 8 and your recommendations!
no! i just adding code in index.html. jslib is not need to change. "import" is firebase 9version , "<script ~~" is firebase 8 version. so you can solve this problem
Thank you for your help, I was able to get it working using version 8 and your recommendations!
are you able to post your full html please (with your details obviously x'ed out) thanks
Curious as well if it's possible to use the v9 libraries. I also am able to get it working with v8.x but not the v9.x
I added unitypackage in the project and then call functions for auth and build WebGL, then I added my firebase config to the built index.html file and this.unityInstance = unityInstance line also, then I uploaded the build zip file on unity play. but now I am getting an error called: unityinstance is not defined. is there something I am missing or to add? Please help.
It worked for now, so I'll share the full HTML code
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | test-firestore-core</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase.js"></script>
<script>
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};
firebase.initializeApp(firebaseConfig);
</script>
<body>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">test-firestore-core</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function () {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/test.loader.js";
var config = {
dataUrl: buildUrl + "/test.data",
frameworkUrl: buildUrl + "/test.framework.js",
codeUrl: buildUrl + "/test.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "test-firestore-core",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
canvas.style.width = "960px";
canvas.style.height = "600px";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
this.unityInstance = unityInstance;
this.firebase = firebase;
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>
