Electron页面刷新后preload函数无法识别的问题求助

问题分析 #

首次启动应用时，通过import { getTheme } from '#preload'能正常获取preload暴露的方法；但通过浏览器工具刷新页面后，初始状态下导入的getTheme和globalThis.__electron_preload__getTheme均为undefined，延迟100ms后globalThis的属性才会出现，且静态导入的getTheme始终保持undefined。

核心原因是：页面刷新后，preload脚本的执行时机晚于React代码的静态导入逻辑；同时#preload别名是构建阶段解析的静态映射，无法同步preload脚本后续动态挂载到globalThis的方法。

解决方案 #

1. 用动态等待工具函数替代静态导入 #

封装工具函数，等待globalThis上的preload方法挂载完成后再返回：

// src/utils/electronPreload.js
export async function waitForPreloadMethod(methodName) {
  return new Promise((resolve) => {
    // 检查方法是否已存在
    const targetKey = `__electron_preload__${methodName}`;
    if (globalThis[targetKey]) {
      return resolve(globalThis[targetKey]);
    }

    // 监听DOM变化，直到方法挂载
    const observer = new MutationObserver(() => {
      if (globalThis[targetKey]) {
        observer.disconnect();
        resolve(globalThis[targetKey]);
      }
    });
    observer.observe(document.documentElement, { 
      attributes: true, 
      childList: true, 
      subtree: true 
    });

    // 1秒超时兜底
    setTimeout(() => {
      observer.disconnect();
      resolve(globalThis[targetKey] || null);
    }, 1000);
  });
}

// 使用示例
async function loadTheme() {
  const getTheme = await waitForPreloadMethod('getTheme');
  if (!getTheme) throw new Error('Preload方法加载超时');
  const theme = await getTheme();
  // 后续业务逻辑
}

2. 规范Electron窗口的webPreferences配置 #

创建窗口时开启contextIsolation（Electron推荐默认配置），确保preload脚本的执行优先级，同时关闭nodeIntegration增强安全性：

// main进程代码
const mainWindow = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    preload: join(app.getAppPath(), 'packages/preload/dist/index.mjs'),
  },
});

3. 改用contextBridge安全暴露preload方法 #

推荐使用Electron官方的contextBridge替代直接挂载globalThis，规范且更安全：

// packages/preload/dist/index.mjs
import { contextBridge, ipcRenderer } from 'electron';

function getTheme() {
  return ipcRenderer.invoke('state:theme:get');
}

// 暴露到渲染进程的window对象
contextBridge.exposeInMainWorld('electronAPI', {
  getTheme
});

对应渲染进程的等待工具函数可调整为：

export async function waitForElectronAPI() {
  return new Promise((resolve) => {
    if (window.electronAPI) {
      return resolve(window.electronAPI);
    }

    const observer = new MutationObserver(() => {
      if (window.electronAPI) {
        observer.disconnect();
        resolve(window.electronAPI);
      }
    });
    observer.observe(document.documentElement, { 
      attributes: true, 
      childList: true, 
      subtree: true 
    });

    setTimeout(() => {
      observer.disconnect();
      resolve(window.electronAPI || null);
    }, 1000);
  });
}

静态导入失效的本质 #

#preload别名是React构建阶段解析的静态路径映射，构建工具会提前替换模块路径并打包。但页面刷新后，Electron的preload脚本是在页面加载过程中动态注入执行的，此时静态导入的模块已加载完成，无法同步preload脚本后续挂载的方法，因此静态导入的变量始终为undefined。

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