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