Module not found: Can't resolve 'fs' in 'node_modules\electron'

[manuel-rw]

Summary

I am experiencing issues importing packages. Here, i imported ipc using import { ipcRenderer } from 'electron'.
However, it doesn't matter what i import - it occurs with every package i use in React components.

 × ｢wdm｣: ERROR in ./node_modules/electron/index.js 1:11-24
Module not found: Error: Can't resolve 'fs' in 'E:\node_apps\chat-app\chat-app\node_modules\electron'
 @ ./src/renderer/components/Titlebar.tsx 9:22-53
 @ ./src/renderer/App.tsx 11:0-45 29:38-46
 @ ./src/renderer/index.tsx 7:0-24 8:41-44

I'm pretty new to Electron, but not to React (maybe i'm overlooking something?).
This post didn't help me, but might be related.

My environment

node: 16.8.0
npm: 7.21.0
yarn: 1.22.11

[evanandrewrose]

#2949

https://electron-react-boilerplate.js.org/docs/native-modules/

[evanandrewrose]

@manuel-rw

I was struggling with the same thing and I originally thought the solution I linked was the correct approach (first day on electron). But I'm now understanding that IPC is designed to solve the security problem that we're introducing with the link I shared.

Take a look at the IPC event emitted in index.ejs. It's using the API exposed via preload.js, which I think is a common pattern for electron apps. This interface forwards requests to the event handler in Main.ts. By modifying those touch points, I was able to get my fs-related API call working from my react components.

So, you shouldn't need to import ipcRenderer directly into your renderer .tsx files. Instead, you can use the API you manage via window.electron.ipcRenderer, as is done in the boilerplate ipc example.

[manuel-rw]

Thanks for your comment.
While it does make sense reading it, could you give me a real world example?
I'm quite confused, since i can't find any window.electron.ipcRenderer object in my .tsx components.
Also, the built-in example of IPC is not used in any tsx component but in a ejs file.

My goal is to close, minimize and maximize the electron window from a react component.

[wayaway-jtm]

Thanks for your comment.
While it does make sense reading it, could you give me a real world example?
I'm quite confused, since i can't find any window.electron.ipcRenderer object in my .tsx components.
Also, the built-in example of IPC is not used in any tsx component but in a ejs file.

My goal is to close, minimize and maximize the electron window from a react component.

Try this answer.

Basically the problem is Typescript doesn't recognize electron as a property of window so it errors out during the build process. If you add the global.d.ts file like in the link above it basically says "hey Typescript electron does exist on window".

Anything exposed in the preload.js via contextBridge.exposeInMainWorld will also have to be added to the global.d.ts file. The reason for this is security. This way the browser application only has access to whatever properties it needs instead of the entirety of ipcRenderer or node or whatever is exposed.

[alielmajdaoui]

@manuel-rw

I was struggling with the same thing and I originally thought the solution I linked was the correct approach (first day on electron). But I'm now understanding that IPC is designed to solve the security problem that we're introducing with the link I shared.

Take a look at the IPC event emitted in index.ejs. It's using the API exposed via preload.js, which I think is a common pattern for electron apps. This interface forwards requests to the event handler in Main.ts. By modifying those touch points, I was able to get my fs-related API call working from my react components.

So, you shouldn't need to import ipcRenderer directly into your renderer .tsx files. Instead, you can use the API you manage via window.electron.ipcRenderer, as is done in the boilerplate ipc example.

TLDR; if you have an import of ipcRenderer from react library on any renderer file, the error will occur!

[arnaudambro]

#2949

https://electron-react-boilerplate.js.org/docs/native-modules/

I did that, but I can see it's not the first thing to do.

The first thing to do is: do NOT import directly ipcRenderer in any front-end javascript files.

in ./src/main/preload.ts there is

electron-react-boilerplate/src/main/preload.ts

Line 27 in 944dad5

contextBridge.exposeInMainWorld('electron', electronHandler);

then you can

• add any ipcRenderer method you want to that electronHandler object
• use them with window.electron.ipcRenderer

and job done

[sebastianripari]

Hi all !

For all interested in use ipcRenderer, here is a example how to use it:
https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/v4.6.0/src/renderer/index.tsx