Vite 里怎么配置 esbuild 的 JSX 自动转换？

轩辕华丽提问于 2026-03-07 18:44:20 阅读 4

前端

我在 Vite 项目里用了 JSX 语法，但没装 Babel，听说 esbuild 能自动处理 JSX。可现在报错说“React is not defined”，是不是哪里没配对？

我试过在 vite.config.js 里加了这个配置：

export default {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
}

但还是不行，是不是应该用 jsxInject 或者别的选项？求指点！

构建工具

我来解答赞 3 收藏

反馈

1 条解答

W″丽萍 Lv1

这个问题其实挺常见的，很多人第一次用 esbuild 处理 JSX 都会遇到。我来分步解释下怎么解决：

首先理解为什么报"React is not defined"：就算用 esbuild 处理 JSX，默认情况下它还是假设你在用 React 的 JSX 转换规则。即使你设置了 jsxFactory 为 'h'（比如用 Vue 的 h 函数），还是需要告诉 esbuild 不要自动注入 React。

正确的配置应该是这样：

// vite.config.js

export default {

  esbuild: {

    jsxFactory: 'h',

    jsxFragment: 'Fragment',

    jsx: 'transform', // 关键配置：告诉 esbuild 自动转换 JSX

    jsxInject: import { h } from 'vue' // 按需注入你用的框架的 h 函数

  }

}

这里需要注意几点：
1. jsx: 'transform' 是必须的，这会启用 esbuild 的 JSX 转换
2. jsxInject 是用来自动注入你需要的模块，比如这里假设你用 Vue，就注入 vue 的 h 函数
3. 如果你用 Preact 或其他库，要把 h 的导入路径改成对应的

如果是 React 项目反而更简单，因为 esbuild 默认就是为 React 设计的，可以直接这样：

export default {

  esbuild: {

    jsx: 'automatic' // React 17+ 的新 JSX 转换

  }

}

最后检查下你的文件扩展名，要用 .jsx 或 .tsx，普通的 .js 文件默认不会启用 JSX 转换。

我自己刚开始用的时候也在这卡了半天，后来发现文档里这个配置写得比较隐蔽。如果还有问题可能是依赖没装对，记得检查下是否安装了 vue/preact/react 这些必要的库。

2026-03-07 19:03