JavaScript运行module模块报错：添加type="module"的script标签出现异常

根因定位 #

ES模块脚本的加载遵循HTML规范的严格MIME类型校验规则，你遇到的报错是由于服务器返回main.js文件时，响应头的Content-Type字段值为text/plain，不符合JS模块要求的合法MIME类型（text/javascript/application/javascript）。

你使用的引入代码本身无语法错误：

<script type="module" defer src="main.js"></script>

分场景解决方案 #

• 本地开发场景
  不要直接通过file协议打开HTML文件，浏览器对file协议加载的ES模块存在安全限制，会触发同类报错。请使用本地静态服务器托管站点访问：
  • 如果你使用VS Code的Live Server插件，升级到最新版本即可解决旧版本的MIME类型适配问题
  • 如果你使用自定义Node.js静态服务，手动补充.js文件的响应头配置即可：

    // 示例Node.js服务配置片段
    if (req.url.endsWith('.js')) {
      res.setHeader('Content-Type', 'application/javascript')
    }
    

• 生产部署场景
  • Nginx部署：修改配置文件的types块，确保.js文件关联正确的MIME类型：

    types {
      application/javascript js;
    }
    

  • Apache部署：修改httpd.conf配置，新增.js文件的MIME类型映射：

    AddType application/javascript .js
    

  • 云服务商静态资源托管：到托管后台的响应头配置页面，新增.js文件的Content-Type为application/javascript即可。

内容的提问来源于stack exchange，提问作者Mr.Masiha