Upgrading Electron from 7 to 12

Takuya Matsuyama - Mar 9 '21 - - Dev Community

Hi, it's Takuya. I'm making a Markdown note-taking app called Inkdrop with Electron.
I upgraded Electron from 7 to 12 in this project, and here are some troubleshootings.

Upgrading packages

npm i electron@12.0.0 electron-rebuild@latest
Enter fullscreen mode Exit fullscreen mode

In case node-abi is not the latest, upgrade it:

npm update node-abi --depth 2
Enter fullscreen mode Exit fullscreen mode

require() is not defined

There is the following breaking change:

  • Changed the default value of contextIsolation to true. #27949

It overrides nodeIntegration option. So, you have to specify options like so:

webPreferences: {
  contextIsolation: false,
  enableRemoteModule: true,
  nodeIntegration: true,
  nodeIntegrationInWorker: true,
  webviewTag: true
}
Enter fullscreen mode Exit fullscreen mode

remote module deprecation

There is another breaking change:

  • Deprecated the remote module. It is replaced by @electron/remote. #25293

You should fix like so:

// Deprecated in Electron 12:
const { BrowserWindow } = require('electron').remote
// Replace with:
const { BrowserWindow } = require('@electron/remote')
Enter fullscreen mode Exit fullscreen mode
// In the main process:
require('@electron/remote/main').initialize()
Enter fullscreen mode Exit fullscreen mode

Failed to serialize arguments

My app calls a function of the main process.
It passed a BrowserWindow object as its parameter and that causes the error: Failed to serialize arguments.
I replaced that code to use browser window ID instead.

Ubuntu gets blank screen on VM

Alt Text

Apparently, it only happens on Paralells VM.

You can run the app by appending --disable-gpu option like so:

npm start -- --disable-gpu
Enter fullscreen mode Exit fullscreen mode

Hope that helps!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .