Electron+React+electron-redux出现Can't resolve 'fs'报错求解决方案

1. 修正electron-redux的导入路径 #

electron-redux v1.x版本对主进程、渲染进程的导出做了拆分，避免跨环境引入不需要的依赖：

• 主进程代码（mainStore.js）从electron-redux/main导入相关API
• 渲染进程代码（rendererStore.js）从electron-redux/renderer导入相关API

调整后的代码示例：

mainStore.js #

import { configureStore } from "@reduxjs/toolkit";
import appReducer from "./appSlice";
import {
  forwardToRenderer,
  triggerAlias,
  replayActionMain,
} from "electron-redux/main"; // 改为主进程专属入口

const configureMainStore = () => {
  const store = configureStore({
    reducer:  appReducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(forwardToRenderer),
  });
  replayActionMain(store);
  return store;
};

export default configureMainStore;

rendererStore.js #

import { configureStore } from '@reduxjs/toolkit';
import appReducer from './appSlice';
// 改为渲染进程专属入口，不会引入主进程才用到的fs相关逻辑
import { forwardToMain, replayActionRenderer, getInitialStateRenderer  } from 'electron-redux/renderer';

const configureRendererStore = () => {
  const initialState = getInitialStateRenderer();
  const store = configureStore({
      reducer: appReducer ,
      initialState: initialState,
      middleware: (getDefaultMiddleware) => getDefaultMiddleware().unshift(forwardToMain)
    });
  replayActionRenderer(store);
  return store;
}

export default configureRendererStore;

2. 调整渲染进程webpack配置 #

在webpack.render.config.js中添加externals配置，告知webpack Electron内置模块为运行时外部依赖，不需要打包：

module.exports = {
  module: {
    rules,
  },
  resolve: {
    fallback: {
      path: require.resolve("path-browserify"),
    },
  },
  // 新增externals配置，跳过electron内置模块的打包
  externals: {
    electron: 'commonjs electron',
  }
};

3. 可选：contextIsolation适配（推荐） #

保持Electron默认的contextIsolation: true是安全最佳实践，不需要关闭，仅需新增preload脚本，把electron-redux需要的ipcRenderer API暴露到渲染进程上下文即可：

preload.js #

import { exposeElectronRedux } from 'electron-redux/preload';
exposeElectronRedux();

创建BrowserWindow时指定preload脚本：

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false,
  }
})

完成以上操作即可解决fs模块找不到的报错，无需开启nodeIntegration，也不用设置fs: false的fallback。

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