从react-scripts迁移到Vite遇JSX语法错误，所有文件为.js格式

直接在Vite配置文件里做两处修改，就能让Vite像react-scripts一样处理.js文件里的JSX，不用批量改扩展名：

• 配置@vitejs/plugin-react插件的include规则，让它覆盖所有.js文件
• 指定esbuild的loader，把.js文件按JSX格式解析

完整的vite.config.js配置示例：

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

export default defineConfig({
  plugins: [
    react({
      include: '**/*.js'
    })
  ],
  esbuild: {
    loader: {
      '.js': 'jsx'
    }
  }
})

如果项目里还有.ts文件需要处理JSX，只需把配置调整为：

export default defineConfig({
  plugins: [
    react({
      include: '**/*.{js,ts}'
    })
  ],
  esbuild: {
    loader: {
      '.js': 'jsx',
      '.ts': 'jsx'
    }
  }
})

重启Vite服务后，就能正常解析.js文件中的JSX语法了。

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