Requiring electron dialog from render process is undefined

问题

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?

回答1:

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

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

More info:
Electron Dialog API
Electron Remote API

回答2:

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

回答3:

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

回答4:

This code works in the script of the html file :

const remote = require('electron').remote 

const dialog = remote.dialog;

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

回答5:

You can directly grab it out from electron using following syntax:

const electron = require('electron')
const {dialog} = electron;

And then you can call the required dialog methods as below:

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

来源：https://stackoverflow.com/questions/36637201/requiring-electron-dialog-from-render-process-is-undefined

标签

javascript

electron