Electron Forge - 在渲染器文件中使用 ipcRenderer

Question

Behavior

I am develop a Electron Forge project. When I'm trying to use electron.ipcRenderer , it will cause an error, the app cannot be started. It shows some informations, but it's useless:

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.

I had created a project with Electron before with Electron forge, is works fine with ipcRenderer

Only import in typescript cause the error, require in HTML works fine

More Information

electron.ipcRenderer and electron.remote both cause problem, but import without using will not cause the error.

Window create code:

const mainWindow = new BrowserWindow({
    height: 540,
    width: 960,
    resizable: false,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });

The resolution in Electron Forge - Can't use ipcRenderer in the renderer file is not work, which is access ipcRenderer in preload.ts

Envrionment

Important package versions

    "@electron-forge/cli": "^6.0.0-beta.57",
    "typescript": "^4.0.2"
    "electron": "^13.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",

OS

Windows 10 x64, CoreCountrySpecific (aka. 家庭中文版 or Chinese Family Edition), Version 2009, 21H1 (19043.1083), Windows Feature Experience Pack 120.2212.3530.0.

CPU: Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz 2.59 GHz

GPU: NVIDIA GeForce GTX 1660 Ti

Possible Reasons

• Webpack can't complies electron, it should be complies directly to require('electron') , instead inject electron code into the file
  • If in this case, how to configure webpack to make it doesn't complies electron into a file?
• Electron forge question
• This electron version and electron forge version cannot be used together
  • If in this case, which version should I provide?
• React.js problem
  • If in this case, should I remove react or use react 16?

Answer 1

Use preload.ts , import module from electron, and declare it on window.

For example:

preload.ts

// noinspection ES6UnusedImports
import { ipcRenderer, remote } from 'electron'; // eslint-disable-line @typescript-eslint/no-unused-vars

/* eslint-disable @typescript-eslint/no-explicit-any */
window.ipcRenderer = ipcRenderer;
window.remote = remote;
/* eslint-enable */

index.d.ts :

interface Window {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  ipcRenderer: any;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  remote: any;
}

Use:

window.remote.dialog.showSaveDialogSync({});
window.ipcRenderer.send('close');