× TypeError: fs.existsSync is not a function
tudiantuan opened this issue · 10 comments
@tudiantuan, thank you for the report. But, I don't find such a problem at all.
@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.
Steps to reproduce:
- Clone this repo
- Open any React file, e.g. App.tsx
- 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.
@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?
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.
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
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
@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
@stereosteve, window.require
is an ugly workaround.
There is a better fix:
electron/electron#7300 (comment)