Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series







yours forever

Become a Pro and unlock everything




per month

Communicating Between Main and Renderer with IPC

In this video, we’ll be talking about some communication strategies between the Main process and the Renderer process. You’ll learn how to send the contents of a file from the Main process to the Renderer process.


Become a pro to download code and videos



almost 2 years ago

If anyone is doing this in 2020 and want's to use functional components with react hooks...it's fairly easy:

const [loadedFile, setLoadedFile] = useState('')

useEffect(() => { ipcRenderer.on('new-file', (event, fileContent) => { console.log(fileContent) setLoadedFile(fileContent) }) }, [])

I'm a fan of react hooks. This replaces:

state = { loadedFile: '' };

constructor() { super();

ipcRenderer.on('new-file', (event, fileContent) => {
    loadedFile: fileContent


Chris Borchert

almost 2 years ago

@Zach Thank you !


over 2 years ago

@Zach Thanks, this solved it for me!


over 2 years ago

@Caleb The problem is that the 'file' variable is being read as undefined because the dialog.showOpenDialog function is now asynchronous, resulting in the next lines of code being executed before you've actually made a file selection. I believe when Scott's video was created, this function was synchronous by default which has since been changed.

There is now a explicit dialog.showOpenDialogSync function, which will pause the execution until a file is chosen or the dialog is closed.

Use that instead and you should be good!


over 2 years ago

I am encountering this issue when trying to "Open a file"

Uncaught Exception: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be one of type string, Buffer, or URL. Received type undefined

My main.js // Open File function openFile() { // Opens file dialog looking for markdown const files = dialog.showOpenDialog(mainWindow, { properties: ['openFile'], filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'txt'] }] });

// If no files if (!files) return;

const file = files[0]; // Grabs first file path in array // Loads file contents via path acquired via the dialog const fileContent = fs.readFileSync(file).toString();

// Send fileContent to renderer mainWindow.webContents.send('new-file', fileContent); }


almost 3 years ago [edited]

Quick tip for people having a hard time with the "window.require('electron')" part using the current version of Electron (6.02). To get this working, I had to add to modify my mainWindow definition to look like this:

mainWindow = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

  nodeIntegration: true

  // preload: path.join(__dirname, "preload.js")



Notice the "nodeIntegration: true". That's what does it. I commented out preload for now because we don't have a "preload.js" file at this stage. (Sorry for the poor formatting!)

Want to join the conversation?

Become a Pro member today!