Electronjs window.require не является функцией

Question

Я использую приложение create-Reaction-app (response-scripts v3.0.0) и Electronjs (v5.0.1). Я пытаюсь передать события от рендерера основному процессу, используя модуль 'icpMain', как описано здесь, но получаю ошибку window.require не функция для линии

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

Как я могу получить require в глобальную область в процессе визуализации? Или есть другой способ связи между основным процессом и процессом визуализации?

Редактировать:

Я попытался полностью удалить сборку реакции и получить те же результаты, просто используя электронный пример кода в index.html.

Answer 1

Похоже, добавление предпочтения:

var mainWindow = new electron.BrowserWindow({
  ...
  webPreferences: {
    nodeIntegration: true,
  }
});

необходимо включить require в процессе рендеринга.

Answer 2

Начиная с Electron 12, contextIsolation включен по умолчанию, подразумевая, что require() не может использоваться в процессе рендеринга, если contextIsolation не имеет значения false, подробнее в этой ссылке https://www.electronjs.org/docs/breaking-changes# по умолчанию-изменено-contextisolation-defaults-to-true

Итак, включите следующее:

      webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
}

Answer 3

Убедитесь, что веб-настройки такие.

       webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
    },

Answer 4

Я исправляю эту проблему, чтобы добавить webPreferences:{ nodeIntegration: true,preload: '${__dirname}/preload.js}', в electron.js файл и добавить preload.js файл в вашем каталоге (я добавил в /public каталог, где мой electron.js Файл существует)

electronic.js

mainWindow = new BrowserWindow({
 title: 'Electron App',
 height: 650,
 width: 1140,
 webPreferences: { 
  nodeIntegration: true,
  preload: `${__dirname}/preload.js`,
  webSecurity: false 
 },
 show: false,
 frame: true,
 closeable: false,
 resizable: false,
 transparent: false,
 center: true,
});

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

preload.js

в файле preload.js просто добавьте строку ниже:

window.ipcRenderer = require('electron').ipcRenderer;

ReactComponent.js

Напишите ниже код в своей функции компонента, например: myTestHandle()

myTestHandle = () => {
  window.ipcRenderer.on('asynchronous-reply', (event, arg) => {
    console.log(arg); // prints "pong"
  });
  window.ipcRenderer.send('asynchronous-message', 'ping');
}
myTestHandle();

или позвоните по телефону myTestHandle функционировать в любом месте вашего компонента

Answer 5

Действительно, вы должны установить nodeIntegration в true в вашем BrowserWindow webPreferences начиная с версии 5.0.0 значения по умолчанию для nodeIntegration и webviewTag имеют значение false для повышения безопасности. Электрон связанный PR: 16235

Answer 6

Не устанавливайтеcontextIsolationк ложному! Но используйтеcontextBridge.exposeInMainWorldчтобы добавить все, что вам нужно вwindowобъект.

main.js

      webPreferences: { 
  contextIsolation: true,
  preload: path.join(__dirname, '../preload.js')
}

предварительная загрузка.js

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

contextBridge.exposeInMainWorld("electron", {
  ipcRenderer,
  ...
});

Не используйтеrequire()в вашем приложении React.

Если вы используете React с машинописным текстом, вы должны объявить все дополнительные поля следующим образом:

      declare global {
  interface Window {
    electron: any;
    require: any;  // this is a fix for the "window.require is not a function" error. But you don't need it anymore.
  }
}

Использование:

      const { ipcRenderer } = window.electron;

Важно: не пытайтесь раскрыть всю библиотеку. Выставляйте только то, что вам нужно.

      contextBridge.exposeInMainWorld("electron", electron); // Error