React与Electron Forge集成：自定义组件无法渲染显示空白

1. 检查Webpack扩展名解析配置 #

确保Webpack能识别.jsx扩展名，在渲染进程的Webpack配置文件（如webpack.renderer.config.js）中，把.jsx加入resolve.extensions：

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
};

2. 验证Babel React预设配置 #

确认Babel已正确配置React转换规则，在babel.config.js中包含@babel/preset-react：

module.exports = {
  presets: [
    '@babel/preset-env',
    ['@babel/preset-react', { runtime: 'automatic' }] // 启用自动JSX转换，无需手动导入React
  ],
};

3. 核对组件的导出与导入 #

• 确认Layout组件的导出方式：
  • 若为默认导出：export default Layout;，导入时使用import Layout from './Layout';
  • 若为命名导出：export const Layout = () => {...};，导入时使用import { Layout } from './Layout';
• 检查组件路径的拼写与大小写（类Unix系统严格区分文件名大小写）。

4. 确保Webpack Loader处理JSX文件 #

在渲染进程的Webpack配置中，添加babel-loader来解析.jsx文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

5. 检查React渲染逻辑与DOM节点 #

• 确认index.html中存在用于挂载React的DOM节点：

<div id="root"></div>

• 渲染代码需正确指向该节点：

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

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

6. 排查控制台错误 #

打开Electron开发者工具（快捷键Ctrl+Shift+I），查看控制台是否有模块未找到、组件渲染报错等信息，这些能快速定位具体问题。

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