如何配置Vite以允许在.js文件中使用JSX语法？

方案1：全局让Vite解析.js文件中的JSX #

在项目根目录的vite.config.js（或vite.config.ts）里，通过配置esbuild的loader规则，把所有.js文件按JSX格式解析：

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

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

方案2：仅针对特定外部依赖配置 #

要是不想全局修改所有.js文件的解析规则，只处理报错的那个外部依赖（比如示例里的somelib），可以用optimizeDeps单独指定：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx'
      },
      // 可选：只对指定依赖生效，缩小范围
      include: ['somelib']
    }
  }
})

注意事项 #

• 以上配置适用于Vite + React项目，Vue项目需替换对应插件后调整类似逻辑
• 改完配置记得重启Vite开发服务，就能解决The JSX syntax extension is not currently enabled的报错

内容的提问来源于stack exchange，提问作者Soof Golan