Electron主进程向渲染进程传文件报错：无法克隆对象

核心错误原因 #

1. 你在主进程中试图传递函数对象filee给渲染进程，Electron的IPC机制仅支持传递可序列化的JSON数据（数组、普通对象、字符串等），函数属于非可序列化对象，直接传递会触发克隆失败错误。
2. 使用了fs.readdir的回调版本，异步逻辑处理错误：还没获取到文件列表就执行了发送操作，且forEach中的return无法返回文件列表结果。

分步修改代码 #

1. 主进程 main.js #

改用fs.promises.readdir（Promise版本）获取文件列表，确保拿到结果后再通过IPC传递，同时修正IPC事件的处理逻辑：

const { ipcMain } = require('electron');
const fs = require('fs').promises; // 使用Promise版fs

ipcMain.handle('send-getFile', async (event, data) => {
    console.log(data);
    try {
        const directoryPath = '/home/xyz/Javascript/';
        // 异步获取文件列表
        const files = await fs.readdir(directoryPath);
        // 直接返回文件列表给渲染进程（通过invoke的Promise返回）
        return files;
    } catch (err) {
        console.error('Unable to scan directory:', err);
        throw err; // 抛出错误让渲染进程捕获
    }
});

2. 预加载脚本 preload.js #

修正API暴露逻辑，让渲染进程能通过Promise获取主进程返回的文件列表：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    sendGetFile: async (data) => {
        // 调用主进程的handle方法并返回文件列表
        return ipcRenderer.invoke('send-getFile', data);
    }
});

3. 渲染进程 renderer.js #

在按钮点击时直接调用API获取文件列表，简化逻辑并处理异步结果：

function App() {
    const getFiles = async () => {
        try {
            const test = "From App";
            const files = await window.electronAPI.sendGetFile(test);
            console.log(files); // 打印获取到的文件列表
        } catch (err) {
            console.error('获取文件失败:', err);
        }
    };

    return (
        <div>
            <div>
                <button onClick={getFiles}>获取文件列表</button>
            </div>
        </div>
    );
}

补充说明 #

• 所有IPC传递的数据必须是可序列化JSON，如果需要传递文件的更多信息（比如大小、修改时间），可以用fs.promises.stat遍历文件获取后，组装成普通对象数组再传递。
• 优先使用ipcRenderer.invoke + ipcMain.handle的组合，它基于Promise，异步逻辑更清晰，还能直接处理返回值和错误。

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