Cannot find module 'fs'

[Zuckabub]

I have an app created with electron-forge trying to utilize electron-redux v1.5.4. I'm also using @reduxjs/toolkit

I have implented my mainRenderer and storeRenderer in the manner described in the readme file, adjusted for @reduxjs/toolkit

mainStore.js

import { configureStore } from "@reduxjs/toolkit";
import appReducer from "./appSlice";
import {
  forwardToRenderer,
  triggerAlias,
  replayActionMain,
} from "electron-redux";

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';
import { forwardToMain, replayActionRenderer, getInitialStateRenderer  } from 'electron-redux';

const configureRendererStore = () => {
  const initialState = getInitialStateRenderer();

  const defaultMiddleWare = get

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

  replayActionRenderer(store);

  return store;
}

export default configureRendererStore;

When I run compiling the Renderer Code I get the following error: ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in 'C:\MyDev\AirFarmer\node_modules\electron', The chrome window gives a bit more detail:

Uncaught Error: Cannot find module 'fs'
    at webpackMissingModule (index.js?bdb9:1)
    at eval (index.js?bdb9:1)
    at Object../node_modules/electron/index.js (index.js:2259)
    at __webpack_require__ (index.js:4332)
    at fn (index.js:4543)
    at eval (forwardToMain.js?74c1:8)
    at Object../node_modules/electron-redux/dist/middleware/forwardToMain.js (index.js:2216)
    at __webpack_require__ (index.js:4332)
    at fn (index.js:4543)
    at eval (index.js?78f6:71)

I've read this is related to webpack v5+

had a similar issue with "path" which I was able to solve with by updating the webpack.render.config:

module.exports = {
  // Put your normal webpack config below here
  module: {
    rules,
  },
  resolve: {
    fallback: {
      path: require.resolve("path-browserify"),
    },
  }
};

I've tried lots of things already including setting nodeIntegration: true in webPreferences when creating the browser window.

Has anybody else experienced this? Does anybody have a solution? Thanks

UPDATE - Still an issue The cause is that "forwardToMain.js" has require("electron");, which in turn requires 'fs'.

[MohitDeshwal]

Facing exact issue, any luck with solution?

[Zuckabub]

Hi @MohitDeshwal, I did get past this in the end, but it required a change in my plan on how to manage state in my electron app, rather than getting what I was trying to do working (Which I now think never would have).

The current security recommendations for electron(https://www.electronjs.org/docs/latest/tutorial/security) point 3 (Enable context isolation in all renderers that display remote content) means you won't be able to utilize a state synching package like 'electron-redux' if you have contextIsolation set to true. You will not be able to utilize any Electron internals in your rendering process.

For my project, I just stopped trying to sync state between renderer and main (using electron-redux) - in the main process I don't have redux, I only use redux in my renderer process.

In places where I need data from main process in state I just expose a method in my preload script using contextBridge, when the render process gets it's response, I stuff it into state then.

https://docs.w3cub.com/electron/tutorial/context-isolation This site here has some starter info on setting up your contextBridge