CODEWITHSUNDEEP
electron
RorinL
RorinL

Reputation: 102

require cannot be used in Electron's preloadjs

main.js

//...
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, './preload/preload.js')
        }
    });
//...

preload.js

const { contextBridge, ipcRenderer } = require('electron');
const qrcode = require('qrcode');

contextBridge.exposeInMainWorld('electronAPI', {
    qrc: qrcode
})

the error

Unable to load preload script: F:\project\bluetools\preload\preload.js
Error: module not found: qrcode

Although direct exposure is not a good behavior, but I need to do it; and the example in the official documentation can be exposed directly, although it is not recommended; but why I require any third-party package in preloadjs shows "module not found: xxx"

Upvotes: 0

Views: 308

Answers (1)

RorinL
RorinL

Reputation: 102

I refer to here, I have got a solution, but it seems to be more troublesome, but what is this compared to security and normative?

ipc.js
module.exports = {
    xxx_req: (argements) => {
        const { ipcMain, winb: win } = argements;
        ipcMain.on('xxx_req', (event, response) => {
            win.webContents.send("xxx", "hello");
        });
    }
}

main.js
const ipcm = require('./ipc.js');
const createWindow = () => {
    const win = new BrowserWindow({...});
    ipcm.xxx_req({ ipcMain, winb: win })
}

preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
    xxx_req: (response) => ipcRenderer.send('xxx_req',response),
    xxx: (callback) => ipcRenderer.on('xxx',callback),
})

index.js(render process)
window.electronAPI.xxx_req("hello");
window.electronAPI.qrcode((event, detail) => {
     console.log(detail)
});

If you still don't understand why I did this, please refer to here.

Upvotes: 0

Related Questions