React开发Electron应用，Webpack打包后remote模块出现existsSync报错

这个问题我之前开发Electron+React应用时也踩过坑，主要是两个核心原因：一是Webpack错误地把Node.js核心模块（比如fs）打包进了渲染进程代码，二是Electron新版本对remote模块的使用规则做了调整。下面是具体的解决步骤：

1. 正确启用Electron的remote模块（针对Electron 14+） #

从Electron 14开始，remote模块默认被禁用，得在主进程里手动初始化并启用，推荐用更安全的preload脚本方式：

主进程配置（main.js） #

const { app, BrowserWindow, path } = require('electron');
// 初始化官方替代的remote模块
require('@electron/remote/main').initialize();

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: true, // 开启上下文隔离，提升应用安全性
      preload: path.join(__dirname, 'preload.js') // 指定预加载脚本路径
    }
  });

  // 给当前窗口开启remote功能权限
  require('@electron/remote/main').enable(mainWindow.webContents);
  
  mainWindow.loadURL('你的React应用打包后的地址');
});

预加载脚本（preload.js） #

把remote安全暴露给渲染进程，避免直接在React代码里引入Electron模块：

const { remote } = require('@electron/remote');
// 将remote挂载到window对象，让React代码可以访问
window.electronRemote = remote;

安装依赖包 #

别忘了先安装官方的remote替代包：

npm install @electron/remote --save

2. 配置Webpack，排除Node.js核心模块和Electron #

Webpack默认会尝试打包所有导入的模块，但Electron环境本身已经自带了electron、fs、path这些模块，完全不需要打包。在webpack.config.js里添加externals配置：

module.exports = {
  // ...你的其他Webpack配置（entry、output等）
  externals: {
    electron: 'commonjs electron',
    fs: 'commonjs fs',
    path: 'commonjs path'
  }
};

这样Webpack就会跳过这些模块的打包，运行时直接从Electron环境中获取。

3. 修正React代码里的模块使用方式 #

在React组件里，不要直接import { remote } from 'electron'，而是用预加载脚本暴露的window.electronRemote，并且通过remote.require获取Node.js核心模块：

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Application from './components/Application'

// 使用预加载脚本暴露的remote对象
const remote = window.electronRemote;
// 通过remote.require从主进程获取fs和path模块
const fs = remote.require('fs');
const path = remote.require('path');

const appRoot = document.getElementById('app-root')
// 现在可以正常调用existsSync了
console.log(fs.existsSync('你要检查的文件路径'));

ReactDOM.render(<Application />, appRoot);

关键提醒 #

• 绝对不要在渲染进程里直接import fs或path，这些是Node.js核心模块，渲染进程默认没有直接访问权限，必须通过remote.require从主进程获取。
• 如果你的Electron版本低于14，只需要在主进程的BrowserWindow配置里设置enableRemoteModule: true，同时开启nodeIntegration: true、关闭contextIsolation: false（不过这种方式安全性较低，推荐升级Electron并使用preload脚本方案）。

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