Google Firebase认证教程项目运行出现ReferenceError错误求助

问题根源 #

你遇到的报错由两个核心原因导致：

• Firebase SDK版本不兼容：你从控制台复制的是9.x版本的模块化导入代码，不会暴露全局firebase对象，但你后续引入的firebase-auth 8.9.1、firebaseui 4.4.0以及你自己写的script.js都依赖8.x版本暴露的全局firebase对象
• 资源加载顺序错误：你先做了初始化，再引入firebase-auth.js，不符合SDK加载要求

解决方案 #

直接替换index.html的head部分相关代码即可，修改后完整的资源加载和初始化逻辑如下：

<head>
  <title>Datastore and Firebase Auth Example</title>
  <!-- 引入8.x版本Firebase核心SDK，和auth版本保持一致 -->
  <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-auth.js"></script>
  <!-- 引入FirebaseUI资源 -->
  <script src="https://www.gstatic.com/firebasejs/ui/4.4.0/firebase-ui-auth.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.4.0/firebase-ui-auth.css" />
  <!-- Firebase初始化代码 -->
  <script>
    const firebaseConfig = {
      apiKey: "A****************Q",
      authDomain: "c*******.firebaseapp.com",
      projectId: "c*******",
      storageBucket: "c*******.appspot.com",
      messagingSenderId: "1**********0",
      appId: "1:1**********10:web:0**********53",
      measurementId: "G-1********S"
    };
    // 初始化会自动挂载全局firebase对象
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>
  <!-- 检查firebase是否加载成功的代码 -->
  <script>
    if (typeof firebase === 'undefined') {
      const msg = "Please paste the Firebase initialization snippet into index.html. See https://console.firebase.google.com > Overview > Add Firebase to your web app.";
      console.log(msg);
      alert(msg);
    }
  </script>
  <!-- 引入自定义脚本和样式 -->
  <script src="{{ url_for('static', filename='script.js') }}"></script>
  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>

修改后所有报错都会消失，原有逻辑无需调整即可正常运行。

内容的提问来源于stack exchange，提问作者user1563247