using electron api from react component

Question

I'm using electron and react, the react app was created with the create-react-app boilerplate. I need to use the electron API to open an external link, but this task is achieve from a react component. I imported the remote electron inside the react component(in order to get access to the current window.) but that gave me an error

const {remote} = require("electron")

The error is raised from electron itself, from node_modules/electron/index.js and the problem is with fs module, it says:

TypeError: fs.existsSync is not a function

This error is showed in the electron windows.

github.com/electron/electron/issues/7300 might be a similar issue. Solution was to use window.require('electron') — Adam Johnston
– Adam Johnston, Commented Aug 7, 2018 at 15:34
No problem. I would recommend reading that whole thread though, because depending on your build environment it can have effects on other parts of your app. I would do a thorough test of everything before moving forward to make sure it's not interfering with anything else — Adam Johnston
– Adam Johnston, Commented Aug 7, 2018 at 16:35

Onno Faber · Accepted Answer · 2020-04-23 00:38:08Z

2

For typescript:

import { IpcRenderer } from 'electron';

declare global {
  interface Window {
    require: (module: 'electron') => {
      ipcRenderer: IpcRenderer
    };
  }
}

const { ipcRenderer } = window.require('electron');

See https://github.com/electron/electron/issues/9920

answered Apr 23, 2020 at 0:38

Onno Faber

6615 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

HoldOffHunger · Accepted Answer · 2020-08-06 21:18:54Z

1

Encountered the same problem using react-create-app.

The fix, using window.require on the React side instead of import

const electron = window.require("electron")

and on the Electron side, when creating BrowserWindow add nodeIntegration: true as follow

mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    webPreferences: { nodeIntegration: true }
});

edited Aug 6, 2020 at 21:18

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Oct 14, 2019 at 21:46

anni

1,4631 gold badge25 silver badges35 bronze badges

Comments

Anatol Zakrividoroga · Accepted Answer · 2021-07-20 11:46:40Z

-1

The answers above are not current.

Here is the correct answer:

Since Electron v12, setting nodeIntegration: true has no affect. Instead, you need to set contextIsolation: false:

mainWindow = new BrowserWindow({
    // ...
    webPreferences: {
        contextIsolation: false,
    }
})

https://github.com/electron/electron/issues/7300#issuecomment-799093768

answered Jul 20, 2021 at 11:46

Anatol Zakrividoroga

4,6282 gold badges36 silver badges57 bronze badges

Collectives™ on Stack Overflow

using electron api from react component

3 Answers 3

Comments

Comments

The answers above are not current.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

The answers above are not current.

Comments

Your Answer

Sign up or log in

Post as a guest

Related