Error while loading electron-tabs module & unable to create tabs in electron : <p>I have installed electron-modules package for implementing tabs in electron as shown below</p>

<p>package.json</p>

<pre><code>{
  "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"
  }
}
</code></pre>

<p>main.js</p>

<pre><code>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',()=&gt;{
        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);
});
</code></pre>

<p>index.html</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;BackOffice&lt;/title&gt;
        &lt;link rel="stylesheet" href="styles.css"&gt;
        &lt;link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;BackOffice&lt;/h1&gt;
        &lt;div class="etabs-tabgroup"&gt;
            &lt;div class="etabs-tabs"&gt;&lt;/div&gt;
            &lt;div class="etabs-buttons"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="etabs-views"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I am getting the following error when I run npm start</p>

<pre><code>App threw an error during loadReferenceError: document is not defined at Object.&lt;anonymous&gt; (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:3:1)
    at Object.&lt;anonymous&gt; (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.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.&lt;anonymous&gt; (C:\DEV_2018\nodejs_workspace\electron\menu-demo\main.js:11:18)
</code></pre>

<ul>
<li><p>Why am I not able to load electron-modules package. </p></li>
<li><p>What is causing this error? How to create a new tab on click on
application menu in electron?</p></li>
</ul>
