如何修复「Expected a JavaScript module script」MIME类型不匹配错误？

1. 修正Firebase模块导入路径 #

你的导入路径未指向Firebase ES模块的具体JS文件，本地服务器无法正确识别模块类型，导致返回HTML错误页面（MIME类型为text/html）。修改JS中的导入语句，指向Firebase SDK的ES模块入口文件：

import { initializeApp } from "/node_modules/firebase/app/dist/app.esm.js";
import { getDatabase, ref, set } from "/node_modules/firebase/database/dist/database.esm.js";

2. 确保Live Server从项目根目录启动 #

如果Live Server不是从包含node_modules、index.html和form.js的根目录启动，/node_modules的绝对路径会找不到对应文件，服务器返回404后会默认返回HTML错误页，触发MIME类型错误。右键点击项目根目录下的HTML文件，选择「Open with Live Server」，确保服务器根目录正确。

3. 改用Firebase CDN导入（更简便的方案） #

跳过本地node_modules的依赖问题，直接使用Firebase官方CDN的ES模块，修改JS中的导入语句为：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js";

注意替换为你实际使用的Firebase SDK版本号。

4. 检查路径有效性 #

打开浏览器开发者工具的「Network」面板，刷新页面后查看form.js和Firebase模块的请求状态：

• 如果显示404，说明路径错误，改用相对路径（比如./node_modules/...）或者调整服务器启动目录。
• 如果请求成功，确认返回的文件MIME类型为application/javascript。

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