Electron Forge+Vite+React项目出现Unexpected token '<'错误求助

针对你遇到的SyntaxError: Unexpected token '<'错误，这确实是JSX未被正确转译导致的，下面是几个必查的修复点：

1. 确认Vite React插件配置正确 #

打开vite.renderer.config.mjs，确保已经正确引入并启用了React插件，完整配置示例如下：

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

export default defineConfig({
  plugins: [react()],
});

注意：Electron Forge会自动读取这个文件作为渲染进程的Vite配置，不要写错文件名或路径。

2. 修正渲染进程入口文件的扩展名 #

如果你的入口文件是renderer.js，直接在里面写JSX会被Vite忽略——Vite默认只对.jsx/.tsx后缀的文件处理JSX语法。

• 将renderer.js重命名为renderer.jsx
• 同步修改index.html中的脚本引用路径：

<script type="module" src="/renderer.jsx"></script>

确保type="module"存在，这是Vite处理ES模块和JSX的必要条件。

3. 检查React组件的导出方式 #

确保App.jsx是默认导出组件：

function App() {
  return <div>Hello React + Electron!</div>;
}

export default App;

如果用了命名导出，需要在renderer.jsx里改成import { App } from './App'。

4. 重启开发服务 #

修改Vite配置或文件后缀后，热更新可能不会生效，完全停止当前的npm run start进程，重新启动服务。

按以上步骤排查后，JSX应该能被正常转译为JavaScript，错误即可解决。

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