Firebase 9.1导入firebase/database时出现Uncaught TypeError报错如何解决？

Uncaught TypeError: Failed to resolve module specifier "firebase/database". Relative references must start with either "/", "./", or "../".

报错原因 #

1. 浏览器原生ES Module不支持裸模块导入：你导入firebase-app时使用了完整的CDN远程地址，浏览器可以正常加载，但导入firebase/database时用了npm包风格的裸导入路径，既没有路径前缀也不是完整URL，浏览器无法识别资源地址，直接触发报错。
2. 额外存在作用域问题：你在type="module"的脚本中定义的db变量属于模块私有变量，后续普通script标签中的InsertData函数无法直接访问，即使解决导入问题也会触发变量未定义报错。

解决方法 #

按以下两步修改代码即可：

• 把firebase/database的导入路径替换为和firebase-app同版本的完整CDN地址
• 调整作用域，要么把数据操作逻辑移入module脚本，要么把需要暴露的变量挂载到window全局对象上

修正后的完整代码示例：

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js";
    // 替换为对应版本的完整CDN导入路径
    import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.1.0/firebase-database.js";
  
    const firebaseConfig = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "....",
        appId: "..."
    };

    // 初始化Firebase
    const app = initializeApp(firebaseConfig);
    const db = getDatabase();

    // 将需要全局调用的变量/方法挂载到window对象
    window.db = db;
    window.ref = ref;
    window.set = set;
</script>

<script type="text/javascript" >
    function InsertData() {
        // 注意：请确保代码中的rollV变量已提前定义
        set(ref(db, 'TheStudent/'+rollV), {
            NameOfStudent: "abc",
            RollNo: 13,
            Section: "B",
            Gender: "Male"
        });
    }
    document.getElementById('insertBtn').onclick = InsertData;
</script>

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