apis delcared in contextbridge undefined in render process

I’ve been working on updating a electron app from 11.x to 12.x and have run into an issue where the apis declared by contextBridge.exposeInMainWorld come as undefined when called upon through window.

This is my preload.js file

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

contextBridge.exposeInMainWorld('api',{
    getPath: (filePath) => {
        return path.parse(filePath).base;
    },

    removeAllListeners: (ListenerType) => {
        ipcRenderer.removeAllListeners(ListenerType);
    },

    openNewPDF: (pdf) => {
        ipcRenderer.send('openNewPDF',pdf);
    },
    newWindow: (file) => {
        ipcRenderer.send('newWindow',file);
    },
    togglePrinting: (value) => {
        ipcRenderer.send('togglePrinting',value)
    },
    resizeWindow: (value) => {
        ipcRenderer.send('resizeWindow', value)
    }
});

my app.js

function createWindow(filename = null) {
    // Create the browser window.
    let win = new BrowserWindow({
        width: 550,
        height: 420,
        minWidth: 565,
        minHeight: 200,
        preload: path.resolve(path.join(__dirname, 'app/preload.js')),
        resizable: true,
        titleBarStyle: 'default',
        show: false
    });
    wins.push(win);

    // and load the index.html of the app.

    win.loadFile('app/index.html');
    win.openDevTools();
    let wc = win.webContents
    wc.on('will-navigate', function (e, url) {
        if (url != wc.getURL()) {
            e.preventDefault()
            shell.openExternal(url)
        }
    })

    win.once('closed', () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        wins = [];
    });

    win.webContents.removeAllListeners('did-finish-load');
    win.webContents.once('did-finish-load', () => {
        if (filename) {
            win.webContents.send('file-open', filename);
            win.show();
        } else {
            win.show();
        }
    });


    if (!menuIsConfigured) {
        const menu = Menu.buildFromTemplate(menuTemplate);

        menu.getMenuItemById('file-open').click = () => {
            openNewPDF();
        };

        menu.getMenuItemById('file-print').click = () => {
            const focusedWin = BrowserWindow.getFocusedWindow();
            focusedWin.webContents.send('file-print');
        };

        Menu.setApplicationMenu(menu);
        menuIsConfigured = true;
    }

    const openNewPDF = () => {
        dialog
            .showOpenDialog(null, {
                properties: ['openFile'],
                filters: [{ name: 'PDF Files', extensions: ['pdf'] }]
            })
            .then((dialogReturn) => {
                const filename = dialogReturn['filePaths'][0];
                if (filename) {
                    if (wins.length === 0) {
                        createWindow(filename.toString());
                    } else {
                        const focusedWin = BrowserWindow.getFocusedWindow();
                        if (focusedWin) {
                            focusedWin.webContents.send('file-open', filename.toString());
                        }
                    }
                }
            });
    }

    ipcMain.removeAllListeners('togglePrinting');
    ipcMain.once('togglePrinting', (e, msg) => {
        const menu = Menu.getApplicationMenu();
        menu.getMenuItemById('file-print').enabled = Boolean(msg);
    });

    ipcMain.removeAllListeners('newWindow');
    ipcMain.once('newWindow', (e, msg) => {
        console.log('opening ', msg, ' in new window');
        createWindow(msg);
    });

    ipcMain.removeAllListeners('resizeWindow');
    ipcMain.once('resizeWindow', (e, msg) => {
        const { width, height } = win.getBounds();
        if (width < 1000 || height < 650) {
            win.setResizable(true);
            win.setSize(1000, 650);
            win.center();
        }
    });

    ipcMain.removeAllListeners('openNewPDF');
    ipcMain.once('openNewPDF', (e, msg) => {
        openNewPDF();
    });
}

let fileToOpen = '';

const args = process.argv;
const argsLength = args.length;
if (argsLength > 1 && args[argsLength - 1].endsWith('.pdf')) {
    fileToOpen = args[argsLength - 1];
}

app.on('open-file', (event, path) => {
    event.preventDefault();
    if (app.isReady()) {
        if (wins.length === 0) {
            createWindow(path.toString());
        } else {
            const focusedWin = BrowserWindow.getFocusedWindow();
            focusedWin.webContents.send('file-open', path.toString());
        }
    }
    fileToOpen = path.toString();
});

app.whenReady().then(() => {
    if (fileToOpen) {
        createWindow(fileToOpen);
    } else {
        createWindow();
    }
});


app.on('window-all-closed', () => {
    app.quit()
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

I’m lost on why contextBridge doesn’t work.

Answer

The object passed to the BrowserWindow constructor is not correct. The preload option should be a property of webPreferences

const win = new BrowserWindow({
  webPreferences: {
    preload: YOUR_PRELOAD_SCRIPT_PATH
  }
});

See the docs