Unable to use ipcRenderer in EF + TS + React without nodeIntegration: true

Preflight Checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Issue Details

• Electron Forge Version:
  • 6.0.0-beta.54
• Electron Version:
  • 11.2.3
• Operating System:
  • macOS 10.15.7

Expected Behavior

I am using Electron Forge with TypeScript and React. I attempted to import "electron" into my renderer.tsx file because I want to have a functionality that allows a button click event to communicate with the main process.

// renderer.tsx
class Button extends React.Component
{
    constructor(props: unknown)
    {
        super(props);
        this.onClick = this.onClick.bind(this);
    }
    onClick(): void
    {
        Electron.ipcRenderer.send("button");
    }
    render(): JSX.Element
    {
        return (<button onClick={this.onClick}>run</button>);
    }
}

// index.ts
function button(): void
{
    console.log("Button clicked");
}
Electron.ipcMain.on("button", button);

// package.json
"mainConfig": "./webpack.main.config.js",
"renderer": {
    "config": "./webpack.renderer.config.js",
    "entryPoints": [
        {
            "html": "./app/index.html",
            "js": "./app/renderer.tsx",
            "name": "main_window"
        }
    ]
}

Actual Behavior

Electron starts the app, but the renderer process crashes due to failing to import Electron in the renderer.tsx file. The error given in the console is

Uncaught ReferenceError: require is not defined
    at Object.electron (external "electron":1)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.<anonymous> (renderer.tsx:5)
    at Object../app/renderer.tsx (renderer.tsx:38)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.0 (module.js:22)
    at __webpack_require__ (bootstrap:789)
    at bootstrap:856

This issue can be fixed by setting nodeIntegration: true when creating the window, however this is a security risk and is heavily discouraged.

To Reproduce

The repository here should be able to reproduce this issue.

[rsathishtechit]

Using preload option provided by @electron-forge/plugin-webpack could solve this problem

In package.json

"plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.js",
                  "name": "main_window",
                  "preload": {
                    "js": "./src/preload.js"
                  }
                }
              ]
            }
          }
        ]
      ]

src/preload.js

const { ipcRenderer, contextBridge } = require("electron");

contextBridge.exposeInMainWorld("electron", {
  notificationApi: {
    sendNotification(message) {
      ipcRenderer.send("notify", message);
    },
  },
  batteryApi: {},
  fileApi: {},
});

main.js

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      worldSafeExecuteJavaScript: true,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};


ipcMain.on("notify", (_, message) => {
  new Notification({ title: "Notification", body: message }).show();
});
/

src/app.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component {
  componentDidMount() {
    electron.notificationApi.sendNotification("Finally!");
  }
  render() {
    return <h1>contextBridge</h1>;
  }
}

ReactDOM.render(<App />, document.body);

The above method works with the React+Webpack template.

[malept]

If you wish to use ipcRenderer when nodeIntegration is false, you’ll need to use preload scripts.

FYI, this isn’t a issue that’s specific to Electron Forge. If you need more assistance, please use one of Electron’s community forums.