Electron require() is not defined

问题

I'm creating an Electron app for my own purpose. My problem is when I'm using node functions inside my HTML page it throws an error of:

'require()' is not defined.

Is there any way to use Node functionalities in all my HTML pages? If it is possible please give me an example of how to do this or provide a link. Here are the variables I'm trying to use in my HTML page:

  var app = require('electron').remote; 
  var dialog = app.dialog;
  var fs = require('fs');

and these are the values I'm using in all my HTML windows within Electron.

回答1:

As of version 5, the default for nodeIntegration changed from true to false. You can enable it when creating the Browser Window:

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
});

回答2:

For security reasons, you should keep nodeIntegration: false and use a preload script to expose just what you need from Node/Electron API to the renderer process (view) via window variable. From the Electron docs:

Preload scripts continue to have access to require and other Node.js features

Example

main.js

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(app.getAppPath(), 'preload.js')
  }
})

preload.js

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

let currWindow = remote.BrowserWindow.getFocusedWindow();

window.closeCurrentWindow = function(){
  currWindow.close();
}

renderer.js

let closebtn = document.getElementById('closebtn');

closebtn.addEventListener('click', (e) => {
  e.preventDefault();
  window.closeCurrentWindow();
});

回答3:

Are you using nodeIntegration: false while BrowserWindow initialization? If so, set it to true (defaults value is true).

And include your external scripts in the HTML like this (not as <script> src="./index.js" </script>):

<script>
   require('./index.js')
</script>

回答4:

First off, @Sathiraumesh solution leaves your electron application with huge security issue. Imagine that your app is adding some extra features to messenger.com, for example toolbar's icon will change or blink when you've have unread message. So in your main.js file, you create new BrowserWindow like so (notice I intentionally misspelled messenger.com):

app.on('ready', () => {
    const mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
    mainWindow.loadURL(`https://messengre.com`);
});

What if messengre.com is a malicious website, that wants to harm your computer. If you set nodeIntegration: true this site has access to your local file system and can execute this:

require('child_process').exec('rm -r ~/');

And your home directory is gone.

Solution
Expose only what you need, instead of everything. This is achived by preloading javascript code with require statements.

// main.js
app.on('ready', () => {
    const mainWindow = new BrowserWindow({
        webPreferences: {
            preload: `${__dirname}/preload.js`
        }
    });
    mainWindow.loadURL(`https://messengre.com`);
});

// preload.js
window.ipcRenderer = require('electron').ipcRenderer;

// index.html
<script>
    window.ipcRenderer.send('channel', data);
</script>

Now awful messengre.com cannot delete your entire file system.

回答5:

Finally, I made it work.Add this code to your HTML document Script Element.

Sorry for the late Reply.I use the below code to do this thing.

window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;

And use nodeRequire instead of using require.

It works Fine.

回答6:

You have to enable the nodeIntegration in webPreferences to use it. see below,

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true
  }
})
win.show()

There was a breaking api changes in electron 5.0(Announcement on Repository). In recent versions nodeIntegration is by default set to false.

Docs Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.To solve this, you can turn off node integration in Electron:

But if you want to keep the abilities to use Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

<head>
    <script>
        window.nodeRequire = require;
        delete window.require;
        delete window.exports;
        delete window.module;
    </script>
    <script type="text/javascript" src="jquery.js"></script>
</head>

来源：https://stackoverflow.com/questions/44391448/electron-require-is-not-defined

标签

javascript

html

node.js

electron