Upgrading to Electron@12

[nelsonni]

Describe the bug
Electron v12.0.0 has been released with changelog:

Stack Changes

• Chromium 89
• Node.js 14.16
• V8 8.9

Highlight Features

• The ContextBridge exposeInMainWorld method can now expose non-object APIs.
• Upgraded from Node 12 to Node 14.
• Added a new webFrameMain API for accessing sub-frames of a WebContents instance from the main process.
• The default values of contextIsolation and worldSafeExecuteJavaScript are now true.

See the 12.0.0 release notes for a full list of new features and changes.

Breaking Changes

• Deprecated the remote module. It is replaced by @electron/remote.
  • If you are currently using the remote module, we've written a guide to migrating to @electron/remote here.
• Changed the default value of contextIsolation to true.
• Changed the default value of worldSafeExecuteJavaScript to true.
• Changed the default of crashReporter.start({ compress }) from false to true.
• Removed Flash support: Chromium has removed support for Flash, which was also removed in Electron 12. See Chromium's Flash Roadmap for more details.
• Required SSE3 for Chrome on x86: Chromium has removed support for older x86 CPUs that do not meet a minimum of SSE3 (Streaming SIMD Extensions 3) support. This support was also removed in Electron 12.

More information about these and future changes can be found on the Planned Breaking Changes page.

API Changes

• Added webFrameMain API: The webFrameMain module can be used to look up frames across existing WebContents instances. This is the main process equivalent of the existing webFrame API. More information about this new API can be found here, and in our documentation.
• app API changes:
  • Added non-localized serviceName to 'child-process-gone' / app.getAppMetrics().
  • Added new app.runningUnderRosettaTranslation property to detect when running under rosetta on Apple silicon.
  • Added exitCode to render-process-gone details (app & webContents).
• BrowserWindow API changes:
  • Added BrowserWindow.isTabletMode() API.
  • Added resized (Windows/macOS) and moved (Windows) events to BrowserWindow.
  • Added new system-context-menu event to allow preventing and overriding the system context menu.
  • Added win.setTopBrowserView() so that BrowserViews can be raised.
  • Added webPreferences.preferredSizeMode to allow sizing views according to their document's minimum size.
• contextBridge API changes:
  • Allowed ContextBridge exposeInMainWorld method to expose non-object APIs.
• display API changes:
  • Added displayFrequency property to the Display object to allow getting information about the refresh rate on Windows.
• extensions API changes:
  • Added support for some chrome.management APIs.
• MenuItem API changes:
  • Added support for showing macOS share menu.
• net API changes:
  • Added a new credentials option for net.request().
  • Added net.online for detecting whether there is currently internet connection.
• powerMonitor API changes:
  • Added powerMonitor.onBatteryPower.
  • Added fast user switching event to powerMonitor on macOS.
• session API changes:
  • Added allowFileAccess option to ses.loadExtension() API.
  • Added display-capture API for session.setPermissionRequestHandler.
  • Added a disabledCipherSuites option to session.setSSLConfig.
  • Added extension-loaded, extension-unloaded, and extension-ready events to session.
  • Added session.setSSLConfig() to allow configuring SSL.
  • Added support for explicitly specifying direct, auto_detect or system modes in session.setProxy().
  • Added Serial API support.
  • Added APIs to enable/disable spell checker.
• shell API changes:
  • Added a new asynchronous shell.trashItem() API, replacing the synchronous shell.moveItemToTrash().
• webContents API changes:
  • Added a small console hint to console to help debug renderer crashes.
  • Added frame and webContents properties to the details object in webRequest handlers.
  • Added webContents.forcefullyCrashRenderer() to forcefully terminate a renderer process to assist with recovering a hung renderer.
  • Added setWindowOpenHandler API for renderer-created child windows, and deprecate new-window event.
• webFrame API changes:
  • Added spellcheck API to renderer.

Removed/Deprecated Changes

The following APIs have been removed or are now deprecated:

• Deprecated the remote module. It is replaced by @electron/remote.
• Removed deprecated crashReporter APIs.
• Removed links to the Electron website from the default 'Help' menu in packaged apps.

Additional considerations must be resolved prior to upgrading Synectic to Electron@12.

Versions (please complete the following information):

• OS: Linux, MacOS, Windows
• Synectic Version: 1.0.0-beta (branch: development)

Additional context
#384 had to be reverted due to errors indicating that __dirname cannot be found during runtime, which appear to be thrown by react-hot-loader due to version mismatches with Webpack 5.

[nelsonni]

electron/forge#2208 shows that there are still issues between Webpack 4 and 5 for Electron Forge, which might be related to the errors thrown by react-hot-loader.

Additionally, examining the react-hot-loader README indicates:

React-Hot-Loader has been your friendly neighbour, living outside of React. But it has been limiting its powers and causing not the greatest experience. It's time to make a next step.

React-Hot-Loader is expected to be replaced by React Fast Refresh. Please remove React-Hot-Loader if Fast Refresh is currently supported on your environment.

However, updating to react-refresh-webpack-plugin (the recommended plugin for enabling Fast Refresh) results in the following error:

TypeError: Cannot read property 'tap' of undefined

Therefore, the following updates need to occur before upgrading Synectic to Electon@12:

• Update Electron Forge to a version that supports Webpack 5.
• Remove react-hot-loader from dependencies.
• Add react-refresh-webpack-plugin to devDependencies once fully supported in Electron and Electron Forge.
• Migrate from remote to @electron/remote.

[nelsonni]

Of particular relevance for updating to Fast Refresh is the following post by @gaearon: facebook/react#16604 (comment)

[nelsonni]

electron-userland/electron-forge v6.0.0-beta.56 includes support for Webpack 5, which means that particular barrier is a non-issue now.

[nelsonni]

Per @malept in electron/forge#2307 (comment):

This is a duplicate of #2302 and probably #2152 (and probably others).

• Node.js integration is not recommended from a security standpoint
• You should consider using IPC via Context Bridge instead of enabling Node.js integration. The Electron Ecosystem WG is working on a guide for IPC and hope to have it out soon.
• Context isolation is recommended from a security standpoint
• Electron's remote module has some issues

[nelsonni]

Additionally, when running under Electron 12+ there are currently errors indicating that __dirname is undefined. This is likely a combination of the new contextIsolation and Webpack 5, which indicates:

Warning

As of webpack 5, You can configure only global, __filename or __dirname under node option. If you're looking for how to polyfill fs alike in Node.js under webpack 5, please check resolve.fallback for help.

[nelsonni]

Resolved by #521.