Is there any difference between Electron built-in module and the one installed with npm? How to access to the electron object from other modules?

Viewed 835

Documentation

If you check this electron installation manual, you can read that you should install electron this way:

npm install electron --save-dev

So I did it. But if you check this other document they say:

When using Electron's built-in module you might encounter an error like this:

  > require('electron').webFrame.setZoomFactor(1.0)
  Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined

This is because you have the npm electron module installed either locally or globally, which overrides Electron's built-in module.

I do not know if with "locally" they mean like this (without --save-dev):

npm install electron

Resolve electron

To check if the installation is right:

To verify whether you are using the correct built-in module, you can print the path of the electron module:

  console.log(require.resolve('electron'))

and then check if it is in the following form:

  "/path/to/Electron.app/Contents/Resources/atom.asar/renderer/api/lib/exports/electron.js"

If it is something like node_modules/electron/index.js, then you have to either remove the npm electron module, or rename it.

The result in my application is

...\app_folder\node_modules\electron\dist\resources\electron.asar\browser\api\exports\electron.js

Problem

I can access to the electron object from the main.js file. This is working fine:

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

But if I do this in other js files (I require these files from main.js) I get an undefined value. Is this normal? Do I need to send the electron object as argument to these other modules?

They also say this, but I am taking into account:

However if you are using the built-in module but still getting this error, it is very likely you are using the module in the wrong process. For example electron.app can only be used in the main process, while electron.webFrame is only available in renderer processes.

Is this documentation still up to date? How should I install Electron to make work the built-in module?

Specific problem (Update)

Actually if I do in this other module

const electron = require('electron');
console.log(electron)
console.log(electron.app)

The objects are printed:

{ clipboard: [Getter],
crashReporter: [Getter],
nativeImage: [Getter],
shell: [Getter],
app: [Getter],
autoUpdater: [Getter],
BrowserView: [Getter],
BrowserWindow: [Getter],
contentTracing: [Getter],
dialog: [Getter],
globalShortcut: [Getter],
ipcMain: [Getter],
inAppPurchase: [Getter],
Menu: [Getter],
MenuItem: [Getter],
net: [Getter],
netLog: [Getter],
Notification: [Getter],
powerMonitor: [Getter],
powerSaveBlocker: [Getter],
protocol: [Getter],
screen: [Getter],
session: [Getter],
systemPreferences: [Getter],
TopLevelWindow: [Getter],
TouchBar: [Getter],
Tray: [Getter],
View: [Getter],
webContents: [Getter],
WebContentsView: [Getter] }

App {
_events:
{ login: [Function],
    'certificate-error': [Function],
    'select-client-certificate': [Function],
    quit: [Function],
    'web-contents-created': [Function],
    'session-created': [Function],
    'will-quit': [Function],
    ready: [ [Function], [Function] ],
    'window-all-closed': [Function] },
_eventsCount: 9,
_maxListeners: undefined,
whenReady: [Function: whenReady],
setApplicationMenu: [Function: setApplicationMenu],
getApplicationMenu: [Function: getApplicationMenu],
commandLine:
{ appendSwitch: [Function: appendSwitch],
    appendArgument: [Function: appendArgument] },
getAppMetrics: [Function],
isPackaged: false,
allowNTLMCredentialsForAllDomains: [Function],
releaseSingleInstance: [Function],
makeSingleInstance: [Function] }

But if I try to get the user data path

const __user_data = electron.app.getPath('userData');

I get this error:

Cannot read property 'getPath' of undefined

I am wondering why is this happening because app exists, but if I run app.getPath() app is not existing anymore. A similar thing happens with electron.remote, I have tried taht as well, even this is in the main process.

1 Answers

Apart from the doubts about the installation paths I have solved the issue. I was requiring this file from different places in my application. Sometimes I call it from the main process and in other cases from the renderer process. So I had to do this to support both cases:

var app = null;
if (typeof(electron.remote) !== 'undefined') {
    app = electron.remote.app;
} else {
    app = electron.app
}
const __user_data = app.getPath('userData');
Related