ElectronJS创建React项目运行白屏问题排查求助

核心问题定位 #

你当前项目白屏的首要原因是src目录下的index.js、app.js文件内容完全错误，存储的是HTML模板片段，不是合法的JavaScript/JSX代码，React无法完成组件挂载渲染，代码运行直接报错中断。

修复步骤 #

• 修正入口文件src/index.js
  该文件是React项目的渲染入口，负责将根组件挂载到HTML的root节点上，替换为以下合法代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• 修正根组件文件src/App.js（建议将原app.js重命名为首字母大写的App.js，符合React组件命名规范）
  该文件是项目根组件，需要返回合法JSX内容，测试阶段可以先用最简代码验证：

function App() {
  return (
    <div>
      <h1>Electron + React 运行正常</h1>
    </div>
  );
}

export default App;

• 校验Electron主进程的页面加载配置
  开发环境下不要直接加载本地HTML文件，需要加载React本地开发服务的地址，同时建议默认打开开发者工具方便排查后续问题，参考配置：

// Electron主进程代码片段
const { BrowserWindow } = require('electron')
const path = require('path')

const mainWindow = new BrowserWindow({
  width: 900,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
})

if (process.env.NODE_ENV === 'development') {
  // 开发环境加载React dev server地址，端口和你本地React服务启动端口一致
  mainWindow.loadURL('http://localhost:3000')
  mainWindow.webContents.openDevTools()
} else {
  // 生产环境加载打包后的本地HTML文件
  mainWindow.loadFile(path.join(__dirname, '../build/index.html'))
}

• 校验package.json配置
  在package.json中添加"homepage": "./"字段，避免打包后资源引用路径错误导致白屏。

验证方式 #

修改完上述文件后，先重启React开发服务，再启动Electron进程即可看到页面内容。如果仍有异常，直接看开发者工具Console面板的报错信息定位即可，当前你提供的两个JS文件存在语法级错误，修正后基础渲染链路就能打通。

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