Electron js: cannot read property 'showSaveDialog' of undefined

Question

I am new to Electron so please bear with my limited knowledge. I am trying to save HTML files from the 'save' option in template menu in main.js.

The application loads fine but when I go into the menu and click save - or open - the error shows up.1 I've tried it many different ways but I can't get rid of the aforementioned error.

Here's my code:

const {BrowserWindow, app, Menu, remote} = require('electron')
const fs = require('fs')
const url = require('url')
const path = require('path')
var dialog = require('electron').remote

app.on('ready', () => {
let mainWindow = new BrowserWindow({})

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file',
    slashes: true
    }));

mainWindow.webContents.on('will-navigate', (e, url) => {
    e.preventDefault()

    mainWindow.webContents.send('open-file', url.slice(7))
})
const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
Menu.setApplicationMenu(mainMenu);
}); 

//menu template 
const mainMenuTemplate = [
    {
        label: 'File',
        submenu: [
            {label: 'New File',
                accelerator: process.platform == 'darwin' ? 'Command+N' : 'Ctrl+N',
                click(){
                    //create new file
                }
            },
            {label: 'Open File',
                accelerator: process.platform == 'darwin' ? 'Command+O' : 'Ctrl+O',
                click(){
                    dialog.showOpenDialog();
                }
            },
            {label: 'Save',
                accelerator: process.platform == 'darwin' ? 'Command+S' : 'Ctrl+S',
                click(){
                    dialog.showSaveDialog((fileName) => {
                        if(fileName === undefined) {
                            alert("File not saved");
                            return;
                        }
                        var content = docment.getElementById('#container').value;
fs.writeFile(fileName, content, (err) => {
                            if (err) console.log(err);
                            alert("Save Succesful!")
                        });
                    });
                }
            },
            {label: 'Save As...',
                accelerator: process.platform == 'darwin' ? 'Command+Sft+S' : 'Ctrl+Sft+S',
                click(){
                    //create new file
                }
            },
            {role: 'quit',
            accelerator: process.platform == 'darwin' ? 'Command+F4' : 'Ctrl+F4' //Shortcuts 
            }
        ]
    }
];

app.on('window-al

Answer 1

You are importing remote via var dialog = require('electron').remote

while require('electron').remote returns remote proxy to namespace of electron. require('electron').remote.dialog is proxy to dialog module.