JavaScript连接Firebase出现三类报错无法正常连接

对接JavaScript应用的Firebase服务时，完成账号注册、配置参数粘贴后运行抛出3个错误：

• Unexpected token 'export'
• Cannot use import statement outside a module
• firebase is not defined

问题复现代码如下：

<!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>Document</title>
</head>
<body>

    <script src="https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.8.3/firebase-firestore.js"></script>

    <script type="module">
        // 从SDK导入需要的功能函数
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
      
        // Web应用Firebase配置
        const firebaseConfig = {
          apiKey: "<key>",
          authDomain: "javascript-3bbaa.firebaseapp.com",
          projectId: "javascript-3bbaa",
          storageBucket: "javascript-3bbaa.appspot.com",
          messagingSenderId: "<id>",
          appId: "<appId>"
        };
      
        // 初始化Firebase
        const firebase = initializeApp(firebaseConfig);
        const db = firebase.firestore();
      </script>
    
</body>
</html>

三个报错均由SDK引入方式混用、API调用逻辑与SDK版本不匹配导致：

• 前两个报错：同时使用普通<script>标签加载ESM格式的SDK资源、又在type="module"的脚本中重复import同一份SDK。普通脚本默认不属于ES模块环境，直接加载包含export关键字的ESM资源会抛出Unexpected token 'export'；非模块环境下使用import语法会触发Cannot use import statement outside a module。
• 第三个报错：Firebase v9 原生模块化API返回的是独立App实例，实例本身没有挂载firestore()方法。该方法是v8及更早版本、v9兼容版本才提供的全局命名空间API，直接调用就会触发firebase is not defined相关错误。

两种方案二选一即可，禁止混用不同引入方式。

方案1：使用v9原生模块化写法（官方推荐，打包体积更小） #

删除开头两个不带type="module"的重复script引入标签，所有服务按需导入对应初始化方法：

<!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>Document</title>
</head>
<body>
    <script type="module">
        // 按需导入所需方法
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-firestore.js";
      
        // 替换为自身项目的Firebase配置
        const firebaseConfig = {
          apiKey: "<key>",
          authDomain: "javascript-3bbaa.firebaseapp.com",
          projectId: "javascript-3bbaa",
          storageBucket: "javascript-3bbaa.appspot.com",
          messagingSenderId: "<id>",
          appId: "<appId>"
        };
      
        // 初始化应用
        const app = initializeApp(firebaseConfig);
        // 模块化写法初始化Firestore服务
        const db = getFirestore(app);
      </script>
    
</body>
</html>

方案2：使用v9兼容命名空间写法（与v8版本写法一致，学习成本低） #

如果习惯firebase.xxx()的链式调用写法，引入带compat后缀的兼容版本CDN，不需要写import语句，直接使用全局firebase对象即可：

<!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>Document</title>
</head>
<body>
    <!-- 引入compat兼容版本CDN -->
    <script src="https://www.gstatic.com/firebasejs/9.8.3/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.8.3/firebase-firestore-compat.js"></script>

    <script>
        // 直接使用全局firebase对象，无需import
        const firebaseConfig = {
          apiKey: "<key>",
          authDomain: "javascript-3bbaa.firebaseapp.com",
          projectId: "javascript-3bbaa",
          storageBucket: "javascript-3bbaa.appspot.com",
          messagingSenderId: "<id>",
          appId: "<appId>"
        };
      
        // 初始化逻辑与老版本完全一致
        firebase.initializeApp(firebaseConfig);
        const db = firebase.firestore();
      </script>
    
</body>
</html>

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