Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 Manual Javascript injection doesnt work as docs describe #11744

Open
willcalderbank opened this issue Oct 20, 2023 · 5 comments · Fixed by #11892
Open

🐛 Manual Javascript injection doesnt work as docs describe #11744

willcalderbank opened this issue Oct 20, 2023 · 5 comments · Fixed by #11892
Assignees
@Lyokone
Labels
platform: web Issues / PRs which are specifically for web. type: bug Something isn't working type: documentation Improvements or additions to documentation

Comments

@willcalderbank
Copy link

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
@willcalderbank willcalderbank added Needs Attention This issue needs maintainer attention. type: bug Something isn't working labels Oct 20, 2023
@willcalderbank willcalderbank changed the title 🐛 Manually Javascript injection doesnt work as docs describe Oct 20, 2023
@darshankawar darshankawar added the triage Issue is currently being triaged. label Oct 23, 2023
@darshankawar
Copy link

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 ?
@darshankawar darshankawar added blocked: customer-response Waiting for customer response, e.g. more information was requested. and removed Needs Attention This issue needs maintainer attention. labels Oct 23, 2023
@google-oss-bot google-oss-bot added the Stale Issue with no recent activity label Nov 1, 2023
@google-oss-bot
Copy link

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!
@willcalderbank
Copy link
Author

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.
@google-oss-bot google-oss-bot added Needs Attention This issue needs maintainer attention. and removed Stale Issue with no recent activity blocked: customer-response Waiting for customer response, e.g. more information was requested. labels Nov 1, 2023
@darshankawar
Copy link

Thanks for the detailed update. Seeing the same behavior as reported.
@darshankawar darshankawar added type: documentation Improvements or additions to documentation platform: web Issues / PRs which are specifically for web. and removed Needs Attention This issue needs maintainer attention. triage Issue is currently being triaged. labels Nov 2, 2023
@Lyokone Lyokone self-assigned this Nov 15, 2023
@Lyokone Lyokone mentioned this issue Nov 15, 2023
Merged
10 tasks
@willcalderbank
Copy link
Author

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
@darshankawar darshankawar added the resolution: fixed A fix has been merged or is pending merge from a PR. label Nov 27, 2023
@russellwheatley russellwheatley removed the resolution: fixed A fix has been merged or is pending merge from a PR. label Jan 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
platform: web Issues / PRs which are specifically for web. type: bug Something isn't working type: documentation Improvements or additions to documentation
6 participants
@willcalderbank @Lyokone @kevinthecheung @russellwheatley @google-oss-bot @darshankawar