导入Firebase模块时遭遇MIME类型（text/html）不允许的模块拦截错误

问题本质 #

你遇到的Module blocked because of a disallowed MIME type (“text/html”)错误，核心原因是浏览器请求/firebase/app这类路径时，服务器返回的不是JavaScript模块文件，而是HTML页面（大概率是404错误页），MIME类型不匹配导致被拦截。

修复方案 #

1. 修正导入路径 #

你的项目里firebase目录在根目录，但前端代码应该在public目录下运行，直接写/firebase/app会指向服务器根目录的firebase文件夹，要么路径错误，要么该文件夹内的SDK未被正确托管。

两种正确导入方式：

• 若通过npm安装Firebase，直接用包名导入：

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getDatabase } from "firebase/database";

• 若手动放置SDK文件，把firebase文件夹移到public目录下，改用相对路径导入：

import { initializeApp } from "./firebase/app.js";
import { getAnalytics } from "./firebase/analytics.js";
import { getDatabase } from "./firebase/database.js";

2. 检查Firebase托管配置 #

打开firebase.json，确认hosting的public目录配置正确，确保静态资源能正常被访问：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

3. 本地服务器根目录设置 #

如果使用本地服务器（比如VS Code的Live Server），务必将服务器根目录设为public文件夹，而非项目根目录。否则请求/firebase/app会找不到对应文件，返回HTML错误页。

验证步骤 #

1. 修正路径后重启本地服务器
2. 打开浏览器控制台查看网络请求，确认firebase/app这类请求返回的是application/javascript类型文件，而非HTML
3. 刷新页面，检查错误是否消失

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