[solved]After packaging for macOS the menubar has empty and inactive menu items


#1

Hi there,
I was following the tutorial for building custom menus at the electron docs. If I run “electron .” the menubar is fully functional and shows every menu item with its correct role. If I package everything with electron-package-interactive for darwin-x64 and start the app, the menu has empty items and the empty items does not have any roles or actions attached.

The “electron .” menubar:

The “Timency.app” menubar:

And here is my menu template:

'use strict'

const isDev = true;
const { app } = require('electron');
const ipc = require('electron').ipcMain;

var menuTemplate = [
  {
    label: 'Edit',
    submenu: [
      {
        role: 'undo'
      },
      {
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        role: 'cut'
      },
      {
        role: 'copy'
      },
      {
        role: 'paste'
      },
      {
        role: 'selectall'
      }
    ]
  },
  {
    label: 'View',
    submenu: [
      {
        label: 'Back',
        accelerator: 'CmdOrCtrl+B',
        click: function (item, focusedWindow) {
          if (focusedWindow) {
            focusedWindow.webContents.goBack()
          }
        }
      },
      {
        label: 'Reload',
        accelerator: 'CmdOrCtrl+R',
        click: function (item, focusedWindow) {
          if (focusedWindow) {
            focusedWindow.reload()
          }
        }
      },
      {
        role: 'togglefullscreen'
      }
    ]
  },
  {
    label: 'Window',
    role: 'window',
    submenu: [
      {
        role: 'minimize'
      },
      {
        role: 'close'
      }
    ]
  },
  {
    label: 'Help',
    role: 'help',
    submenu: [
      {
        label: 'Info',
        click: () => {
          ipc.emit('open-info-window')
        }
      }
    ]
  }
]

// Show Dev Tools menu if running in development
if (isDev) {
  menuTemplate[1].submenu.push(
    {
      label: 'Toggle Developer Tools',
      accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
      click: function (item, focusedWindow) {
        if (focusedWindow) {
          focusedWindow.webContents.toggleDevTools()
        }
      }
    }
  )
}

if (process.platform === 'darwin') {
  var name = app.getName()
  menuTemplate.unshift({
    label: name,
    submenu: [
      {
        role: 'about'
      },
      {
        type: 'separator'
      },
      {
        role: 'services',
        submenu: []
      },
      {
        type: 'separator'
      },
      {
        role: 'hide'
      },
      {
        role: 'hideothers'
      },
      {
        role: 'unhide'
      },
      {
        type: 'separator'
      },
      {
        role: 'quit'
      }
    ]
  })
  // Window menu.
  menuTemplate[3].submenu.push(
    {
      type: 'separator'
    },
    {
      role: 'front'
    }
  )
}

module.exports = menuTemplate

And this is my main.js:

const {Menu, app, BrowserWindow} = require('electron');
const menuTemplate = require('./menuTemplate.js');

let win;

function createWindow(){
	win = new BrowserWindow({
		width: 930,
		height: 600,
		minWidth: 930,
		minHeight: 600
	});

	win.loadURL(`file://${__dirname}/index.html`);

	win.on('closed', () => {
		win = null;
	})

	// set menu
	Menu.setApplicationMenu( Menu.buildFromTemplate( menuTemplate ) );
}

app.on('ready', createWindow);

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

app.on('activate', () => {
	if(win === null){
		createWindow();
	}
})

What am I doing wrong here?
Best Arne


#2

Well … I found the mistake! I was building with electron version 1.2.2 … if I build with electron version 1.4.2 everything works like it should! Sorry for opening this issue.