Electron menubar not loading file in Production - but working properly in development

[shanjairaj7]

Expected Behaviour

The app is supposed to open with the route specified, as it works for other windows with the same configuration.

Actual Behaviour

But the app opens with a white color window, without any route or page showing.

Specifications

• Menubar version: "menubar": "^9.3.0",
• Platform: macOS
• Electron version: 22.0.2

Other information

Hi guys, I am creating an electron application and I am using the menubar package for electron to create a menubar app.

This is the code I am using to load the menubar route, but once I package the app and open it, the window is not showing the route, it is showing a white screen.

I used the same configuration for creating other windows, and it works properly, only for the menubar it does not properly.

If anyone can let me know what is the error and how I could fix it, it would be really helpful.

  const devServerURL = createURLRoute("http://localhost:3000", "menubar");

  const fileRoute = createFileRoute(
    path.join(__dirname, "../", "index.html"),
    "menubar"
  );

  menubarWindow = menubar({
    index: !app.isPackaged ? devServerURL : fileRoute,
    preloadWindow: true,
    browserWindow: {
      width: 550,
      height: 675,
      show: true,
      resizable: false,
      icon: path.join(__dirname, "Minder-Logo.png"),
      webPreferences: {
        nodeIntegration: false, // Default is false
        contextIsolation: true, // Default is true
        preload: path.join(__dirname, "preload.js"), // Use of preload.jsc
        backgroundThrottling: false,
        devTools: true,
        // preload: path.join(__dirname, 'preload-alt.js')  // Use of preload-alt.js
      },
    },
  });

[parnaudd]

Hi,

I got the same problem when setting nodeIntegration to false and contextIsolation to true.

Do you find a solution about this ?

Thanks

[sqwm]

Have you found a solution to the problem you also encountered

[GiulioMabiloft]

I don't know what your createFileRoute function does but you need to make sure that the file loaded in the index prop is prefixed with file://

[ionutmiftode]

indeed, it needs to start with file://, this is how it worked for me:

const mb = menubar({
  index:
    is.dev && process
      ? process.env['ELECTRON_RENDERER_URL']
      : join('file://', __dirname, '../renderer/index.html'),
  preloadWindow: true,
  browserWindow: {
    width: APP_WIDTH,
    height: APP_HEIGHT,
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
      nodeIntegration: true
    }
  }
})