flutterfire
flutterfire copied to clipboard
firebase
🐛 Manual Javascript injection doesnt work as docs describe
Bug report
The docs found at https://firebase.google.com/docs/flutter/setup?platform=web#disable-auto state that the JS auto injection can be disabled using window.flutterfire_ignore_scripts which is true however it also states they can be manually loaded by just including a script tag. Ie:
<script src="https://www.gstatic.com/firebasejs/10.5.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.5.0/firebase-firestore.js"></script>
This doesnt appear to work.
After reading through the source I figured out that you can import them as follows:
window.firebase_analytics = await import("./libs/firebase/firebase-analytics.js");
window.firebase_firestore = await import("./libs/firebase/firebase-firestore.js");
However all the firebase-x.js scripts have the path to firebase-app.js hardcoded within the import statements preventing any override of app/core.
Steps to reproduce
Steps to reproduce the behavior:
In index.html place:
window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
<script src="https://www.gstatic.com/firebasejs/10.5.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.5.0/firebase-firestore.js"></script>
Errors thrown in the console
Expected behavior
That analytics and firestore are fetched from the path given and firebase to initialize correctly
Additional context
The ability to prevent the JS auto injecting allow control of what files are downloaded, in our case we need to run fully offline this prevents that. Even if the manually loading worked as documented it would still mean firebase-app.js is always fetched from gstatic.com
Thanks for the report @willcalderbank I used the sample index.html snippet you shared, in plugin's example and ran on web, but it didn't give me any errors in the console or in browser console. Can you share the error you get ?
Hey @willcalderbank. We need more information to resolve this issue but there hasn't been an update in 7 weekdays. I'm marking the issue as stale and if there are no new updates in the next 7 days I will close it automatically.
If you have more information that will help us get to the bottom of this, just add a comment!
Apologies @darshankawar i've been away for a week. Thanks for looking into it.
Here's a more complete sample (which follows the doc's instructions):
<!DOCTYPE html>
<html>
<head>
<script src="flutter.js" defer></script>
<script src="https://www.gstatic.com/firebasejs/10.5.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.5.0/firebase-firestore.js"></script>
</head>
<body>
<script>
window.flutterfire_ignore_scripts = ['firestore', 'analytics'];
window.addEventListener('load', function (ev) {
_flutter.loader.loadEntrypoint().then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
If causes the following errors in the console:
firebase-analytics.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-firestore.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
As the error states the modulular versions of the JS cant be imported like this, so instead we can try and use namespaced versions:
<!DOCTYPE html>
<html>
<head>
<script src="flutter.js" defer></script>
<script src="https://www.gstatic.com/firebasejs/10.5.0/firebase-analytics-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.5.0/firebase-firestore-compat.js"></script>
</head>
<body>
<script>
window.flutterfire_ignore_scripts = ['firestore', 'analytics'];
window.addEventListener('load', function (ev) {
_flutter.loader.loadEntrypoint().then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
In which case the following error is thrown:
firebase-analytics-compat.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'INTERNAL')
at firebase-analytics-compat.js:1:294
at firebase-analytics-compat.js:1:316
firebase-firestore-compat.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'INTERNAL')
at firebase-firestore-compat.js:1:294
at firebase-firestore-compat.js:1:316
The only way ive been able to get it to work is to use the following:
<!DOCTYPE html>
<html>
<head>
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.flutterfire_ignore_scripts = ['firestore', 'analytics'];
window.addEventListener('load', async function (ev) {
window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/10.3.1/firebase-firestore.js");
window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/10.3.1/firebase-analytics.js");
_flutter.loader.loadEntrypoint().then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
Note the version change to 10.3.1. At one point during testing a warning showed that this was the version to use with the flutter sdk. Version 10.5.0 did not work with the above await import. Changing the other 2 examples to 10.3.1 didnt seem to have an effect the error was the same.
Hope this helps.
Thanks for the doc change but I fear its not correct {{web_sdk_version}} is the latest version, it doesn't work with that version only 10.3.1.
It also doesn't address the problem that all of the js libs force firebase-app.js to be downloaded via gstatic.com