使用Vite+React在AWS Amplify部署时出现JSX MIME类型错误

问题背景 #

React + Vite项目，所有React文件使用.jsx扩展名。本地执行npm build后通过npm run preview运行正常，但部署到AWS Amplify后出现以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.

用户当前Vite配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs/promises';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  esbuild: {
    loader: 'jsx',
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
})

解决步骤 #

1. 简化Vite配置 #

@vitejs/plugin-react已经内置JSX转译逻辑，无需手动设置esbuild的loader规则，多余配置可能导致构建输出异常。修改后的Vite配置如下：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs/promises';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
})

2. 配置AWS Amplify的MIME类型映射 #

在项目根目录的public文件夹下创建_headers文件，添加以下内容，强制将.jsx文件的MIME类型设置为application/javascript：

/*.jsx
  Content-Type: application/javascript

3. 重新构建部署 #

执行npm run build重新生成产物，推送到Amplify关联的代码仓库，触发重新部署。

补充说明 #

若上述步骤无效，可检查Amplify的构建配置（amplify.yml），确保构建命令正确执行，且产物目录设置为Vite默认的dist：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

内容的提问来源于stack exchange，提问作者Charbel B.G.