Electron React Boilerplate集成DeepLinks遇--require错误求助

1. 确认主进程事件绑定的时机与完整性 #

ERB的主进程启动逻辑有封装，需确保DeepLink相关事件在app.whenReady()之后绑定，且覆盖全平台：

• macOS：监听open-url事件，阻止默认行为并传递URL到渲染进程
• Windows/Linux：监听second-instance事件，从命令行参数中提取DeepLink URL
  示例代码（main.ts中）：

import { app, BrowserWindow, ipcMain } from 'electron';
import path from 'path';

let mainWindow: BrowserWindow | null;

app.whenReady().then(() => {
  // 初始化主窗口逻辑...

  // macOS DeepLink处理
  app.on('open-url', (event, url) => {
    event.preventDefault();
    if (mainWindow) {
      mainWindow.restore();
      mainWindow.focus();
      mainWindow.webContents.send('deep-link', url);
    }
  });

  // Windows/Linux DeepLink处理（开发/生产环境兼容）
  if (!app.isPackaged) {
    if (process.platform === 'win32' || process.platform === 'linux') {
      app.on('second-instance', (event, commandLine) => {
        const deepLinkUrl = commandLine.find(arg => arg.startsWith('electron-fiddle://'));
        if (deepLinkUrl && mainWindow) {
          mainWindow.restore();
          mainWindow.focus();
          mainWindow.webContents.send('deep-link', deepLinkUrl);
        }
      });
    }
  }

  // 注册协议客户端（兼容开发/生产环境）
  if (app.isPackaged) {
    app.setAsDefaultProtocolClient('electron-fiddle');
  } else {
    // 开发环境需指定Electron执行路径，避免协议关联到Node.js
    app.setAsDefaultProtocolClient('electron-fiddle', process.execPath, [path.resolve(process.argv[1])]);
  }
});

2. 验证渲染进程的IPC监听有效性 #

ERB通过Webpack打包渲染代码，需确保IPC监听未被模块隔离或热重载影响：
在React根组件（如App.tsx）中添加监听逻辑：

import { useEffect } from 'react';
import { ipcRenderer } from 'electron';

function App() {
  useEffect(() => {
    const handleDeepLink = (_event: Electron.IpcRendererEvent, url: string) => {
      console.log('DeepLink URL:', url);
      // 这里替换为你的Firebase Auth替代逻辑
    };

    ipcRenderer.on('deep-link', handleDeepLink);
    // 组件卸载时移除监听，避免内存泄漏
    return () => ipcRenderer.removeListener('deep-link', handleDeepLink);
  }, []);

  return <div>Your App Content</div>;
}

export default App;

同时检查主窗口的WebPreferences配置，确保ipcRenderer可用：

// main.ts中创建BrowserWindow的配置
const mainWindow = new BrowserWindow({
  // 其他配置...
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    // 若使用preload脚本，需在preload中暴露ipcRenderer方法
  }
});

3. 排查Webpack配置的潜在影响 #

ERB默认的Webpack渲染进程配置（webpack.config.renderer.dev.ts）需确保：

• electron模块被正确标记为外部依赖（ERB默认已配置externals: ['electron']，避免Webpack打包Electron原生模块）
• 热重载未导致IPC监听丢失：测试时可临时关闭热重载，或在热重载后重新注册监听逻辑
• 入口文件配置正确：确保渲染进程的入口能初始化所有必要的事件监听

4. 测试打包后的应用状态 #

开发环境下的协议关联可能存在路径问题，建议打包后再验证：

• 执行ERB的打包命令（如npm run package）
• 安装打包后的应用，测试electron-fiddle://open是否能正常唤起应用并传递URL

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