CODEWITHSUNDEEP
javascriptelectron
Jack P
Jack P

Reputation: 479

Uncaught ReferenceError: require is not defined (electron)

I am having trouble with my Electron app. I had it working about 9 months ago, but now the custom minimise and maximise buttons I made are not functioning properly.

Here is my file structure

node_modules
    ...
web
    css
        main.css
    html
        index.html
    images
        ...
    js
        index.js
    themes
        ...
main.js
package.json
package-lock.json
require.js

And here is the contents of index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/main.css">
        <style type="text/css">* {visibility: hidden;}</style>
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
        <link rel="icon" href="../images/favicon-32x32.png" />
    </head>
    <body>
        <div id="wrapper">
            <div id="title-bar">
                <div id="title-bar-btns">
                    <button id="min-btn" onclick="window_minimise()">&#x2014;</button>
                    <button id="close-btn" onclick="window_close()">&#x2715;</button>
                </div>
            </div>
        ...
        </div>
        <script>
            // You can also require other files to run in this process
            require('../../renderer.js')
        </script>
        <script src="../js/index.js" type="text/javascript"></script>
    </body>
</html>

And index.js

...
const {BrowserWindow} = require('electron').remote;

  function window_minimise(){
      let window = BrowserWindow.getCurrentWindow();
      window.minimize();
  }

  function window_close(){
      let window = BrowserWindow.getCurrentWindow();
      window.close();
  }
...

And here is my main.js file

const {app, BrowserWindow} = require('electron')

let mainWindow

function createWindow () {

  let mainWindow = new BrowserWindow({
      width: 1200,
      height: 748,
      icon:'web/images/favicon-32x32.png',
      resizable: false,
      frame: false,
      show: false,
      backgroundColor: '#171717',
      webPreferences: {
          nodeIntegration: true
      }
  })

  mainWindow.once('ready-to-show', () => {
  mainWindow.show()
})
  mainWindow.setMenu(null);

  mainWindow.loadURL('http://localhost:8000/html/index.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

When I click minimise or maximise, nothing happens. So I went to http://localhost:8000/html/index.html and checked the console, and I saw these errors

Uncaught ReferenceError: require is not defined at index.html:137

Uncaught ReferenceError: require is not defined at index.js:110

I am using electron version 5.0.2 by the way.

If someone could help me resolve this, that would be wonderful.

Thanks.

EDIT: The errors I mentioned above are shown when the page loads, and this error is shown when I click minimise

Uncaught ReferenceError: Cannot access 'BrowserWindow' before initialization at window_minimise (index.js:113) at HTMLButtonElement.onclick (index.html:18)

EDIT2: I think the issue is that eel (the code that allows me to interface python with my electron app) requires the webpage to be run on localhost, and thus node features such as require do not work. I go into a bit more detail in a GitHub issue here: github.com/ChrisKnott/Eel/issues/147

Upvotes: 2

Views: 6381

Answers (2)

K4S3
K4S3

Reputation: 163

All you need to do is add contextIsolation: false after nodeIntegration: true in the webPreferences object

Upvotes: 6

Aravinda Meewalaarachchi
Aravinda Meewalaarachchi

Reputation: 2629

Change your index.js file as follows. Then use nodeRequire instead of require keyword.

  initNodeRequire();
  const {BrowserWindow} = nodeRequire('electron').remote;

  function window_minimise(){
      let window = BrowserWindow.getCurrentWindow();
      window.minimize();
  }

  function window_close(){
      let window = BrowserWindow.getCurrentWindow();
      window.close();
  }

  function initNodeRequire(){
       window.nodeRequire = require;
       delete window.require;
       delete window.exports;
       delete window.module;
  }

Upvotes: 1

Related Questions