迁移Vite到4.x后react插件配置报错怎么办？

哲玮（打工版）提问于 2026-02-17 10:23:28 阅读 20

工具

今天升级Vite到4.x后，react插件配置突然报错了。之前用vite-plugin-react时这样写的：


import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'classic',
      jsxImportSource: '@vitejs/react-hooks'
    })
  ]
})

启动时报Unknown option react.jsxRuntime，迁移指南里没提到这个变化。我试过把选项移到vite配置顶层：


export default defineConfig({
  jsxRuntime: 'classic',
  plugins: [react()]
})

但依然报同样的错，控制台还提示Unexpected vite option: jsxRuntime。之前查文档看到Vite4开始支持jsxTransform，是不是应该改用新配置方式？

我来解答赞 3 收藏

反馈

2 条解答

司空荣荣 Lv1

Vite 4.x 的 react 插件已经移除了 jsxRuntime 和 jsxImportSource 配置项，改成自动推断了。试试这个配置：

import react from '@vitejs/plugin-react'



export default defineConfig({

  plugins: [react()]

})

如果确实需要 classic 模式，建议检查项目依赖和 Babel 配置，可能需要手动处理 JSX 转换逻辑。我刚踩过这个坑，累死了。

2026-02-18 16:12

诸葛天佑 Lv1

这个问题我之前也碰到过，Vite4对React插件的配置确实做了些调整。你现在用的@vitejs/plugin-react已经不需要手动配置jsxRuntime这些选项了，它会自动根据项目情况选择合适的jsx处理方式。

正确的写法应该简化成这样：

import react from '@vitejs/plugin-react'



export default defineConfig({

  plugins: [react()]

})

记得把vite.config.js里那些jsx相关的配置都去掉，像jsxRuntime和jsxImportSource这些都不需要了。Vite4开始内置了jsx自动转换的功能，所以插件变得更轻量化。

如果你还需要用到classic模式，可以在tsconfig.json或者jsconfig.json里这样配置：

{

  "compilerOptions": {

    "jsx": "react"

  }

}

改完记得重启开发服务器，有时候热更新可能不会生效。我当初也是折腾了一会儿才发现官方文档里其实有提到这个改动，只是不太显眼。

2026-02-17 11:36