如何修复Vite警告：未启用React自动JSX转换无法设置JSX导入源？

我使用Vite构建React应用并搭配Emotion CSS，之前为了在HTML元素上使用Emotion的css属性，一直添加以下代码：

/** @jsxImportSource @emotion/react */
import { css, jsx } from "@emotion/react"

此前运行正常，但现在出现警告：

[vite] warning: The JSX import source cannot be set without also enabling React's "automatic" JSX transform

警告含义 #

该警告表示：你指定了JSX导入源为@emotion/react，但未开启React的自动JSX转换模式。旧版的经典JSX转换模式不支持单独设置jsxImportSource，必须切换到自动转换模式才能配合Emotion的配置生效。

修复方案 #

方案1：全局配置Vite（推荐）

在项目根目录的vite.config.js/vite.config.ts中，修改React插件配置，指定jsxImportSource，Vite会自动启用自动JSX转换：

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

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react'
    })
  ]
})

配置完成后，可删除所有组件顶部的/** @jsxImportSource @emotion/react */注释和jsx导入，Vite会全局统一处理JSX导入源。

方案2：组件内单独配置（不推荐）

若不想修改全局配置，可保留组件内的注释，但需确保项目使用自动JSX转换（React 17+默认支持）。不过这种方式需要每个组件都添加注释，维护成本较高。

额外注意事项 #

• 确保@vitejs/plugin-react为最新版本，旧版本对自动JSX转换的支持可能存在问题
• 使用TypeScript时，需在tsconfig.json中补充配置：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react"
  }
}

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