本地测试JavaScript模块加载报MIME类型错误如何解决

这个报错由两个核心问题导致：

• 你看到的MIME类型为text/html的提示，本质是本地测试服务器没找到对应路径的JS文件，自动返回了404状态的HTML错误页面，不是你的JS文件本身被识别成了HTML。
• 你混用了Node.js端的CommonJS模块语法、RequireJS的AMD语法、浏览器原生ES Module语法，三者加载逻辑完全不兼容。node main.js能正常运行是因为Node原生支持require语法，浏览器环境不认这套逻辑。

第一步：修正文件路径，解决404导致的MIME报错 #

先核对项目目录结构，必须和引用路径严格对应，标准静态站点目录结构参考如下：

你的项目根目录/
├─ index.html
├─ js/
│  ├─ main.js
│  └─ require.js （不用RequireJS可以直接删掉）
└─ circular-natal-horoscope-js/
   └─ dist/
      └─ index.js

• 如果你用/circular-natal-horoscope-js/dist/index.js这种根路径写法，要确保circular-natal-horoscope-js文件夹直接放在站点根目录，不是嵌套在js文件夹里，否则服务器找不到文件就会返回HTML格式的404页，触发MIME报错。
• 本地启动静态服务时，一定要在放index.html的项目根目录执行启动命令，不要直接双击html文件用file协议打开，否则根路径映射会出错。
• 验证路径是否正确的方法：直接在浏览器地址栏输入报错里的JS完整地址，比如http://127.0.0.1:46513/js/main.js，如果能看到纯文本的JS代码说明路径正确，如果看到404提示页面就是路径配置错了。

第二步：选择一种浏览器兼容的模块加载方案，不要混用语法 #

浏览器端不直接支持Node.js的require() CommonJS语法，二选一即可：

方案1：用原生ES Module（最推荐，不需要额外依赖库） #

1. 修改index.html里的script标签，给入口JS加type="module"属性，删掉多余的require.js引用：

   <html>
     <head> Horoscope </head>
       <body>
           <script type="module" src="js/main.js"></script>    
       </body>
   </html>
   

2. 修改main.js里的导入语法，用相对路径匹配文件位置，路径要写全文件后缀：

   // circular-natal-horoscope-js在根目录时，从js文件夹出发的相对路径要用../开头
   import { Origin, Horoscope } from '../circular-natal-horoscope-js/dist/index.js';
   // 所有依赖Origin、Horoscope的业务逻辑直接写在后面即可
   

3. 确认你引用的circular-natal-horoscope-js/dist/index.js是支持浏览器运行的ESM版本，如果是仅Node.js可用的CJS版本，需要提前用esbuild、rollup这类打包工具把依赖打包成浏览器可识别的单文件再引用。

方案2：如果要继续用RequireJS加载AMD模块 #

1. 不要在main.js里写Node.js风格的require()，要按照RequireJS的规范写导入逻辑：

   require.config({
     baseUrl: '/',
     paths: {
       horoscope: 'circular-natal-horoscope-js/dist/index'
     }
   });
   require(['horoscope'], function({ Origin, Horoscope }) {
     // 所有依赖Horoscope、Origin的业务逻辑必须写在这个回调里
   });
   

2. 核对paths里配置的路径能正确访问到对应JS文件，否则还是会触发404的MIME报错。

第三步：部署到WordPress的注意事项 #

• 上传JS文件不要用WordPress后台的媒体上传功能，会自动修改文件路径导致404，建议通过SFTP把整个包含依赖的JS文件夹放到当前主题目录下，比如wp-content/themes/你的启用主题名/js/。
• 引用JS的时候用WordPress原生的wp_enqueue_script函数挂载，不要直接硬编码路径到模板文件里，避免站点换域名、配置子目录后路径失效。
• 如果用ES Module语法，挂载时正常给script标签加type="module"属性即可，WordPress不会过滤这个属性。

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