React Vite项目运行报错：TypeError: _jsxDEV is not a function

问题描述 #

运行React Vite项目时触发TypeError: _jsxDEV is not a function错误，即使将组件简化为仅显示test内容，报错依然存在。

相关代码与配置 #

main.tsx

import '../src/styles/global.css'

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

import { ThemeProvider } from './theme/theme-provider'

createRoot(document.getElementById('root') as HTMLElement).render(
  <StrictMode>
    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
      <div>test</div>
    </ThemeProvider>
  </StrictMode>,
)

vite.config.js

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

export default defineConfig(({ mode }) => {
  return {
    plugins: [react()],
    root: '.',
    build: {
      outDir: path.resolve(__dirname, 'dist'),
      emptyOutDir: true,
      sourcemap: mode !== 'production',
      minify: 'terser',
      rollupOptions: {
        input: path.resolve(__dirname, 'index.html'),
        output: {
          manualChunks: (id) => {
            if (id.includes('node_modules')) {
              return 'vendor'
            }
          },
        },
      },
      terserOptions: {
        compress: {
          drop_console: true,
          pure_funcs: ['console.log', 'console.info'],
        },
      },
    },
    define: {
      'process.env.NODE_ENV': JSON.stringify(mode),
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  }
})

解决方案 #

• 移除手动设置的process.env.NODE_ENV
  Vite会根据运行模式自动注入NODE_ENV变量，手动定义会干扰React在开发模式下的JSX编译逻辑。删除vite.config.js中的define配置块即可。

• 仅在生产模式启用terser压缩
  当前配置中build.minify固定为terser，会导致开发模式下代码被错误压缩，破坏React的_jsxDEV函数。修改为仅生产模式启用：

  minify: mode === 'production' ? 'terser' : false,
  

• 更新@vitejs/plugin-react插件
  插件版本与React版本不兼容可能引发该问题，执行命令更新插件：

  npm install @vitejs/plugin-react@latest
  

• 重置依赖
  若上述方法无效，清除现有依赖后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

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