无法将Firebase连接到HTML文件，出现import相关报错如何解决？

问题根因 #

你遇到的两个报错都是浏览器原生ES Module的限制导致的：

1. 第一个报错是因为浏览器默认将script加载的文件视为普通脚本，不支持import语法，添加type="module"属性后确实可以解决这个问题
2. 第二个报错是因为浏览器原生import不支持直接写npm包名（比如firebase/app），只有webpack、Vite这类前端构建工具可以识别node_modules下的包名路径

解决方案1：使用CDN引入（无需npm/Node.js，最适配你当前的学习场景） #

这种方案不需要处理包管理、构建工具的问题，修改后直接可以运行，和Net Ninja旧课程的用法也更接近：

修改后HTML代码

<!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>
    <!-- 引入Firebase核心与Firestore兼容版CDN -->
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js"></script>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

修改后JS代码

删除所有import语句，直接使用全局注入的firebase对象即可，你的配置内容不需要改动：

const firebaseConfig = {
  apiKey: "AIzaS.....bFkMOXoRY",
  authDomain: "modern.....irebaseapp.com",
  projectId: "mode....nja",
  storageBucket: "modern-j......ja.appspot.com",
  messagingSenderId: "9635.....932978",
  appId: "1:96350793.......cbf567939ae91512b",
  measurementId: "G-HFN5111EHZ"
};

// 初始化Firebase与Firestore
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

解决方案2：使用npm+构建工具运行 #

如果你想沿用官方文档的模块化写法，需要搭配构建工具使用，步骤如下：

1. 在项目根目录执行npm install firebase安装依赖
2. 安装轻量构建工具Vite：执行npm create vite@latest . -- --template vanilla && npm install
3. 将你原来的app.js代码替换掉Vite生成的main.js内容
4. 执行npm run dev，通过启动的本地服务访问页面，即可正常运行

注意：不要直接双击打开本地HTML文件运行（地址栏为file://开头），会触发浏览器跨域限制，要么用上述构建工具的本地服务，要么用编辑器的Live Server类插件启动http服务访问。

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