require is not defined

Describe the bug When I import custom-electron-titlebar, I get an Uncaught ReferenceError: require is not defined error in devtools.

|> Uncaught ReferenceError: require is not defined ------------ external “electron”:1 at Object.electron (external “electron”:1) at webpack_require (bootstrap:789) at fn (bootstrap:100) at Object…/node/modules/custom-electron-titlebar/lib/menubar.js (menubar.js:12) at webpack_require (bootstrap:789) at fn (bootstrap:100) at Object…/node/modules/custom-electron-titlebar/lib/titlebar.js (titlebar.js:15) at webpack_require (bootstrap:789) at fn (bootstrap:100) at Object…/node/modules/custom-electron-titlebar/lib/index.js (index.js:15)

To Reproduce Steps to reproduce the behavior: I’ve commited a few different options on my project, so you can see exactly what I’m adding and where. (sorry, even the “working” version is ugly, debugging, JSON.stringify stuff)

Here’s the commit that’s currently working properly. Here’s the commit with import { Titlebar, Color } from ‘custom-electron-titlebar’ added to renderer.js

Expected behavior I expected these lines to add a custom title bar.

Desktop (please complete the following information):

• OS: [Windows]
• Electron version [8.0.0]
• Node Version [v12.15.0]

[Fraasi]

Electron is patching up some security holes and nodeintegration is no longer recommended. I got around this require/import problem by initiating titlebar in my preload script , works nicely in my use case. see this and this for more info.

const { Titlebar } = require('custom-electron-titlebar');

window.addEventListener('DOMContentLoaded', () => {
  new Titlebar({
    //  settings...
  })
})

[GypsyDangerous]

try window.require