Electron: How to close app from renderer?

Question

I'm using Electron React Boilerplate and I'm trying to figure out how to call getCurrentWindow().close() or app.quit()! I Tried the following solutions

but they all resulted in the same error each time Module not found: Can't resolve 'fs' I don't know why at all?

Menu.tsx (Menu bar where i'm trying to call exit from )

import React from 'react';
import {
  useColorMode,
  useColorModeValue,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  IconButton,
  MenuDivider,
  MenuGroup,
} from '@chakra-ui/react';
import {
  ExternalLinkIcon,
  RepeatIcon,
  EditIcon,
  HamburgerIcon,
} from '@chakra-ui/icons';
import { FaMoon, FaSun } from 'react-icons/fa';
import { BiCodeCurly } from 'react-icons/bi';
import { useIdleTimer } from 'react-idle-timer';
import { BsXLg } from 'react-icons/bs';

import * as remote from '@electron/remote';

const MainMenu: React.FC<any> = (props: {
  onActive: () => void;
  onIdle: () => void;
  onAction: () => void;
}) => {
  const { onActive, onIdle, onAction } = props;

  const { pause, resume } = useIdleTimer({
    timeout: 2000,
    onIdle,
    onActive,
    onAction,
  });

  const { toggleColorMode } = useColorMode();
  const text = useColorModeValue('Dark', 'Light');
  const ThemeIcon = useColorModeValue(FaMoon, FaSun);

  const handleExit = () => {
    remote.getCurrentWindow().close();
  };

  return (
    <Menu>
      {({ isOpen }) => {
        if (isOpen) {
          pause();
        } else {
          resume();
        }
        return (
          <>
            <MenuButton
              as={IconButton}
              aria-label="Options"
              icon={<HamburgerIcon />}
              variant="solid"
              colorScheme="blue"
              size="md"
            />
            <MenuList>
              <MenuItem onClick={handleExit} icon={<BsXLg />} command="⌘Q">
                Quit
              </MenuItem>
              <MenuItem icon={<ExternalLinkIcon />}>New Window</MenuItem>
              <MenuItem icon={<RepeatIcon />}>Open Closed Tab</MenuItem>
              <MenuItem icon={<EditIcon />}>Open File...</MenuItem>
              <MenuDivider />
              <MenuGroup title="Appearance" textAlign="left">
                <MenuItem onClick={toggleColorMode} icon={<ThemeIcon />}>
                  {text} Mode
                </MenuItem>
              </MenuGroup>
              <MenuGroup title="Advanced" textAlign="left">
                <MenuItem onClick={toggleColorMode} icon={<BiCodeCurly />}>
                  Edit Settings (JSON)
                </MenuItem>
              </MenuGroup>
            </MenuList>
          </>
        );
      }}
    </Menu>
  );
};

export default MainMenu;

score 0 · Answer 1 · answered Sep 21 '22 at 07:50

0

What do you think of Sending Signal to main using IPC to close App?

answered Sep 21 '22 at 07:50

Karl Garcia

45
11

Electron: How to close app from renderer?

1 Answers1