Firebase Firestore Web v9 initialise

Question

I started moving my firstore project to web v9. I use the steps from: https://firebase.google.com/docs/web/setup?sdk_version=v9#add-sdks-initialize

  <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.2/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.2/firebase-analytics-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.2/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.2/firebase-firestore-compat.js"></script>
  <script>
    
    import firebase from "firebase/compat/app";
    //const firebase = require('firebase/compat/app');

    var firebaseConfig = {
      apiKey: "zaSy...opjQ6GQ3",
      authDomain: "...firebaseapp.com",
      projectId: "...",
      storageBucket: "...appspot.com",
      messagingSenderId: "..049",
      appId: "1:645243..9a",
      measurementId: "..Q3Y.."
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

1?. Error "Uncaught SyntaxError: Cannot use import statement outside a module"

2?. where is CDN for modular - I dont want to use compat sdk.

3?. On this page there is information Available Firebase JS SDKs (from the CDN) but it looks like it is for v8 - where is vesrion 9

Does somene have sample, please?

Answer 1

I don't see the modular SDK mentioned in the CDN section of the documentation and not even on Github. The first error is kind of expected because you are not in a node env. You can read more about that here.

The script your are importing also has 'compat' in it and that means:

Compat - a familiar API surface which is fully compatible with the version 8 SDK, allowing you to upgrade to version 9 without changing all of your Firebase code at once. Compat libraries have little to no size or performance advantages over their version 8 counterparts.

To continue using Firebase v9 beta (over CDN), please continue using the v8 code style.

// No need to 'import {}' anything
// Just add the scripts

firebase.initializeApp({...})

I'm not sure why the import {} from "firebase/compat/app" is mentioned in the docs but I am assuming it's just getting duplicated from the NPM tab of docs.

I tried looking in it (both simple HTML and Vue app) and got same results:

So I guess if you are so interested in v9 you might have to use NPM. (not sure how useful Browserify will be)