Electron+React+TypeScript中使用ipcRenderer报fs模块未找到错误解决

方法1：通过预加载脚本暴露ipcRenderer（官方推荐，安全） #

渲染进程的浏览器环境无法直接访问Electron的node模块，通过预加载脚本在上下文隔离的前提下暴露安全的API是最优方案。

1. 创建预加载脚本（比如preload.ts）：

import { ipcRenderer, contextBridge } from 'electron';

// 仅暴露需要用到的API，同时验证频道合法性
contextBridge.exposeInMainWorld('electronAPI', {
  sendToMain: (channel: string, data: any) => {
    const validChannels = ['user-action', 'data-submit'];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  listenFromMain: (channel: string, callback: (...args: any[]) => void) => {
    const validChannels = ['main-response', 'update-notify'];
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (_, ...args) => callback(...args));
    }
  }
});

2. 在主进程的BrowserWindow配置中指定预加载脚本：

import { BrowserWindow } from 'electron';
import * as path from 'path';

const createMainWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, '../preload/preload.js'), // 指向编译后的预加载脚本路径
      contextIsolation: true, // 强制开启上下文隔离，保障安全
      nodeIntegration: false // 禁用node集成，避免浏览器环境直接访问node模块
    }
  });

  mainWindow.loadURL('http://localhost:3000'); // 加载React开发服务
};

3. 在React TypeScript中使用：
   首先添加全局类型声明（比如src/types/electron.d.ts）：

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

export {};

然后在组件中调用：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 监听主进程推送的消息
    window.electronAPI.listenFromMain('main-response', (msg) => {
      console.log('收到主进程消息:', msg);
    });

    // 向主进程发送消息
    window.electronAPI.sendToMain('user-action', '按钮被点击');

    // 组件卸载时清理监听器
    return () => {
      ipcRenderer.removeAllListeners('main-response');
    };
  }, []);

  return <div>Electron + React 示例</div>;
}

export default App;

方法2：配置Webpack忽略Node模块（仅适合开发测试，不安全） #

如果只是开发阶段临时调试，可通过修改Webpack配置规避模块找不到的问题，但此方法会降低应用安全性，不建议生产环境使用。

1. 安装craco（用于重写create-react-app的Webpack配置）：

npm install @craco/craco --save-dev

2. 创建craco.config.js：

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          fs: false,
          path: false,
          os: false
        }
      },
      externals: {
        electron: 'commonjs electron'
      }
    }
  }
};

3. 修改package.json的启动脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 在React组件中直接使用：

import { ipcRenderer } from 'electron';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    ipcRenderer.send('test-channel', '测试消息');
  }, []);

  return <div>测试页面</div>;
}

export default App;

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