Electron渲染层引入ipcRenderer提示__dirname未定义

该报错由electron-react-boilerplate默认配置的两个规则共同导致：

1. 渲染进程默认关闭Node.js集成，且开启上下文隔离，不允许直接在React渲染层代码中导入electron核心模块
2. 渲染进程对应的webpack打包配置默认没有注入__dirname全局变量

不要直接在渲染层组件导入ipcRenderer，改用预加载脚本暴露通信API：

• 找到项目src/main/preload.ts（js项目对应preload.js）文件，按需暴露你需要的通信能力，不要直接抛出整个ipcRenderer：

import { ipcRenderer, contextBridge } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel: string, data: any) => ipcRenderer.send(channel, data),
  receive: (channel: string, callback: (...args: any[]) => void) => {
    ipcRenderer.on(channel, (_event, ...args) => callback(...args));
  }
});

• electron-react-boilerplate默认已经配置好了预加载脚本的加载规则，只要你没改过主进程BrowserWindow的webPreferences配置就不需要额外调整，默认配置如下：

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    // 下面两个配置保持默认即可，修改会引入安全漏洞
    contextIsolation: true,
    nodeIntegration: false,
  }
})

• 删除你写的import {ipcRenderer} from 'electron'语句，在React组件中直接调用挂载到window上的API即可：

// 直接调用暴露的方法
window.electronAPI.send('your-channel', { payload: 'test' });

如果是TS项目提示window上没有electronAPI类型，在src/renderer目录下新建global.d.ts添加类型声明即可：

export {};
declare global {
  interface Window {
    electronAPI: {
      send: (channel: string, data: any) => void;
      receive: (channel: string, callback: (...args: any[]) => void) => void;
    };
  }
}

如果你确定你的渲染进程永远不会加载任何外部不可信内容，可以强制开启渲染层Node集成：

• 将主进程BrowserWindow配置中的nodeIntegration改为true，contextIsolation改为false
• 修改渲染进程对应的webpack配置，添加node全局变量注入规则：

module.exports = {
  // 其余配置保持不变
  node: {
    __dirname: false,
    __filename: false
  }
}

该方案会大幅降低应用安全性，非特殊场景不要使用

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