JS模块加载报错：预期JS模块但服务器返回text/html MIME类型

错误含义解释 #

这个错误的核心是：浏览器加载ES模块时，要求服务器返回的文件必须是正确的JavaScript模块MIME类型（比如application/javascript或module），但你的服务器返回了text/html类型（通常是网页文件的类型）。因为浏览器对ES模块的MIME类型检查非常严格，所以直接拒绝加载这个模块。

修复步骤 #

1. 移除node-fetch的导入 #

node-fetch是专门给Node.js环境设计的模块，浏览器本身已经原生支持fetch API，完全不需要额外导入。直接删掉代码里的：

import fetch from '/node_modules/node-fetch';

之后直接使用fetch()即可，用法和Node.js环境基本一致。

2. 修正模块导入路径问题 #

从你的网络状态码（301重定向）来看，导入模块的路径大概率存在问题：

• 浏览器加载ES模块时，必须使用完整的文件路径和后缀名，比如导入本地模块要写./utils.mjs，不能只写./utils；
• 不要直接用/node_modules/xxx的绝对路径导入Node.js模块，绝大多数Node模块都不兼容浏览器环境，就算路径正确也会报错。如果需要用浏览器端第三方模块，建议选择专门的浏览器兼容包，或者用Vite、Webpack这类构建工具打包处理。

3. 检查Live Server的路径配置 #

你的script.mjs出现301重定向，可能是文件路径匹配错误，服务器把请求重定向到了HTML页面（返回text/html）。可以做这些检查：

• 确认script.mjs和HTML文件在同一目录下，或者HTML里的src路径写对了（比如脚本在子目录的话，要写src="./js/script.mjs"）；
• 重启Live Server，确保它正确托管了你的项目文件。

关于.env文件的404问题 #

浏览器不能直接访问.env文件，服务器默认也不会暴露这个配置文件，所以404是正常的。如果需要在浏览器代码里用环境变量，得用构建工具（比如Vite）把变量注入到代码中，或者直接在代码里写死测试用的变量。

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