cannot import electron in react componment for ipcRenderer

Question

So I am trying to import the ipcRenderer into a react component to communicate with the electron side. The issue is I cannot import electron. I tried

import { ipcRenderer } from 'electron/renderer'

returns module electron/renderer not found

import { ipcRenderer } from 'electron'

returns fs.existsSync is not a function

const renderer = require('electron');

returns fs.existsSync is not a function

const renderer = require('electron').ipcRenderer;

returns fs.existsSync is not a function

const renderer = window.require('electron');

returns window.require is not a function

I do not know what to do anymore, I have tried everything

Answer 1

I got it! using electron-react-bolierplate they prepared a custom preload.js script that exposes three functions to the rendered components: myPing : (Just a demo, send a ping message to the console) and exposes the on and once ipcRenderer methods

import { Component } from 'react';
...
...
    class Hello extends Component {
      componentDidMount() {
        console.log('Mounted!', 'Window', window, 'electronApi', window.electron, 'ipcRenderer', window.electron.ipcRenderer);
    
        window.electron.ipcRenderer.on('ipc-example', (arg) => {
          // eslint-disable-next-line no-console
          console.log(arg);
        });
    
        window.electron.ipcRenderer.myPing();
      }
    
      render() {
        return (
          <div>
    ...
    ...

Answer 2

I used to have same problem. You should not import electron directly inside your renderer/react component. Instead in your preload.ts file you are given some basic configuration by electron-react-bolierplate to use.

So inside your react component you should use window.electron.ipcRenderer.on('channel-name', args) sample below

 const myEventHandler = () => { window.electron.ipcRenderer.on('channel-name', (event, data) => { console.log('data, event', data, event); }); };

window.electron, here electron is the name given in preload.ts file. contextBridge.exposeInMainWorld('electron', {...})