Electron 19中dialog、remote未定义，showOpenDialog报错如何解决？

问题根源 #

Electron 14版本起已完全移除remote模块，所以你配置enableRemoteModule: true毫无作用；同时dialog是主进程专属模块，渲染进程无法直接通过require('electron')获取，必须通过IPC（进程间通信）让主进程代为调用。

标准解决方案（符合Electron安全规范） #

推荐使用preload脚本配合Context Isolation（默认开启）的方式，这是Electron新版本推荐的安全实践。

1. 修改主进程代码（index.js）

const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true, // 保持开启，提升安全性
      preload: path.join(__dirname, 'preload.js') // 指定预加载脚本
    }
  });

  mainWindow.loadFile('index.html');
}

// 监听渲染进程的保存文件请求，处理后返回结果
ipcMain.handle('save-file', async (event, options) => {
  const { name, extensions, fileName } = options;
  const filters = [{ 
    name: name, 
    extensions: Array.isArray(extensions) ? extensions : [extensions] 
  }];
  
  // 注意：showSaveDialog没有`name`和`icon`参数，这两个配置会被忽略
  const result = await dialog.showSaveDialog(null, {
    properties: ['saveFile'],
    filters: filters,
    defaultPath: `${fileName || name}.${Array.isArray(extensions) ? extensions[0] : extensions}`
  });
  
  return result;
});

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

2. 创建preload.js脚本

用于在渲染进程安全暴露IPC接口：

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

// 向渲染进程暴露命名为electronAPI的对象
contextBridge.exposeInMainWorld('electronAPI', {
  saveFile: (options) => ipcRenderer.invoke('save-file', options)
});

3. 修改渲染进程的SaveFile函数

window.SaveFile = async function (options, callBack) {
  try {
    // 通过暴露的electronAPI调用主进程的保存逻辑
    const result = await window.electronAPI.saveFile(options);
    callBack(result);
  } catch (err) {
    console.error('保存文件失败:', err);
    callBack({ canceled: true });
  }
};

临时简化方案（不推荐，安全性较低） #

如果暂时不想配置preload脚本，可以关闭Context Isolation并开启Node集成（仅适合开发环境或非敏感场景）：

1. 修改主进程webPreferences配置

webPreferences: {
  contextIsolation: false,
  nodeIntegration: true
}

2. 修改渲染进程代码

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

window.SaveFile = async function (options, callBack) {
  try {
    const result = await ipcRenderer.invoke('save-file', options);
    callBack(result);
  } catch (err) {
    console.error('保存文件失败:', err);
    callBack({ canceled: true });
  }
};

主进程的ipcMain.handle部分和标准方案一致。

额外注意事项 #

• 你原代码中showSaveDialog的name和icon参数是无效的，Electron的dialog.showSaveDialog不支持这两个配置，需直接移除。
• 尽量使用async/await替代回调函数，代码可读性更高，也更符合Electron新版API的设计。

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