web-dev-qa-db-fra.com

SyntaxError: le module demandé 'https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js' ne fournit pas d'exportation nommée "Par défaut"

J'essaie de mettre en place et de tester l'authentification Google pour une webApp que je travaille. J'ai eu beaucoup de problèmes avec l'exécution des fonctions JavaScript et je ne sais pas pourquoi. J'utilise toutes les importations de CDN car j'avais une erreur de référencement des dossiers en firebase localement. Voici mes fichiers:

firebase-config.js

// Import the functions you need from the SDKs you need
import firebase from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js"; 
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-analytics.js";

const firebaseConfig = {
 [config keys]
};

// Initialize Firebase app
const fb_app = firebase.initializeApp(firebaseConfig); // returns an app 
const analytics = getAnalytics(app);
export {fb_app};

signin.js

import {fb_app} from "/src/firebase-config.js";

import { getAuth, signInWithPopup, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-auth.js";

fb_app; // I was getting an error that the firebase app isn't initialized, so I placed this here to see if it was work. I am not sure this is the correct way to call the app in this file. 

const auth = getAuth();
const provider = new GoogleAuthProvider(); 

signInWithPopup(auth, provider)
  .then((result) => {
    console.log("Signing User In...");
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
document.getElementById("signInButton").onclick = signInWithPopup(auth, provider); // this is how I am importing the function to the html.

index.html

<body>
        <div class="loginbox">
            <h1>Login</h1>
            <form>
                <div id="google-signin"> 
                    <button id="signInButton">Login with Google -></button>
                </div>
            </form>
        </div>
        <!-- <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        <script src="/src/signin.jsx"></script> -->
    </body>

Toute aide ce serait apprécié. Je suis très nouveau pour apprendre ce genre de choses, alors je comprends que si j'aurais peut-être fait quelque chose de mal. J'ai eu beaucoup d'erreurs différentes concernant des détails mineurs plus petits, mais je ne comprends vraiment pas pourquoi cette erreur serait survenue. Merci d'avance.

javascriptfirebasefirebase-authenticationgoogle-authentication
1
hoshii_tomato

vous avez besoin de plus de détails sur les bibliothèques que vous utilisez. L'erreur provient ici

import firebase from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js";

vous essayez d'importer l'objet default de la bibliothèque en n'utilisant pas l'importation de parenthèses. Ce qui n'est pas fourni à partir de la bibliothèque de Firebase.

https://developer.mozilla.org/en-us/docs/web/javascript/reference/statifs/import

1
cute_programmer