React Electron项目中execa is not a function错误如何解决？

问题 #

我正在将个人项目升级为使用最新版本Node、npm、Electron、React的React Electron应用，确保通过npm audit检测无漏洞。我使用execa执行ffmpeg命令，代码位于仓库dev分支的src/Components/FFmpeg.js第17行：

import React, { useState, useEffect } from 'react';

/////////////////  execa created here
const execa = window.require('execa');

const readline = window.require('readline');
const moment = window.require("moment");
const { ipcRenderer } = window.require('electron');

async function newstartRender(renderSettings={}){
    console.log('Ffmpeg.js newstartRender() ',renderSettings)
    let {cmdArgs,outputDuration} = createFfmpegCommand(renderSettings.audioFiles, renderSettings.imageFiles, renderSettings.outputFilepath, renderSettings.outputWidth, renderSettings.outputHeight)
    const ffmpegPath = getFfmpegPath('ffmpeg');
    console.log('outputDuration=',outputDuration)
    console.log('cmdArgs=',cmdArgs.join(' '),'\n calling execa \n')
    
//////////////// execa called here
    const process = execa(ffmpegPath, cmdArgs);
}

但调用该代码时出现错误：

FFmpeg.js:17 Uncaught (in promise) TypeError: execa is not a function
    at newstartRender (FFmpeg.js:17:1)
    at startRender (Project.js:99:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)

旧项目中使用完全相同的代码却能正常运行，请问如何修复新项目中的这个错误？

解决方案 #

1. 修正execa的导入方式 #

最新版execa已切换为ES模块规范，默认导出不再是可直接调用的函数。修改你的导入代码：

// 替换原有的const execa = window.require('execa');
const execa = window.require('execa').default;

如果你的项目配置支持ES模块导入，也可以直接用：

import execa from 'execa';

2. 适配Electron上下文隔离机制 #

新版本Electron默认启用上下文隔离，window.require无法直接加载Node模块。需要通过预加载脚本暴露execa：

• 主进程配置（main.js）：

const { BrowserWindow } = require('electron');
const path = require('path');

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true, // 默认启用，无需额外修改
    nodeIntegration: false // 默认禁用，无需额外修改
  }
});

• 预加载脚本（preload.js）：

const { contextBridge } = require('electron');
const execa = require('execa');

contextBridge.exposeInMainWorld('electronAPI', {
  execa: execa
});

• 渲染进程调用（FFmpeg.js）：

// 替换原有的window.require('execa')
const execa = window.electronAPI.execa;

3. 版本兼容性检查 #

旧项目使用的execa版本为CommonJS格式，新版本改为ES模块。若临时需要兼容旧写法，可降级到execa 4.x版本，但长期来看建议适配新版导出方式，避免后续版本迭代带来的问题。

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