未捕获的语法错误：请求的模块“https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js”未提供名为“default”的导出答案

【问题标题】：Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js' does not provide an export named 'default'未捕获的语法错误：请求的模块“https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js”未提供名为“default”的导出
【发布时间】：2022-01-13 21:31:33
【问题描述】：

我正在尝试为我正在开发的 web 应用设置和测试 google 身份验证。我在运行 javascript 函数方面遇到了很多问题，我不知道为什么。我使用所有 CDN 导入，因为我在本地引用 firebase 文件夹时出错。这是我的文件：

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>

任何帮助将不胜感激。我对学习这些东西很陌生，所以我知道我是否可能无意中做错了什么。我得到了很多与较小的小细节有关的不同错误，但我真的不明白为什么会出现这个错误。提前谢谢你。

【问题讨论】：

标签： javascript firebase firebase-authentication google-authentication

【解决方案1】：

您需要有关您正在使用的库的更多详细信息。错误源自这里

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

您正在尝试通过不使用括号导入从库中导入default 对象。 firebase 库没有提供。

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

【讨论】：

只是补充一点：在您的代码上使用9.x.x 意味着它是基于模块化的 Firebase SDK 版本。如果您使用低于该版本的任何内容，则默认导入将起作用。参考：firebase.google.com/docs/web/modular-upgrade.