electron-react-boilerplate: Cannot read properties of undefined (reading 'ipcRenderer')

Prerequisites

[ YES] Using npm
[ YES] Using an up-to-date main branch
[ YES] Using latest version of devtools. Check the docs for how to update
[ NO] Tried solutions mentioned in #400
[ NO] For issue in production release, add devtools output of DEBUG_PROD=true npm run build && npm start

Expected Behavior

Current Behavior

Call Stack
 Object../src/renderer/index.tsx
  renderer.dev.js:68966:17
 Object.options.factory
  renderer.dev.js:73907:31
 __webpack_require__
  renderer.dev.js:73352:33
 undefined
  renderer.dev.js:74489:37
 undefined
  renderer.dev.js:74492:12
 webpackUniversalModuleDefinition
  renderer.dev.js:7:11
 undefined
  renderer.dev.js:10:3

Steps to Reproduce

git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
then npm i and npm start
it shows error above

Possible Solution (Not obligatory)

Context

Your Environment

Node version : 14.17.0
electron-react-boilerplate version or branch : main
Operating System and version : macOS
Link to your project : -

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 9
Comments: 17

Most upvoted comments

I commented out the following example and it fixed it.

I don’t know why.

src/renderer/index.tsx

import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root')!;
const root = createRoot(container);
root.render(<App />);

// window.electron.ipcRenderer.once('ipc-example', (arg) => {
//   console.log(arg);
// });
// window.electron.ipcRenderer.sendMessage('ipc-example', ['ping']);

Rezol99 on Aug 18, 2022

Please fix this I am facing the same issue when I tried to follow the tutorial on adding native modules to electron app with your boilerplate: https://electron-react-boilerplate.js.org/docs/native-modules/

GasperFunda on May 2, 2022

Hey all, I’ve managed to get it working on my end using the following:

// 👇 Add this to your preload.js file:
contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: { ...ipcRenderer, on: ipcRenderer.on },
});

// 👇 Use ipcRenderer in your React components
const { ipcRenderer } = window.require('electron');

Hope this helps!

ingusjan on Dec 26, 2022

I abandoned on it and moved to flutter to build desktop app. It’s better.

khunemz on Dec 27, 2022

Also hitting this on windows with Node 16.

Looks like it is likely from this PR: https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/3155

However I am not sure the fix at the moment, I think it is due to the webpack transforms on the preload.ts file causing it to not properly expose the electron object on the window. Curious if you have any thoughts @amilajack

bigcakes on Apr 23, 2022