Vite 里怎么自定义 esbuild 的 JSX 配置？

技术士俊提问于 2026-02-26 15:47:17 阅读 57

前端

我在用 Vite 搭建 React 项目，想让 esbuild 支持自动导入 React，但改了 build.jsxInject 好像没生效？

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

export default {
  esbuild: {
    jsxInject: <code>import React from &#039;react&#039;</code>
  }
}

但还是报 “React is not defined” 的错，是不是写法不对？

我来解答赞 9 收藏

反馈

2 条解答

婷婷 Dev Lv1

哦这个坑我也踩过，vite的esbuild配置要这么写才对：

export default {

  esbuild: {

    jsxInject: 'import React from 'react';'

  }

}

关键点是：
1. jsxInject 的值必须是字符串
2. 字符串里的单引号要转义
3. 最后要有分号

这样配置后每个JSX文件头部都会自动注入这行代码。不过说实话这配置挺鸡肋的，还不如直接用@vitejs/plugin-react插件来得省事。

2026-03-07 08:03

瑞云 Lv1

你这个写法确实不对，jsxInject 是数组，不是字符串，而且 Vite 的 esbuild 配置是嵌套在 build.esbuild 下的，不是顶层的 esbuild。

正确的写法应该是这样：

export default {

  build: {

    esbuild: {

      jsxInject: import React from 'react'

    }

  }

}

注意三点：

第一，jsxInject 是字符串，不是 JSX 表达式，直接写字符串就行，不用加 <code> 这种东西（你题里那个是 HTML 转义写法，估计是从哪复制过来的）；

第二，它必须放在 build.esbuild 下，Vite 2.x 之后顶层没有 esbuild 字段；

第三，如果你用的是 React 17+ 的新 JSX 转换（react-jsx），其实根本不需要 jsxInject，因为自动注入是默认行为。只有你在用旧的 classic 模式（比如手动调用 React.createElement）才需要这个配置。

另外你得确认下你的 tsconfig.json 或 jsconfig.json 里有没有手动指定 jsx 为 preserve 或 react-jsx，要是设成 react-jsx 了，那 jsxInject 根本不会起作用——Vite 会走官方的新转换流程，完全不走 esbuild 的 inject 逻辑。

如果还是报错，建议贴下你的 tsconfig.json 和完整 vite.config.js，我帮你看看是不是配置冲突了。

2026-02-26 16:11