部署AWS Amplify时遇MIME类型错误：期望JS模块却返回text/jsx

错误核心 #

服务器返回的.jsx文件MIME类型为text/jsx，但浏览器加载模块脚本时，要求必须是符合HTML规范的JavaScript类MIME类型（如application/javascript），因此触发严格检查报错。

解决步骤 #

• 先排查项目构建是否达标
  不管用Create React App、Vite还是自定义Webpack配置，执行构建命令（比如npm run build）后，检查输出目录（如build或dist）里是否存在.jsx文件。正常情况下JSX代码应该被编译成.js文件，如果还有.jsx残留，说明构建配置有问题——比如Webpack的JSX loader未正确配置，或是Vite的JSX编译插件未启用，得先把这个基础问题解决。

• 给Amplify配置正确的MIME规则
  如果构建后确实没有.jsx文件但仍报错，大概率是Amplify默认的MIME映射规则不对。可以直接在项目根目录的amplify.yml中添加配置：

  version: 1
  frontend:
    phases:
      preBuild:
        commands:
          - npm install
      build:
        commands:
          - npm run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*
    postBuild:
      commands:
        # 给jsx文件指定正确的MIME类型
        - echo '/*.jsx: application/javascript' >> build/_headers
  

  也可以直接在Amplify控制台的「重写与重定向」页面添加规则：

  • 源地址：/*.jsx
  • 目标地址：/*.js
  • 类型：200（重写）

• 修正代码中的导入路径
  代码里别写带.jsx后缀的导入语句，比如把import Card from './Card.jsx'改成import Card from './Card'，让构建工具自动处理文件后缀，从根源上避免浏览器请求.jsx文件。

• 清理缓存重新部署
  进入Amplify控制台的「部署设置」页面，点击「清理缓存并重新构建」，强制刷新部署包，避免旧缓存残留导致的异常。

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