在AWS Amplify部署React项目时遭遇MIME类型错误求助

错误根源 #

这些问题的核心是你的静态JS/CSS资源请求返回了HTML文档（大概率是Amplify默认的404页面），而非对应的资源文件。浏览器拿到HTML后，会识别其MIME类型为text/html，但预期的是application/javascript或text/css，从而触发MIME类型错误；而把HTML当作JS解析时，就会出现expected expression, got '<'的语法错误。

具体解决方案 #

• 检查本地构建产物
  先在本地执行npm run build，查看生成的build目录，确认static/js和static/css下存在对应文件名的资源文件，且路径结构正确。如果本地构建就有问题，Amplify部署后自然会出错。

• 修正Amplify重写与重定向规则
  进入Amplify控制台，找到你的项目 → 「部署」标签 → 「重写与重定向」：

  1. 删除之前添加的无效规则
  2. 添加以下SPA适配规则：
     • 源地址：</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
     • 目标地址：/index.html
     • 类型：200 (Rewrite)
       这条规则会确保只有非静态资源的路由请求才会重定向到index.html，静态资源请求会直接返回对应文件，不会被拦截成HTML。

• 确认Amplify部署配置
  在Amplify控制台的「部署设置」里，检查：

  • 构建命令：npm run build
  • 部署目录：build
    这两个配置是create-react-app项目的默认正确设置，若部署目录填错（比如填成public），Amplify会找不到正确的静态资源。

• 清除缓存重新部署
  在Amplify的部署页面，点击「重新部署此版本」，选择「清除构建缓存并重新构建」，避免旧的错误配置或缓存文件影响部署结果。

额外排查点 #

• 若你是自定义webpack配置的React项目，确保output.publicPath设置为/（除非项目部署在域名子路径下，需对应调整）
• 用浏览器无痕模式访问测试，排除本地缓存导致的异常

内容的提问来源于stack exchange，提问作者will the randomer price