Exposing an object in Electron via contextBridge.exposeInMainWorld results in Error 'Cannot read property ... of undefined.'

Question

I am having trouble accessing an object in App.vue that should be exposed via exposedInMainWorld.

Tried this with a plain Electron application without electron-vue and it worked out of the box. In my opinion I'm overlooking some basic js/npm/Electron/Vue things. Disclaimer: I'm no JS developer.

Error Details

Node version is 18.18.2. Start of the application is done via npm run electron:serve.

Electron is started and App.vue is displayed, when accessing the exposed object following error is displayed:

Cannot read property 'chrome' of undefined
TypeError: Cannot read property 'chrome' of undefined
    at Proxy.logVersions (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js:9:65)
    at onClick._cache.<computed>._cache.<computed> (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90:10:86)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:288:18)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:296:17)
    at HTMLAnchorElement.invoker (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:759:82)

Access to the object is in App.vue via console.log(...). Object is exposed in preload.js. See files below...

Creation of the App via CLI

The Electron app was created via vue-cli by executing following steps...

1. vue create hello-world
2. vue add electron-builder

Then I removed some scaffolded code in App.vue and added some code that should log some exposed versions.

Files

Following files exist:

src/App.vue (edited scaffolded template)

<template>
  <div>
    <a href="#" @click="logVersions">Log Versions</a>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    // should have access to window.versions object exposed in preload.js
    logVersions(){
      console.log(`This app is using Chrome (v${window.versions.chrome()}), Node.js (v${window.versions.node()}), and Electron (v${window.versions.electron()})`);
    }
  }
}
</script>

src/preload.js (added an exposed object to display versions)

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
})

src/background.js (unchanged)

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })
  // ... etc.

vue.config.js (added preload + nodeIntegration)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      preload: 'src/preload.js',
    }
  }
})