IPC в электронном рендерере выдает ошибку из-за отсутствия функции __dirname

Я хотел использовать следующий код для отправки сообщения от рендерера в основной процесс, который затем записывает его в файл журнала, используя электронный журнал. Мой main.js выглядит так:

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const { ipcMain } = require('electron');
const log = require('electron-log');
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    frame: true,
    width: 400,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false
    }
  })

  ipcMain.on('infoLog', (event, args) => {
    log.info(args)
   });
....

Теперь я попытался соответствующим образом обратиться к IPC в своем App.vue:

import Navbar from '@/components/Navbar'
const { ipcRenderer } = require('electron')

export default {
  name: 'App',
  components: {
    Navbar
  },
  created: function () {
    ipcRenderer.send('infoLog','A async message to main')
  }
}

Когда я запускаю его с помощью yarn electron:serve, я вижу эту ошибку в консоли окна:

Uncaught ReferenceError: __dirname is not defined
    at eval (webpack-internal:///./node_modules/electron/index.js:4)
    at Object../node_modules/electron/index.js (chunk-vendors.js:2778)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=script&lang=js:5)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=script&lang=js (app.js:938)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./src/App.vue?vue&type=script&lang=js:2)
    at Module../src/App.vue?vue&type=script&lang=js (app.js:1099)

Чего я не понимаю, так это того, что я настроил его точно так же, как документ Электрона:

https://www.electronjs.org/docs/api/ipc-main