Requiring electron dialog from render process is undefined

On the Renderer process, you must use the Remote module.

const dialog = require('electron').remote.dialog

More info:
Electron Dialog API
Electron Remote API

Electron in the newest version have changed the way of requiring the modules. The modules are encapsulated within the electron Name space.

// for getting the electrons modules here the new method now i'm using 1.7.12 Electron version (i don't know what that will be in the future)
// you require electron first! it's a name space (module)
var electron = require("electron");
var remote = electron.remote; // you get all the subModuls directly as property (cool incapsulation)
//remote = require("remote") ===> will not work!!!!

// for dialog it's the same !! but we now use remote as modul
var dialog = remote.dialog;

Also you can use this syntax, to import several modules with less writing and by gathering them all together:

var {remote, ipcRenderer, someOtherModulFromElectron} = electron;

for example in the main.js (main process) we could write such a call:

const electron = require('electron')
const {app, BrowserWindow, Menu} = electron;

in place of :

const electron = require('electron')

// Module to control application life.
const app = electron.app

// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

//modul for bar menu
const Menu = electron.Menu

After a few hours of looking into it someone else pointed out to me that the "new" way (4/15/16) of doing this is the following.

var remote = require('remote');
var dialog = remote.require('dialog');

dialog.showOpenDialog({ 
  properties: [ 'openFile' ] }, function ( filename ) {
    console.log( filename.toString() );
  }
);

You must require remote and then from remote require dialog. It looks like you no longer need to require electron

Accroding to https://github.com/electron/remote
The remote module was deprecated in Electron 12, @electron/remote is the replacement.

$ npm install --save @electron/remote

In main.js:

require('@electron/remote/main').initialize()

I also have to set few webPreferences for BrowserWindow

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  })

In renderer.js:

const {dialog} = require('@electron/remote')

function showError() {
    dialog.showErrorBox(...)
}

After that dialog is working for me.

This code works in the script of the html file :

const remote = require('electron').remote 

const dialog = remote.dialog;

dialog.showErrorBox('Error title', 'error')

Requiring electron dialog from render process is undefined

Related

Recent Posts