浏览器刷新后无法识别电子预加载功能

Question

在我的电子应用程序中，我通过预加载脚本公开了几种预加载方法。当我第一次加载应用程序时，这些方法工作正常。

但是，当我重新加载页面（通过浏览器工具，刷新，无需重新启动应用程序）时，不再找到预加载方法，并且

globalThis

等效项不会立即显示。

在我的反应/渲染器应用程序中，我导入预加载脚本，如下所示：

import { getTheme } from '#preload';

如果在那行之后我写下：

console.log(getTheme)
console.log(globalThis.__electron_preload__getTheme)
setTimeout(()=> {
  console.log('from timeout', getTheme)
  console.log('from timeout', globalThis.__electron_preload__getTheme)
}, 100)

当我第一次启动应用程序时，浏览器输出是：

ƒ () { [native code] }
ƒ () { [native code] }
from timeout ƒ () { [native code] }
from timeout ƒ () { [native code] }

但是，如果我进入 chrome 开发工具并刷新 (CTRL+R)，我就会看到以下内容：

undefined
undefined
from timeout undefined
from timeout ƒ () { [native code] }

这表明

globalThis

需要一些时间（至少 100 毫秒）才能填充，但即使填充，#preload 脚本也永远不会真正起作用。

我怀疑这可能是加载顺序问题。但我看不出有什么方法可以控制它。当我创建电子窗口时，我将 webPreferences.preload 设置为：

preload: join(app.getAppPath(), 'packages/preload/dist/index.mjs'),

---

编辑：示例预加载函数

这是从预加载包导出的示例方法：

export function getTheme(): Promise<string> {
  return ipcRenderer.invoke('state:theme:get');
}

Answer 1

您遇到的问题是使用 ESM 的预加载的竞争条件问题。预加载脚本应该在页面有内容时阻止页面加载（因此在页面之前加载），但它并不总是与 webpack/vite 的重新加载系统一起工作。 关于此错误有一个

未解决的问题

。