Electron-React-Boilerplate 4.0调用IPCRenderer报window无electron属性错误

报错原因 #

该报错为TypeScript类型识别问题，和Tailwind CSS配置无关联：你通过contextBridge在window对象上挂载了自定义的electron属性，但TypeScript的默认全局Window接口定义中没有该属性，因此触发类型校验报错。

解决步骤 #

1. 添加全局类型声明

在项目src目录下新建global.d.ts类型声明文件，写入以下内容：

// 必须加，将该文件标记为模块，才能正常扩展全局类型
export {};

declare global {
  interface Window {
    // 对应你在preload中暴露的electron对象结构
    electron: {
      ipcRenderer: {
        onButtonClick: (msg?: string) => void;
      };
    };
  }
}

完成后检查项目根目录的tsconfig.json，确认include字段包含src/**/*.d.ts（Electron-React-Boilerplate 4.0默认已配置，无需额外修改）。

2. 修正现有代码的逻辑不匹配问题

你目前的代码存在两处参数不匹配的问题，会导致功能无法正常运行：

• preload.js 修正：你在App.tsx中调用onButtonClick时传入了参数，但preload中定义的方法没有接收参数，修改如下：

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

contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: {
    onButtonClick(msg) {
      ipcRenderer.send('button-example', msg);
    },
  },
});

• main.tsx 修正：ipcMain.on的回调第一个参数为事件对象，第二个才是传递的参数，修改如下：

ipcMain.on('button-example', (event, arg) => {
  console.log(arg);
});

3. 确认preload配置生效

检查你创建BrowserWindow的代码，确认webPreferences配置正确：

webPreferences: {
  preload: 你的preload.js文件绝对路径,
  contextIsolation: true, // 必须开启，contextBridge才会生效
  nodeIntegration: false // 建议关闭，提升安全性
}

以上配置完成后重启开发服务，类型报错会消失，IPC通信功能也可正常运行。

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