如何修复JavaScript模块加载的text/html MIME类型错误？

1. 先把模块导入路径搞对 #

• 检查HTML里<script type="module">的import语句，必须指向真实存在的.js文件，不能用裸导入（比如直接import 'docx'）。举个例子，如果你用npm装的依赖，路径得写全：

  import { Document, Packer, Paragraph } from './node_modules/docx/build/index.js';
  import { saveAs } from './node_modules/file-saver/dist/FileSaver.js';
  

• 别写错路径，要是指向了目录或者不存在的文件，服务器就会返回404页面（MIME类型是text/html），自然触发这个错误。

2. 让服务器正确识别JS文件的MIME类型 #

• 用http-server的时候，手动指定MIME类型启动，避免默认配置出问题：

  http-server -m "application/javascript:.js"
  

• 用VS Code Live Server的话，在.vscode/settings.json里加个配置，强制JS文件返回正确的MIME类型：

  {
    "liveServer.settings.mimeTypes": {
      ".js": "application/javascript"
    }
  }
  

3. 换CDN导入试试（最快的验证方法） #

本地模块路径容易踩坑，直接用CDN链接代替本地导入，能绕开MIME和路径问题：

<script type="module">
  import { Document, Packer, Paragraph } from 'https://cdn.jsdelivr.net/npm/docx@8.5.0/build/index.es.js';
  import { saveAs } from 'https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js';

  // 测试用的生成代码
  const doc = new Document({
    sections: [{
      children: [new Paragraph('Hello World!')]
    }]
  });

  Packer.toBlob(doc).then(blob => {
    saveAs(blob, 'test.docx');
  });
</script>

4. 排查文件和服务器路由问题 #

• 确认你的JS文件扩展名是.js，别用.mjs之类的特殊扩展名（除非你特意配置了服务器支持）。
• 检查服务器有没有把JS请求重定向到HTML页面（比如有些SPA的路由规则会这么干），导致返回的是HTML而非JS文件。

5. 清缓存重启 #

• 浏览器缓存可能留了旧的错误MIME记录，按Ctrl+Shift+Delete清掉缓存再试。
• 重启服务器，确保配置的改动生效。

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