require('electron') in isDev fails with webpack

[glass-edge]

I'm building an electron app based on electron-react-boilerplate with these versions:

electron: ^31.3.0
react-router-dom: ^6.22.3
electron-router-dom: ^2.0.0
webpack: ^5.88.2

And react-router-dom didn't work out of the box, so I tried electron-router-dom which seems to be functional, however with one problem. There is a function isDev that calls require('electron') and fails with the following error:

ERROR in ./node_modules/electron/index.js 1:11-24
Module not found: Error: Can't resolve 'fs' in '???\node_modules\electron'
 @ ./node_modules/electron-router-dom/dist/esm/index.js 65:20-39
 @ ./src/lib/electron-router-dom.ts 3:0-59 4:41-61
 @ ./src/renderer/App.tsx 9:0-52 41:17-23
 @ ./src/renderer/index.tsx 5:0-24 9:52-55

ERROR in ./node_modules/electron/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in '???\node_modules\electron'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
 @ ./node_modules/electron-router-dom/dist/esm/index.js 65:20-39
 @ ./src/lib/electron-router-dom.ts 3:0-59 4:41-61
 @ ./src/renderer/App.tsx 9:0-52 41:17-23
 @ ./src/renderer/index.tsx 5:0-24 9:52-55

webpack compiled with 2 errors

I am not familiar with webpack, and it looks like changing its configs would be too intrusive a change. Ideally the issue would be fixed by changing isDev function in electron-router-dom not to call require. Perhaps isDev variable could be injected with an argument to createElectronRouter?

Is there any quick fix to this? Right now I'm thinking of patching \node_modules\electron-router-dom\dist\esm\index.js to amend isDev behaviour.

[daltonmenezes]

@glass-edge there's nothing wrong by changing something that was not well configured for this use case. You should change your webpack config as mentioned on this issue on electron-react-boilerplate repo

Just edit your .erb/configs/webpack.config.base.ts file by adding the fallback property in the resolve object like this:

  /**
   * Determine the array of extensions that should be used to resolve modules.
   */
  resolve: {
    fallback: {
      path: false,
      fs: false,
    },
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    modules: [webpackPaths.srcPath, 'node_modules'],
    // There is no need to add aliases here, the paths in tsconfig get mirrored
    plugins: [new TsconfigPathsPlugins()],
  },

This should fix the issue you are facing!

[isolonenko]

Heyo @daltonmenezes !
Having the same issue using electron-vite-react boilerplate, how can I resolve it in that case?

[daltonmenezes]

Heyo @daltonmenezes ! Having the same issue using electron-vite-react boilerplate, how can I resolve it in that case?

From what I've tested, I assume it's not the same issue. Could you please describe better the problem you're facing?

[glass-edge]

Thanks @daltonmenezes. I ended up requiring more modifications to the code to accommodate my situation unfortunately. In packaged application I must still use browserWindow.loadURL instead of browserWindow.loadFile in registerRoute because files are loaded from asar package. And to fix hot reload in debug builds I had to remove useMemo in Router function.

My initial problem is addressed though, no objections to closing this issue anytime.