Requiring electron dialog from render process is undefined


#1

I am using electron and am trying to open a file browser when a user clicks on button. From the render process I am trying to include the elctron.dialog package like this.

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

console.log( dialog );

However the result from the console log is undefined

I am absolutely sure I am in the rendering process so I am not sure why this is not working. The documentation suggests that this is the correct way of doing things but it appears to not be working.

This is my package.json file

{
  "name": "my-app",
  "version": "0.1.0",
  "main": "./main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^0.4.1"
  }
}

This is my main.js file

    'use strict';

    var app = require( 'app' );
    var BrowserWindow = require( 'browser-window' );
    var ipc = require( 'ipc' );

    var mainWindow = null;

    app.on(
        'ready', function () {
            mainWindow = new BrowserWindow(
                {
                    frame : true,
                    height: 700,
                    width : 500
                }
            );

            mainWindow.loadUrl( 'file://' + __dirname + '/app/index.html' );

            mainWindow.openDevTools();
            mainWindow.on(
                'closed', function () {
                    mainWindow = null;
                }
            );

        }
    );

    ipc.on(
        'close-main-window', function () {
            app.quit();
        }
    );

this is the rendered process file

    // Add your index.js code in this file
    var ipc = require( 'ipc' );
    
    const dialog = require( 'electron' ).dialog;
    
    console.log( dialog );

This is the console

Is this incorrect?


#2

The dialog module is only available in the main/browser process, if you wish to use it in the renderer process you will need to do so via the remote module or IPC.

I’ve also noticed you have electron listed in the dependencies section of your package.json, this will install the simple command-line interface framework which has nothing to do with Electron. Assuming you installed that package by mistake I suggest you uninstall it to avoid running into issues when doing require('electron') in more recent versions of Electron.


#3

Thank you, that helped tremendously. But according to the docs I should be doing it this way.
const dialog = require('electron').remote.dialog

Any idea why this changed.


#4

The way built-in Electron modules are required was changed to reduce potential conflicts with other NPM packages.


#5
remote.dialog.showOpenDialog(remote.getCurrentWindow(), {...});```