1

I'm developing an Electron application and I aim to 'split up' index.js (main process) file. Currently I have put my menu bar-related and Touch Bar-related code into two separate files, menu.js and touchBar.js. Both of these files rely on a function named redir, which is in index.js. Whenever I attempt to activate the click event in my Menu Bar - which relies on redir - I get an error:

TypeError: redir is not a function. This also applies to my Touch Bar code.

Here are my (truncated) files:

index.js

const { app, BrowserWindow } = require('electron'); // eslint-disable-line
const initTB = require('./touchBar.js');
const initMenu = require('./menu.js');

...

let mainWindow; // eslint-disable-line

// Routing + IPC
const redir = (route) => {
  if (mainWindow.webContents) {
    mainWindow.webContents.send('redir', route);
  }
};
module.exports.redir = redir;

function createWindow() {
  mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    title: 'Braindead',
    titleBarStyle: 'hiddenInset',
    show: false,
    resizable: false,
    maximizable: false,
  });

  mainWindow.loadURL(winURL);
  initMenu();
  mainWindow.setTouchBar(initTB);

  ...

}

app.on('ready', createWindow);

...

menu.js

const redir = require('./index');
const { app, Menu, shell } = require('electron'); // eslint-disable-line

// Generate template
function getMenuTemplate() {
  const template = [

    ...

    {
      label: 'Help',
      role: 'help',
      submenu: [
        {
          label: 'Learn more about x',
          click: () => {
            shell.openExternal('x'); // these DO work.
          },
        },

        ...

      ],
    },
  ];

  if (process.platform === 'darwin') {
    template.unshift({
      label: 'Braindead',
      submenu: [

        ...

        {
          label: 'Preferences...',
          accelerator: 'Cmd+,',
          click: () => {
            redir('/preferences'); // this does NOT work
          },
        } 

        ...

      ],
    });

    ...

  };

  return template;
}

// Set the menu
module.exports = function initMenu() {
  const menu = Menu.buildFromTemplate(getMenuTemplate());
  Menu.setApplicationMenu(menu);
};

My file structure is simple - all three files are in the same directory.

Any code criticisms are also welcome; I've spent hours banging my head trying to figure all this out.

2 Answers 2

7

redir it is not a function, because you're exporting an object, containing a redir property, which is a function.

So you should either use:

const { redir } = require('./index.js');

Or export it this way

module.exports = redir

When you do: module.exports.redir = redir;

You're exporting: { redir: [Function] }

Sign up to request clarification or add additional context in comments.

Comments

4

You are exporting

module.exports.redir = redir;

That means that your import

const redir = require('./index');

is the exported object. redir happens to be one of its keys. To use the function, use

const redir = require('./index').redir;

or destructure directly into redir

const { redir } = require('./index');

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.