× TypeError: fs.existsSync is not a function

[tudiantuan]

[yhirose]

@tudiantuan, thank you for the report. But, I don't find such a problem at all.

[kunokdev]

@yhirose this is common problem when trying to import ipcRenderer into React code.
Seems like this repository doesn't handle/support ipc communication between renderer and main process.

[yhirose]

@kunokdev, great! Could you show me the smallest possible code to reproduce it?

[kunokdev]

Steps to reproduce:

1. Clone this repo
2. Open any React file, e.g. App.tsx
3. Try to import anything electron related

import { ipcRenderer } from "electron";

const App: React.FC = () => {
  console.log(ipcRenderer);

This error appears:

Perhaps changing import to:

const ipcRenderer = window.require("electron").ipcRenderer;

could solve this problem.

[yhirose]

@kunokdev, do you think if it's a problem related to this project, or a typical Electron issue which can happen in any Electron project?

[kunokdev]

I'd say It's caused by electron+cra(webpack) combo; Depends how you wanna look at it; this issue affects this repo; but this repo isn't the cause of the issue. You should probably add something in README or code example where renderer (React) process communicates with main (Electron) process.

[stereosteve]

To use node modules and code in react, the webpack target needs to be electron-renderer.

CRA doesn't make it easy to modify webpack config, options are:

• eject
• add a preload script, and use window.postMessage in react code to send message to preload code, and use ipcRenderer from there. This is described in this article

[kunokdev]

To use node modules and code in react, the webpack target needs to be electron-renderer.

CRA doesn't make it easy to modify webpack config, options are:

• eject
• add a preload script, and use window.postMessage in react code to send message to preload code, and use ipcRenderer from there. This is described in this article

I am successfully using ipcRenderer without ejecting or preload scripts

[stereosteve]

@kunokdev I see that using window.require("fs") instead of using import works, but all the TypeScript typing is missing. Is there a way to get the typing for node modules as well?

---

update this seems to work ok:

import * as FS from "fs";
const fs: typeof FS = window.require("fs");

or:

import { IpcRenderer } from 'electron'
const ipcRenderer: IpcRenderer = window.require('electron').ipcRenderer

[Romex91]

@stereosteve, window.require is an ugly workaround.

There is a better fix:
electron/electron#7300 (comment)