Error while importing electron in react | import { ipcRenderer } from 'electron'

[Amthieu]

I have created a simple react app with create-react-app and I have integrated it with electron successfully. Everything was working great until I tried to import electron inside the action creator file. If I remove the line below, the app works fine. The problem is that I can't use the ipcRenderer to communicate from the react side to the electron main process.

This line causes the app to crash:
import { ipcRenderer } from 'electron';

I get the following error:

TypeError: fs.existsSync is not a function
(anonymous function)
node_modules/electron/index.js:6

  3 | 
  4 | var pathFile = path.join(__dirname, 'path.txt')
  5 | 
> 6 | if (fs.existsSync(pathFile)) {
  7 |   module.exports = path.join(__dirname, fs.readFileSync(pathFile, 'utf-8'))
  8 | } else {
  9 |   throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')

I found out on Google that this is a common problem when trying to import electron.

Thanks for the help

[MarshallOfSound]

CRA uses webpack which messes with standard module loading (including fs).

I'd recommend looking into the Electron mode for webpack and ejecting from CRA

[MarshallOfSound]

GitHub issues are for feature requests and bug reports, questions about using Electron should be directed to the community or to the Slack Channel.

[Amthieu]

@MarshallOfSound my mistake.

I found the solution in issue #7300 if it can help anyone.

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

Please note that this will work when you run the Electron app, but if you just want to test your React code inside the browser it will still crash (window.require is not defined in the browser as it is in Electron).

[ciriousjoker]

If you want to access app.quit(), you can use this:

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

Maybe it helps someone...

[hendrixroa]

@ciriousjoker these is solutions, thanks!

[holgersindbaek]

I'm still getting window.require is not a function. I'm using Electron with React Starter Kit (https://github.com/kriasoft/react-starter-kit). Everything is working nicely, except this.

I've set my Electron app to load my app from the web, so the app is not running locally:
https://gist.github.com/holgersindbaek/68f6db82f507967a51ca75c527faeff6

What I'm trying to do, is call the ipcRenderer in one of my React files. I'm not sure if it's even possible when my app is being loaded from the web though. Any suggestions?

[HemalR]

@holgersindbaek

In the same boat as you... Did you find a solution?

[holgersindbaek]

No. I'm pretty sure it's not possible to load the ipcRenderer from the browser.

[Amthieu]

If you are running your React app in the browser it won't work. Run it inside Electron and you should be fine.

[holgersindbaek]

@Amthieu Thanks for the advice. I'm still in doubt as to how I can make my React project (based on React Starter Kit) run in Electron. Any advice would be greatly appreciated:

https://discuss.atom.io/t/getting-electron-to-work-with-react-starter-kit/48594

[HemalR]

Right, I have a solution.

1. Create a preload.js file with the code:

window.ipcRenderer = require('electron').ipcRenderer;

2. Preload this file in your main.js via webPreferences:

  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      preload: __dirname + '/preload.js'
    }
  });

3. Now, you will have access from your react app. E.g. this will work:

componentDidMount() {
		if (isElectron()) {
			console.log(window.ipcRenderer);
			window.ipcRenderer.on('pong', (event, arg) => {
				this.setState({ipc: true})
			})
			window.ipcRenderer.send('ping')
		}
	}

Note - using this: https://github.com/cheton/is-electron for the isElectron() function

[astrotars]

@HemalR Step 3 should be the following (now):

componentDidMount() {
	if (window.isElectron) {
		console.log(window.ipcRenderer);
		window.ipcRenderer.on('pong', (event, arg) => {
			this.setState({ipc: true})
		})
		window.ipcRenderer.send('ping')
	}
}

Note: window.isElectron is not a function.

[HemalR]

@nparsons08

Apologies - should have added where I am getting isElectron from, have edited my code example with the link to: https://github.com/cheton/is-electron

[sandywk]

@holgersindbaek
Is there a solution now

[carlosdelfino]

for me only work if nodeIntegration is true;

webPreferences: {
      nodeIntegration: true, 
      preload: __dirname + '/preload.js'
}

[gino8080]

work great the @HemalR solution!

now HOW to send FROM electron TO React?

tried with
on electron side

 ipcMain.emit("pong", "Hello!"); 

but nothing got received from the React listener

window.ipcRenderer.on("pong", (event, arg) => {
        console.log("PONG");
});

is correct to use ipcMain.emit() or should I use something else?

[gino8080]

ok just found I have to use (on the electron main process)

mainWindow.webContents.send("pong", "Hello!");

thank you to all!

[chchmatt]

I tried all of the above to no avail. What worked for me was a giant hack. Modify the file ./node_modules/electron/index.js and hard code the path to electron.exe

e.g.

function getElectronPath() {
  return 'D:\\Repos\\MyProject\\node_modules\\electron\\dist\\electron.exe';
}

module.exports = getElectronPath();

[cyclonstep]

Wow, I couldn't get the IPCRenderer working on my React Components. I've tried all of the method above. Did any of you incidentally have any hints that I can use for it to be working? thanks

[HemalR]

Hmmm... My electron app still works just fine using my solution above - but I haven't updated it in a few months now (haven't needed to).

I wonder if there is a breaking change that would stop this from working? Maybe you guys can post your electron versions?

@cyclonstep Is there any specific error you were getting? Hard to help without a code snippet or some logs...

[nocke]

I am using parcel for bundling.
Window.require also solved it for me (also showing, what didn't):

import Vue from 'vue/dist/vue.min'
import App from './App'

// BAD? import { ipcRenderer } from 'electron'
// BAD? const { ipcRenderer } = require('electron')
// GOOD:
const { ipcRenderer } = window.require('electron')

( further below in the same file is the electron „pong-Demo“, which kinda prooves, it works)

Perhaps noteworthy: Even when doing it wrong, bundle size does not grow (compare to without the electron-require. This is so far my first&so far only render-side electron import) by the entire Electron size or such, but only by around 20kb, which seems to be some shim/wrapper code on its own, coming from node_modules/electron-download/node_modules/debug/dist/debug.js:242:ff...

2: [function (require, module, exports) {
  // shim for using process in browser
  var process = module.exports = {}; // cached from whatever global is present so that test runners that
 stub it

Anyway, things work as said above.

Node version 10.2.0
Chrome version 66.0.3359.181
Electron version 3.0.2

[kmwhelan93]

window.require wasn't working for me in my main script with error window is not defined, so I switched to const electron = eval('require')("electron"). Hope this helps someone. Using webpack, and problem was that webpack was evaluating my require statement at compilation time.

[moshfeu]

@MarshallOfSound my mistake.

I found the solution in issue #7300 if it can help anyone.

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

Please note that this will work when you run the Electron app, but if you just want to test your React code inside the browser it will still crash (window.require is not defined in the browser as it is in Electron).

And for typescript:

import {IpcRenderer} from 'electron';

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

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

[stylejy]

@moshfeu Your solution works fantastic. I don't need Webpack or Browserfy to use IpcRenderer in my React project. Thanks so much again :D

[marksyzm]

For typescript and using @HemalR 's example from above but WITHOUT nodeIntegration: true: #9920 (comment):

Right, I have a solution.

1. Create a preload.js file with the code:

window.ipcRenderer = require('electron').ipcRenderer;

1. Preload this file in your main.js via webPreferences:

  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      preload: __dirname + '/preload.js'
    }
  });

1. Now, you will have access from your react app. E.g. this will work:

componentDidMount() {
		if (isElectron()) {
			console.log(window.ipcRenderer);
			window.ipcRenderer.on('pong', (event, arg) => {
				this.setState({ipc: true})
			})
			window.ipcRenderer.send('ping')
		}
	}

Note - using this: https://github.com/cheton/is-electron for the isElectron() function

combined with
#9920 (comment)

I used this:

import { IpcRenderer } from 'electron';

declare global {
  interface Window {
    ipcRenderer: IpcRenderer
  }
}

export const { ipcRenderer } = window;

Hope that helps someone out there! Works with stenciljs, and I imagine react and angular

[dione2017]

just add target: "electron-renderer" in webpack configs.
export default {
...
target: "electron-renderer"
...
}

[MarMun]

This is what I came up with today because I need to use BrowserWindow.

webSecurity: true,
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,

I organize my api concerns into topic dedicated modules.

In it, I have my functions to 'do stuff'. These can be called from preload and from main context.

The renderer process can access it via ...

window.api.topic.doStuff(args)

... and the main context (triggered e.g. by context-menu) via a simple:

win.webContents.on('context-menu', (_e, args) => {
  topic.doStuff(args)
})

The topic module itself:

electron.topic.js

'use strict'

import { ipcMain, ipcRenderer, BrowserWindow } from 'electron'

// ----------------------------------------------------------------
// MAIN CONTEXT
// ----------------------------------------------------------------

function init () {
  ipcMain.on('topic:doStuff', (event, args) => {
    doStuff(args)
  })
}

// ----------------------------------------------------------------
// END MAIN CONTEXT
// ----------------------------------------------------------------

// ----------------------------------------------------------------
// PRELOAD CONTEXT
// ----------------------------------------------------------------

function doStuff (args) {
  if (!BrowserWindow) {
    // switch to main context
    ipcRenderer.send('topic:doStuff', args)
    return
  }

  const win = BrowserWindow
    .getFocusedWindow()

  // do stuff with current window
}

// ----------------------------------------------------------------
// END PRELOAD CONTEXT
// ----------------------------------------------------------------

const api = { doStuff }

export default { init, api }

in main I init topic module(s):

main.js

'use strict'

import { app } from 'electron'

import topic from './electron.topic.js'

app.on('ready', async () => {
  topic.init() // <--------- init @ main context

  // Create app window etc...
})

and finally preload script

'use strict'

import { contextBridge } from 'electron'
import topic from './electron.topic.js'

contextBridge.exposeInMainWorld(
  'api',
  {
    platform: process.platform,
    topic: { ...topic.api },
  }
)

[TulshiDas39]

The above solutions did not work for me.

Note: I am using typescript
I managed to work by the following steps:

1. in preload.ts file

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

window.addEventListener("DOMContentLoaded", () => {
  window.ipcRenderer = renderer;
  
});

2. in react app
   In App.tsx compoent

function App() {
  const [start,setState] = useState(false);
  useEffect(()=>{
    let timer = setInterval(()=>{
      if(!!window.ipcRenderer) {
        clearInterval(timer);
        setState(true);
      }
    },10);
  })
  if(!start){
    return <div></div>;
  }
  return (
    <BrowserRouter>
        <Layout />
    </BrowserRouter>
  );
}

export default App;

[magom001]

I used https://www.electronforge.io/templates/typescript-+-webpack-template to setup an electron project. None of the solutions above seem to work. Unable to import electron from react.

An insecure solution (https://stackoverflow.com/questions/56091343/typeerror-window-require-is-not-a-function/56095485). I wanted to use typeorm with sqlite without signaling through ipc.

...
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
      preload: path.resolve('src', 'preload.js')
    }
...
  (global as any).Database = new Database();
...

Database is a class that instantiates a connection to the sqlite database. In essence:

export class Database {
    private connection: Connection;

    constructor() {
        this.init();
    }

    public async init() {
        this.connection = await createConnection({
            type: 'sqlite',
            database: path.resolve('./data.sqlite3'),
            entities: [<Your entities>]
        });
    }

    public get <ENTITY>Repository() {
        return this.connection.getRepository(<ENTITY>);
    }

}

From within react:

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

After which this should produce a valid output:

    useEffect(() => {
        const db: Database = remote.getGlobal("Database");

        const getEntities = async () => {
            const entities = await db.<ENTITY>Repository.find();

            console.log('entities', entities);
        }

        getEntities();
    }, [])

Hope somebody will find it useful.

[serg06]

just add target: "electron-renderer" in webpack configs.
export default {
...
target: "electron-renderer"
...
}

Got this working with craco, here's my craco.config.js:

module.exports = {
    webpack: {
        configure: {
            target: 'electron-renderer'
        }
    }
}

[liwuchen]

const [start,setState] = useState(false);
useEffect(()=>{
let timer = setInterval(()=>{
if(!!window.ipcRenderer) {
clearInterval(timer);
setState(true);
}
},10);
})
if(!start){
return

;
}

I am trying your solution, but I don't understand, where do you use preload.ts?

[thany]

Here's what I did: I used the preload.js trick from above, but in there I placed this code:

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
const { contextBridge, ipcRenderer } = require("electron");

// As an example, here we use the exposeInMainWorld API to expose the IPC renderer 
// to the main window. They'll be accessible at "window.ipcRenderer".
process.once("loaded", () => {
  contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer);
});

This will make window.ipcRenderer available in the app.

There is, however, one thing I don't understand. Why can't Electron just make it bloody work?! How hard can it be to expose some stuff into javascript? Why do we have to jump trough a billion hoops to get foundational functionality working?? I have just spent 2 goddamn hours gettings this to work. I could have have been infinitely more productive without this nonsense.

---

Oh and I forgot to add, place this in a sensible file somewhere if you're using Typescript:

import { IpcRenderer } from 'electron';

declare global {
  interface Window {
    ipcRenderer: IpcRenderer
  }
}

Because I am using Typescript, and this makes it typed. Obviously you will be needing to do this for each thing you expose through the context bridge.

[nfcopier]

For anyone new coming to this thread, @reZach has a comprehensive answer with various solutions (from easy to best) that outline what they are and what the vulnerabilities are.

To summarize the security vulnerability:
If you are only using your own code, you are probably fine and can use the easy solutions. If you're importing third-party code (such as jQuery) from a CDN, you could be exposed to XSS attacks.

[iyobo]

The issue with this forced ContextBridge pattern is that we can no longer use MessagePorts.

[OldManMeta]

process.once("loaded", () => { contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer); });

@thany thank you very much for this answer. Having pulled hair out with this pile of junk for so long, your solution indeed provided a fix for TS - the contextBridge exposure was the key.

[OrozcoOscar]

This worked for me

mainWindow = new BrowserWindow({
    width: 700, 
    height: 680, 
    
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // add this
    }
  });

And then you can use in the react component
const { ipcRenderer } = window.require('electron');