Error while loading electron-tabs module & unable to create tabs in electron
Error while loading electron-tabs module & unable to create tabs in electron
I have installed electron-modules package for implementing tabs in electron as shown below
package.json
"name": "Backoffice",
"version": "1.0.0",
"description": "BackOffice application",
"main": "main.js",
"scripts":
"start": "electron ."
,
"author": "Karthik",
"license": "ISC",
"devDependencies":
"electron": "^2.0.8",
"electron-tabs": "^0.9.4"
main.js
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const path = require("path");
const url = require("url");
const TabGroup = require("electron-tabs");
let win;
const tabGroup = new TabGroup();
function createWindow()
win = new BrowserWindow();
win.loadURL(url.format(
pathname:path.join(__dirname,'index.html'),
protocol:'file',
slashes:true
));
win.on('closed',()=>
win = null;
)
app.on('ready', function()
createWindow();
const template = [
label : 'Backoffice',
submenu: [
label : 'Account Management',
click : function ()
let tab = tabGroup.addTab(
title: "Electron",
src: "http://electron.atom.io",
visible: true
);
,
label : 'HR Management',
click : function ()
console.log("CLICK HM menu");
,
]
]
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>BackOffice</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">
</head>
<body>
<h1>BackOffice</h1>
<div class="etabs-tabgroup">
<div class="etabs-tabs"></div>
<div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>
</body>
</html>
I am getting the following error when I run npm start
App threw an error during loadReferenceError: document is not defined at Object.<anonymous> (C:workspacenodejs_workspaceelectronmenu-demonode_moduleselectron-tabsindex.js:3:1)
at Object.<anonymous> (C:workspacenodejs_workspaceelectronmenu-demonode_moduleselectron-tabsindex.js:421:3)
at Module._compile (module.js:642:30)
at Object.Module._extensions..js (module.js:653:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:504:12)
at Function.Module._load (module.js:496:3)
at Module.require (module.js:586:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:DEV_2018nodejs_workspaceelectronmenu-demomain.js:11:18)
Why am I not able to load electron-modules package.
What is causing this error? How to create a new tab on click on
application menu in electron?
Basically my requirement is to implement tabs we see in eclipse IDE. A new tab opens on click on each source file and we can also drag the tab in eclipse.
– Karthik
Sep 11 '18 at 6:12
3 Answers
3
As @coolreader18 explained in details, you have to use electron-tabs in Renderer process
electron-tabs
This means you have to notify the html from main.js when you click a menu item. MenuItem's click provides you the caller BrowserWindow so you can send message to it.
MenuItem
BrowserWindow
main.js
...
label: 'Account Management',
click: function (menuItem, browserWindow, event)
browserWindow.webContents.send('add-tab',
title: 'Electron',
src: 'http://electron.atom.io',
visible: true
)
,
...
index.html
<body>
...
<script>
const ipcRenderer = require('electron')
const TabGroup = require('electron-tabs')
const tabGroup = new TabGroup()
ipcRenderer.on('add-tab', (event, arg) =>
tabGroup.addTab(arg)
)
</script>
</body>
In the documentation for electron-tabs, it mentions to call it from the renderer process, yet you're doing it in the main process. The main process is where you control the electron apis from, e.g. opening windows like you are in main.js. Each browser window creates a new renderer process, which can communicate with the main process or manage its own document and Web APIS.
electron-tabs
main.js
The error you're getting there, document is not defined, is because the main process does not have access to the DOM because you can open multiple browsers from the same main process; it wouldn't know which to use. So what you need to do is put a script in the renderer process. Create a renderer.js, and put the electron-tabs code (const TabGroup = require("electron-tabs");) there. Then, in your index.html, put <script src="renderer.js"></script>, and it should work.
document is not defined
renderer.js
electron-tabs
const TabGroup = require("electron-tabs");
index.html
<script src="renderer.js"></script>
I get an error - Reference Error : tabGroup is not defined in main.js when I moved the electron-tabs code(const TabGroup = require("electron-tabs"); to render.js. I believe TabGroup code should be there in main.js itself as I want open a tab on click of any menu and the menu code is in main.js
– Karthik
Sep 20 '18 at 6:56
It would be helpful & more clear to me if you can paste the whole source code. Thanks in advance.
– Karthik
Sep 20 '18 at 7:00
"I believe TabGroup code should be there in main.js" No, it should not. You have to initialize it in Renderer and just notify from Main
– pergy
Sep 21 '18 at 12:32
Yes, that's correct. The menu stuff that you manage in
main.js is the top menu bar, like File, Edit, View, etc. ALL the electron-tabs code should be in renderer.js, so anything that references TabGroup. That's why you're getting that error, because const tabGroup = new TabGroup() and tabGroup.addTab(...) is still in main.js. To communicate from the main process to the renderer process, which it seems like you want to do upon a menu bar event, look at ipcMain and ipcRenderer.– coolreader18
Sep 21 '18 at 12:58
main.js
electron-tabs
renderer.js
const tabGroup = new TabGroup()
tabGroup.addTab(...)
main.js
using ipc from MenuItems properly may be tricky, see my answer with working code
– pergy
Sep 21 '18 at 13:43
Could be because you are calling
const tabGroup = new TabGroup();
before the page has finished loading.
Try splitting it up into
let tabGroup;
and inside of createWindow():
tabGroup = new TabGroup();
Edit: You have to change const to let or var then, sorry
I still get same error. The error is at line const TabGroup = require("electron-tabs").
– Karthik
Sep 10 '18 at 9:18
Did you install the module correctly? If you get an error during the require() function, it could be related to your package installation. Try to make a clean install: github.com/brrd/electron-tabs
– Rapwnzel
Sep 10 '18 at 15:21
I have installed the module correctly. I have installed version 0.9.4. const TabGroup = require("electron-tabs") works fine if it is used inside index.html. I guess this issue is because tabGroup is not able to find HTML document object.
– Karthik
Sep 11 '18 at 5:58
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy
Please suggest the module to be imported in electron to implement tabs on click of menu if the 'electron-tabs' is not the correct module for implementing tabs in electron.
– Karthik
Sep 11 '18 at 6:06