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?

Dharmaraj · Accepted Answer · 2021-06-26T11:02:10.790

4

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)

edited Jun 26 '21 at 11:02

answered Jun 26 '21 at 10:56

Dharmaraj

47,845
8
52
84

Thank you very much. I planned to update my app to 9, but it looks like they did not even start doing it:). For examle how to use this :import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) – awariat Jun 26 '21 at 11:25
2

@awariat I've used it but in a Vue app. So unless you use a framework and install it using npm or yarn it's difficult. Also if the answer was helpful you can accept/upvote else feel free to ask further queries. – Dharmaraj Jun 26 '21 at 11:30
2

Reference: https://github.com/firebase/snippets-web/issues/192#issuecomment-872204103 – Dharmaraj Jul 01 '21 at 12:35
I'm in the same boat right now, though I'm also using a Vue app... except I'm attempting to get a service worker working to relay Firebase Cloud Messaging notifications while the browser is in the background... and I'm very much not a Javascript/Typescript dev. At the suggestion of [Tarik Huber](https://stackoverflow.com/users/5519300/tarik-huber), my latest hope is that the compat SDK for straight-up "messaging" has the service worker boilerplate in it, since there seems not to be a 9.0.2/firebase-messaging-sw-compat.js in existence. – zyx Sep 16 '21 at 15:46
@Dharmaraj Do you know if there is any good documentation now on how to use the CDN? – Leo Jan 09 '22 at 02:40
1

@Leo With v9 onwards, you should compile your code with a build tool to minimize its footprint instead of use a CDN. The main benefit of the CDN was the more sites that used it, the less terrible the overhead to use Firebase was. Now that the SDK can be tree-shaken to minimise the footprint, the CDN has become less useful. I recommend learning the new SDK using [a CDN loader script](https://stackoverflow.com/a/69231031/3068190), but then make use of a build tool for your actual app. – samthecodingman Jan 11 '22 at 10:00
@samthecodingman Thanks. I decided to use `rollup`. Simple enough so far (with relevant plugins needed for Firebase). – Leo Jan 12 '22 at 04:35

Firebase Firestore Web v9 initialise

1 Answers1