Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.6.0/firebase-a-CodePudding

I'm trying to set up and test google authentication for a webapp I'm working on. I've been having a lot of issues with getting the javascript functions running, and I'm not sure why. I use all CDN imports because I was having an error referencing firebase folders locally. Here are my files:

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 >
            <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>

Any help whatsoever would be appreciated. I am very new to learning this stuff, so I understand if I may have unintentionally done something wrong. I have gotten a lot of different errors relating to smaller minor details, but I genuinely don't understand why this error would be arising. Thank you in advance.

CodePudding user response：

you need more details about the libraries you are using. the error originates here

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

you are trying to import the default object from the library by not using the parenthesis import. which is not provided from the firebase library.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import