解决Quasar搭建的Electron应用中Cannot read properties of undefined错误

我用Quasar CLI搭建了一个Electron小型应用，electron-preload.ts代码如下：

import { contextBridge} from 'electron'
import alasql from 'alasql'

contextBridge.exposeInMainWorld('Electron', {
  importdata: () => importCsv()
})

export function importCsv () {
  console.log('we get here')
  return alasql.promise('SELECT * FROM CSV("/Users/niki/example_data.csv", {headers:true, seperators:","})')
    .then(function (data) {
      return data
    })
}

在MainLayout.vue中调用该方法：

const firstimport = window.electronApi.importdata()

但后续用Promise操作时一直报Cannot read properties of undefined错误，而且VSCode提示.electronApi不存在。之前不用Quasar CLI搭建的Electron应用里，相同代码能正常运行，找不到问题所在。窗口创建代码如下：

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
    width: 1000,
    height: 600,
    useContentSize: true,
    webPreferences: {
      contextIsolation: true,
      sandbox: false,
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
    }
  })

  mainWindow.loadURL(process.env.APP_URL)

  if (process.env.DEBUGGING) {
    mainWindow.webContents.openDevTools()
  } else {
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow?.webContents.closeDevTools()
    })
  }

  mainWindow.on('closed', () => {
    mainWindow = undefined
  })
}

1. 修复暴露名称与调用名称不匹配的问题 #

你在preload脚本里通过contextBridge.exposeInMainWorld暴露的对象名称是Electron，但渲染层调用的是window.electronApi，名称完全不匹配，这是最直接的错误。

两种修复方式二选一：

• 修改preload脚本的暴露名称：

contextBridge.exposeInMainWorld('electronApi', { // 改成electronApi
  importdata: () => importCsv()
})

• 修改渲染层的调用代码：

const firstimport = window.Electron.importdata() // 用Electron代替electronApi

2. 解决VSCode类型提示缺失问题 #

VSCode提示electronApi不存在，是因为TypeScript不知道window对象上有这个属性。需要添加类型声明文件：

在项目src目录下创建electron-env.d.ts文件，内容如下：

interface Window {
  electronApi: {
    importdata: () => Promise<any> // 可根据实际返回数据结构调整类型
  }
}

如果选择保留Electron作为暴露名称，就改成：

interface Window {
  Electron: {
    importdata: () => Promise<any>
  }
}

3. 排查Promise报错的潜在问题 #

如果修复名称后仍有Promise相关错误，检查以下两点：

• 文件路径问题：硬编码的/Users/niki/example_data.csv路径在不同环境下可能无法访问，建议改用Electron的dialog模块让用户手动选择文件，避免固定路径带来的兼容性问题。
• preload函数作用域问题：importCsv函数用了export，但在preload脚本里不需要导出，直接定义成内部函数即可，避免潜在的作用域冲突：

import { contextBridge} from 'electron'
import alasql from 'alasql'

// 改成内部函数，移除export
function importCsv () {
  console.log('we get here')
  return alasql.promise('SELECT * FROM CSV("/Users/niki/example_data.csv", {headers:true, seperators:","})')
    .then(function (data) {
      return data
    })
}

contextBridge.exposeInMainWorld('electronApi', {
  importdata: () => importCsv()
})

内容的提问来源于stack exchange，提问作者Barbarian772