stackoom
  简体   繁体   中英

How to import ipcRenderer in react?

 原文  2018-01-08 10:05:48  3   6    javascript/ node.js/ reactjs/ webpack/ electron

Question

I've tried to import ipcRenderer in react app

import {ipcRenderer} from 'electron';

but I get this error message : require is not defined

6 answers

solution1
 10 ACCPTED  2018-02-28 16:28:05

You need to use

const { ipcRenderer } = window.require("electron");

Otherwise it will try to import it from Webpack or whatever you use.

You can checkout this thread for a better explanation:

https://github.com/electron/electron/issues/7300

solution2
 6  2020-01-18 00:05:25

You'll want to follow the steps I outline in this comment . These steps ensure security in your electron app.

main.js

const {
  app,
  BrowserWindow,
  ipcMain
} = require("electron");
const path = require("path");
const fs = require("fs");

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

async function createWindow() {

  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // is default value after Electron v5
      contextIsolation: true, // protect against prototype pollution
      enableRemoteModule: false, // turn off remote
      preload: path.join(__dirname, "preload.js") // use a preload script
    }
  });

  // Load app
  win.loadFile(path.join(__dirname, "dist/index.html"));

  // rest of code..
}

app.on("ready", createWindow);

ipcMain.on("toMain", (event, args) => {
  fs.readFile("path/to/file", (error, data) => {
    // Do something with file contents

    // Send result back to renderer process
    win.webContents.send("fromMain", responseObj);
  });
});

preload.js

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

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) => fn(...args));
            }
        }
    }
);

index.html

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <title>Title</title>
</head>
<body>
    <script>
        window.api.receive("fromMain", (data) => {
            console.log(`Received ${data} from main process`);
        });
        window.api.send("toMain", "some data");
    </script>
</body>
</html>

solution3
 0  2020-09-29 16:50:21

if you are looking to quickly try IPC in electron in a react component, this may help.

main.js

const {ipcMain} = require('electron')

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log("heyyyy",arg) // prints "heyyyy ping"
})

App.js

import React from 'react';
import './App.css';
const { ipcRenderer } = window.require('electron');


function App() {
  return (
    <div className="App">
       <button onClick={()=>{
         ipcRenderer.send('asynchronous-message', 'ping')
         }}>Com</button>
    </div>
  );
}

export default App;

Output: 输出

Don't forget to re-run the app after making the changes.

No preload.js added, Did not change anything in webpack config, No extra configurations.

solution4
 0  2021-07-29 17:47:48

Below is the code worked for using electron-forge with react with preload script which exposes ipcRenderer API to renderer process in electron with webpack preload (FYI check package.json code below) option. Follow the link to create a project forelectron-forge with react .

main.js

const { app, BrowserWindow, ipcMain, Notification } = require("electron");
const path = require("path");

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require("electron-squirrel-startup")) {
  // eslint-disable-line global-require
  app.quit();
}

const createWindow = () => {
  console.log(__dirname, "testing");
  // 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();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", () => {
  console.log("/n demo", __dirname, "/n");
  createWindow();
});

ipcMain.on("notify", (_, message) => {
  new Notification({ title: "Notification", body: message }).show();
});
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

package.json

{
  "name": "webex-ui",
  "productName": "webex-ui",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".webpack/main",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\""
  },
  "keywords": [],
  "author": {
    "name": "Sathishkumar R",
    "email": "rsathishtechit@gmail.com"
  },
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "webex_ui"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ],
      "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"
                  }
                }
              ]
            }
          }
        ]
      ]
    }
  },
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-react": "^7.14.5",
    "@electron-forge/cli": "^6.0.0-beta.58",
    "@electron-forge/maker-deb": "^6.0.0-beta.58",
    "@electron-forge/maker-rpm": "^6.0.0-beta.58",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.58",
    "@electron-forge/maker-zip": "^6.0.0-beta.58",
    "@electron-forge/plugin-webpack": "6.0.0-beta.58",
    "@vercel/webpack-asset-relocator-loader": "1.6.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.0.0",
    "electron": "13.1.7",
    "node-loader": "^2.0.0",
    "style-loader": "^3.0.0"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

app.jsx

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

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

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

preload.js

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

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

renderer.js

import "./index.css";
import "./app";

console.log(
  '👋 This message is being logged by "renderer.js", included via webpack'
);

Also, add below in webpack.rules.js

//to avoid explicit mention of jsx when importing react components
resolve: {
      extensions: [".js", ".jsx"],
    },

Thanks to this page

solution5
 0  2021-07-29 19:34:32

By using contextBridge we can resolve this issue

new BrowserWindow({
    width: 1200,
    height: 800,
    backgroundColor: "white",
    webPreferences: {
      nodeIntegration: false,
      worldSafeExecuteJavaScript: true,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })

//example to display notification
ipcMain.on('notify', (_, message) => {
   new Notification({title: 'Notification', body: message}).show();
})

preload.js

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

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

then using the below code in your reactjs component will trigger a native notification message

electron
      .notificationApi
      .sendNotification('My custom message!');

solution6
 -2  2018-01-08 10:34:46

const {ipcRenderer} = require('electron')

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question cannot import electron in react componment for ipcRenderer How to import ipcRenderer in vue.js ? __dirname is not defined Electron with React- trying to import ipcRenderer - preload.js is not being called How to write unit test for ipcRenderer.on and ipcRenderer.send in Jest? How to prevent multiplication of ipcRenderer listenters? How to send several arguments with ipcRenderer react-electron ipcRenderer in useEffect does not rerender How to pass the window through ipcRenderer.send()? How to unregister from ipcRenderer.on event listener? How to switch from remote to ipcMain and ipcRenderer?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM