javascript - Firebase 9 modular -how to start

I try to start playing with Firebase 9. I use VSCode and export using npm (in vscode)

   <script src=".0.0-beta.5/firebase-app-pat.js"></script>
   
    <script src=".0.0-beta.5/firebase-analytics-pat.js"></script>
  
    <script src=".0.0-beta.5/firebase-auth-pat.js"></script>
    <script src=".0.0-beta.5/firebase-firestore-pat.js"></script>
    <script src=".0.0-beta.5/firebase-storage-pat.js"></script>
    <!-- init -->
    <script defer src="firebase/init.js" type="text/javascript"></script>

    
    <script type="module">
    import {
        getAuth,
        onAuthStateChanged
    } from "firebase/auth";

    const auth = getAuth(firebaseApp);
    onAuthStateChanged(auth, user => {
        console.log(user)
    });
      </script>

Error

Uncaught TypeError: Failed to resolve module specifier "firebase/auth". Relative references must start with either "/", "./", or "../".

I try to start playing with Firebase 9. I use VSCode and export using npm (in vscode)

   <script src="https://www.gstatic./firebasejs/9.0.0-beta.5/firebase-app-pat.js"></script>
   
    <script src="https://www.gstatic./firebasejs/9.0.0-beta.5/firebase-analytics-pat.js"></script>
  
    <script src="https://www.gstatic./firebasejs/9.0.0-beta.5/firebase-auth-pat.js"></script>
    <script src="https://www.gstatic./firebasejs/9.0.0-beta.5/firebase-firestore-pat.js"></script>
    <script src="https://www.gstatic./firebasejs/9.0.0-beta.5/firebase-storage-pat.js"></script>
    <!-- init -->
    <script defer src="firebase/init.js" type="text/javascript"></script>

    
    <script type="module">
    import {
        getAuth,
        onAuthStateChanged
    } from "firebase/auth";

    const auth = getAuth(firebaseApp);
    onAuthStateChanged(auth, user => {
        console.log(user)
    });
      </script>

Error

Uncaught TypeError: Failed to resolve module specifier "firebase/auth". Relative references must start with either "/", "./", or "../".

Share edited Jul 1, 2021 at 13:46 Frank van Puffelen 601k85 gold badges890 silver badges860 bronze badges Recognized by Google Cloud Collective asked Jul 1, 2021 at 12:06 awariat 3821 gold badge5 silver badges25 bronze badges

What I understood on this code should work modular and v8 as well. – awariat Commented Jul 1, 2021 at 12:40
It will but with NPM/Yarn or any module bundler only (like a Vue/React app). Please refer to this Github issue. It does say 'pat' in the script URL itself so I assume that pkg has v8 syntax only – Dharmaraj Commented Jul 1, 2021 at 12:41
Thank you. I installed using npm on vscode but still problem with import. The npm created folder "node_modules" where I believe is all what I need. I would prefer to use vanilla js than react or vue. Regards – awariat Commented Jul 2, 2021 at 21:40
Have you had any luck with this? Im having the same issue – Mikael Wills Commented Aug 31, 2021 at 10:29
Not yet unfortunately. I can't find a working example. – awariat Commented Aug 31, 2021 at 22:06

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

I ran into the same issue and was able to resolve it by closely watching David's video around the 5:40 timestamp.

Here is the basic boilerplate that works when serving locally:

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

const firebaseApp = initializeApp({
  // (insert your Firebase configuration here)
  });

  const auth = getAuth(firebaseApp);

  onAuthStateChanged(auth, user => {
    if (user) {
      console.log('Logged in as ${user.email}' );
    } else {
      console.log('No user');
    }
  });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting started with Firebase Auth</title>
    <script type="module" src="/index.js"></script>
</head>
<body>
    
</body>
</html>

This is what I am using now (thank you Peter)

 // initialize 
import {
    initializeApp
} from 'https://www.gstatic./firebasejs/9.6.8/firebase-app.js';

const firebaseConfig = {
    apiKey: "xxx",
    authDomain: "xxx",
    projectId: "xxx",
    storageBucket: "xxx.appspot.",
    messagingSenderId: "xx",
    appId: "1:xx:web:xx",
    measurementId: "G-xx"
};
const firebaseApp = initializeApp(firebaseConfig);

// Add Firebase products that you want to use
import {
    getAuth,
    onAuthStateChanged,
    signInWithEmailAndPassword,
    signOut
} from 'https://www.gstatic./firebasejs/9.6.8/firebase-auth.js';

import {
    getFirestore,
    collection,
    getDocs,
    getDoc,
    doc,
    setDoc
} from 'https://www.gstatic./firebasejs/9.6.8/firebase-firestore.js';
import {
    getStorage,
    ref,
    uploadBytesResumable,
    getDownloadURL,
    listAll,
    deleteObject
} from "https://www.gstatic./firebasejs/9.6.8/firebase-storage.js";
//============================================
//============================================
const db = getFirestore();
const auth = getAuth();
let UID;
window.addEventListener('DOMContentLoaded', (event) => {
    onAuthStateChanged(auth, (user) => {
        if (user) {
            UID = user.uid;
            //Your code...
        }
    });

});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Firebase 9 modular -how to start - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)