Electron Forge项目中React Dev Tools无法连接React实例的问题求助

大家好，我最近在一个Electron Forge项目里遇到了个棘手的问题：React开发者工具明明已经被主进程正确安装到Electron的用户路径中，但始终无法连接到渲染进程里的React实例。

先给大家说下我项目用的技术栈：

• React (17.0.2)
• React Dev Tools (4.27.2-1a88fbb67)
• React-Redux (7.2.9)
• Electron (23.1.1)
• electron-devtools-installer (3.2.0)
• @electron-forge/cli (6.0.5)

下面是我的主进程代码main.js：

const { app, session, BrowserWindow } = require('electron')

import {
enable as enableElectronRemote,
initialize as initializeElectronRemote,
} from '@electron/remote/main'

import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer'

const addDevTools = async () => {
await installExtension(REACT_DEVELOPER_TOOLS, { loadExtensionOptions: { allowFileAccess: true }})
.then((name) => console.log(`Added Extension:  ${name}`))
.catch((err) => console.log('An error occurred: ', err));

await installExtension(REDUX_DEVTOOLS)
.then((name) => console.log(`Added Extension:  ${name}`))
.catch((err) => console.log('An error occurred: ', err));
}

// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
nodeIntegration: true,
contextIsolation: false,
},
});

enableElectronRemote(mainWindow.webContents);

// and load the index.html of the app.
mainWindow.loadURL(`${MAIN_WINDOW_WEBPACK_ENTRY}`);

addDevTools()
.then(() => {
if (process.env.NODE_ENV === 'development') {
// Open the DevTools.
mainWindow.webContents.on('did-frame-finish-load', () => {
mainWindow.webContents.openDevTools();
})
}
})

奇怪的是，Redux DevTools能完美连接Redux实例和状态，但React DevTools一直显示：

Loading React Element Tree...
If this seems stuck, please follow the troubleshooting instructions.

Electron启动时的控制台输出显示React DevTools已经成功添加了：

Added Extension:  React Developer Tools
(node:312) ExtensionLoadWarning: Warnings loading extension at /home/jack/.config/electron/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd:
Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.
Permission 'notifications' is unknown or URL pattern is malformed.
Permission 'contextMenus' is unknown or URL pattern is malformed.

页面里的<div id="root">设置是正常的，但React DevTools就是找不到它。我翻遍了Electron、Electron Forge和React的相关issue，都没找到匹配的情况。另外，这个应用的Web版本能正常使用React DevTools，所以我确定问题出在Electron和React的交互上。

我还试过不用electron-devtools-installer，手动导入React DevTools，但结果还是一样，卡在加载页面。

正常来说React Developer Tools应该能加载并显示完整的组件树，就像在普通浏览器里那样，但现在它只显示那条加载提示，连错误信息都没有。有没有朋友遇到过类似的问题，能给点解决思路吗？

备注：内容来源于stack exchange，提问作者jmts