Electron开发环境运行Vite项目报错：react包缺少./jsx-runtime.js指定符

原因分析 #

这个错误是因为Vite预构建插件无法在React包中找到./jsx-runtime.js文件，该文件是React 17及以上版本用于JSX自动转换的核心文件，常见于版本不兼容、依赖安装不完整或配置异常场景。

修复步骤 #

• 检查并升级React版本
  先确认当前React版本是否低于17：

  npm list react react-dom
  

  若版本不足，直接升级到最新稳定版：

  npm install react@latest react-dom@latest
  

• 更新Vite React插件
  旧版的@vitejs/plugin-react-refresh已被废弃，需替换为官方维护的@vitejs/plugin-react，并在配置文件中显式声明：

  1. 安装新版插件：

     npm install @vitejs/plugin-react --save-dev
     

  2. 修改vite.config.js/vite.config.ts：

     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
     
     export default defineConfig({
       plugins: [react()]
     })
     

• 强制重新安装依赖
  若依赖安装存在损坏，执行以下命令彻底清理并重装：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install --force
  

• 添加Vite路径别名适配
  针对Electron环境可能存在的路径解析问题，在Vite配置中添加别名：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        'react/jsx-runtime': 'react/jsx-runtime.js'
      }
    }
  })
  

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