Search code examples
javascriptfirebasegoogle-cloud-firestoreimportcdn

Import firebase firestore from CDN JS not working


I am importing Firebase Firestore from CDN to run on a local server. I imported it as the documentation says, right here: https://firebase.google.com/docs/web/alt-setup

My code :

  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js';
import { firestore } from 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js'

The problem: Firebase app and firebase auth are imported and work perfectly however, Firestore is not being imported. I get this error:

Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js' does not provide an export named 'firestore'

This is my first web project using firebase and I dont know how to move forward. Any help or suggestion will be appreciated by this newbie. If you need anymore information let me know, Thanks.


Solution

  • I think the source has been deprecated. Cause the explanation written like this, from this source https://firebase.google.com/docs/web/alt-setup#from-the-cdn

    For most Firebase Web apps we strongly recommend using SDK version 9 via npm.

    I found two ways, in version 8 you can still use that way.

    <body>
        <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
        <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-firestore.js"></script>
    </body>
    

    But if you want use in version 9, you have to use npm.

    npm install firebase@9.4.1 --save
    
    import { initializeApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";
    

    You can visit: https://firebase.google.com/docs/firestore/quickstart#web-version-9

    Hopefully this can help you.