adotellison adotellison - 8 months ago 122
React JSX Question

Using Electron's ipcRender from inside a React component

I am trying to create a small React app that captures and sets a global shortcut, that will be used to show and hide the Electron app window. However I have become stuck, as when I try to use ipcRender, from inside a React component, the following error is thrown.

Uncaught Error: Cannot find module "fs"

I am using Webpack to bundle my JS and compile JSX, and ES6 syntax to import Electron and ipcRender, as you can see in my component code below.

import React from "react";
import electron, { ipcRenderer } from 'electron';

var event2string = require('key-event-to-string')({});

export default React.createClass({
getInitialState: function() {
return {shortcut: this.props.globalShortcut[0]};
var keys = event2string(e);

this.props.globalShortcut.splice(0, 1);
this.refs.shortcutInput.value = this.state.shortcut;
ipcRenderer.send('set-new-shortcut', this.props.globalShortcut);
this.refs.shortcutInput.value = '';
render() {
return (
<div id="settings-container">
<h1>The show/hide shortcut is "{this.state.shortcut}"</h1>
<form role="form">
<input type="text" ref="shortcutInput" placeholder="Create new shortcut" onFocus={this.handleOnFocus} onKeyDown={this.handleOnKeyDown} onKeyUp={this.handleOnKeyUp} className="form-control form-field"/>

I've tried different solutions, such as adding a node-loader & json-loader to my Webpack file , adding the node object with fs set to 'empty', including a plugin that tells Webpack to ignore fs and ipc and install fs via npm. I can't get any of them to work.

Unfortunately I don't have enough knowledge of Webpack or ES6 syntax to figure out what's going on, and most of the solutions I've tried have been in a 'paste-and-hope' fashion. So if anyone could explain, in laymen's terms what's happening, I'll be able to dig some more.

Below is my current Webpack file.

var webpack = require('webpack');

module.exports = {
context: __dirname + '/src/js',
entry: "./index.js",

output: {
filename: 'bundle.js',
path: __dirname + '/build',
publicPath: 'http://localhost:8080/build/'

module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query:{presets:['es2015','react']} },
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' }

// Don't know if below is working, 'Uncaught Error: Cannot find module "fs"' error still thrown when trying to import electron
plugins: [
new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$"))

// Don't know if below is working, 'Uncaught Error: Cannot find module "fs"' error still thrown when trying to import electron
node: {
fs: 'empty'


You need to set target: 'electron-renderer' in your Webpack config, if you still have issues after that take a look at