电子/反应；未捕获的错误：不支持“child_process”的动态要求

Question

我是新手，请不要批评我。我花了 10 个小时寻找解决方案，但没有找到。我正在尝试创建一个“容器”应用程序，当用户单击“容器”应用程序中的按钮时，该应用程序要么下载其他应用程序（如果它们不存在），要么打开它们的 .exe 文件（如果它们确实存在）。最初，我尝试使用 .bat 文件执行 msedge.exe 文件，结果成功。

我们的团队正在使用 Electron/React/Node.js/Vite，并且我们已经设置了一个样板作为启动板。我创建了一个“Deeplinker.jsx”脚本并通过“main.tsx”渲染它。该程序运行良好并显示我的警报消息，但是，当我取消注释以下两行代码时，它会出错：

import {execFile} from 'child_process';
execFile("C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe");

这是错误消息：

Uncaught Error: Dynamic require of "child_process" is not supported 
  at chunk-7FP5O474.js?v=d7119b79:7:9
    at child_process.mjs:1:50

我已将错误隔离到“Deeplinker.jsx”文件中的这两行注释中。我们的网络管理员可能锁定了我们的权限，所以也许这就是我收到错误的原因。

有人可以提供建议并帮助我解决这个问题吗？这是脚本：

// main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import DeepButton from './Deeplinker.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
  <DeepButton/>
  </React.StrictMode>,
)

postMessage({ payload: 'removeLoading' }, '*')

// Deeplinker.jsx

import {execFile} from 'child_process';

function DeepLink(){
    alert("Button pressed");
    execFile("C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe");
}

function DeepButton(){
    return (
        <h1>
            <button  onClick={DeepLink}>Deeplink</button>
        </h1>);
}

export default DeepButton;

Answer 1

您使用的样板可能是为人们使用与节点交互的安全方法而设计的。他们希望您在预加载脚本中创建函数，并且只能通过

contextBridge

api 访问它们。

示例：https://www.electronjs.org/docs/latest/tutorial/context-isolation

默认方法

预加载.js

// preload with contextIsolation enabled
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  doAThing: () => {}
})

renderer.js（或在 React 中）

// use the exposed API in the renderer
window.myAPI.doAThing()

---

其他方法

您可以禁用 contextBridge 并启用与节点交互的原始方法。

找到他们创建 BrowserWindow 的位置。启用节点集成和 禁用 contextIsolation 以便您可以在渲染方法中访问节点工具。如果出现错误，也请删除他们使用 contextBridge 的地方。

   mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });

这应该有效

import childProcess from 'child_process';

function App() {...