Question

使用 electron ipc 时，Electron forge 停止在符合渲染器代码中

2021-06-01

1705

webpack electron electron-forge

我正在创建一个新的 electron 应用，但是遇到了一个我从未遇到过的问题

我使用了 import {ipcRenderer} from 'electron' 并使用了 ipcRenderer.send ，在编译渲染器代码时显示此错误。

在最新的 electron 和 electron forge 中，导入 electron 并在任何渲染器代码中使用它会导致错误并终止

我在 electron 中使用 React，我以前的项目也使用了 React+Electron，但是使用 electron 模块是可以的。

我能做的所有事情都不起作用，包括降级 electron 包。

完整日志：

yarn run v1.22.10
$ electron-forge start
√ Checking your system
√ Locating Application
√ Preparing native dependencies
√ Compiling Main Process Code
√ Launch Dev Servers
√ Compiling Preload Scripts
√ Launching Application


Webpack Output Available: http://localhost:9000


\ Compiling Renderer Code

An unhandled rejection has occurred inside Forge:
[Error: EISDIR: illegal operation on a directory, read] {
  errno: -4068,
  code: 'EISDIR',
  syscall: 'read'
}

Electron Forge was terminated. Location:
{}
error Command failed with exit code 1.

我尝试重新安装所有包，但是不起作用。为什么以及如何解决？即使我添加了 target: 'node' 到 webpack.renderer.config.json，哦，窗口终于可以显示，但是 ipcRender 无法发送消息

Uncaught TypeError: Cannot read property 'send' of undefined
    at onClick (TitleBar.tsx?3219:11)
    at HTMLUnknownElement.callCallback (react-dom.development.js?6ac8:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?6ac8:3994)
    at invokeGuardedCallback (react-dom.development.js?6ac8:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?6ac8:4070)
    at executeDispatch (react-dom.development.js?6ac8:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js?6ac8:8275)
    at processDispatchQueue (react-dom.development.js?6ac8:8288)
    at dispatchEventsForPlugins (react-dom.development.js?6ac8:8299)
    at eval (react-dom.development.js?6ac8:8508)

为什么？？？

Answer 1

我遇到了同样的问题，仍然卡在这个

更新：使用 preload.js 访问主进程的功能

Prathamesh Netake

2021-06-03

Answer 2

tl;dr

让 webpack 明白 electron 应该使用 require 来直接导入。

解决方案

这是一个 webpack 问题。

Webpack 会将所有用到的包打包到 bundle 中。因为 electron 是一个超酷的包，所以 webpack 不能 将其放入 bundle 中。

像这样配置以使 electron 成为 commonjs2 模块，将语句从 import electron from 'electron 改为 require('electron') ，而不是直接从 electron 中抓取项目。

// webpack.renderer.config.js
module.exports = {
  externals: {
    electron: 'commonjs2 electron',
  },
}

Answer 3

我也遇到了同样的问题。我正在使用 Webpack + React

经过调查，我认为这是因为 webpack 捆绑问题。我们甚至无法使用包 @electron/remote

这是我的解决方法。我在 preload.ts 中创建了一个函数

Remember to use import * as electron from 'electron';

import * as electron from 'electron';

export function openDirectory(): void {
  const dialog = (electron as any).remote.dialog;
  console.log(
    dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] })
  );
}

通过 contextBridge 公开它

import { contextBridge } from 'electron';
import { getGitCommitLogs } from './core/git-api';
import { openDirectory } from './core/native-api';

contextBridge.exposeInMainWorld('getGitCommitLogs', getGitCommitLogs);
contextBridge.exposeInMainWorld('openDirectory', openDirectory);

在渲染器中使用它

启用 enableRemoteModule

const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
      enableRemoteModule: true,
    },
  });

I have posted my source code and issue https://github.com/electron-userland/electron-forge/issues/2384