英文:
Fixing Cannot read properties of undefined error in electron app using quasar
问题
以下是您要翻译的代码部分:
I am currently working on a small app using the quasar-cli setup with electron.
My electron-preload.ts looks like this:
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
})
}
In my MainLayout.vue i call it like this:
const firstimport = window.electronApi.importdata()
I then proceed to use the promise for some further operation which all receive the cannot read properties of undefined error. I also get errors in vscode that .electronApi doesn't exist. Literally the same thing worked in my electron app which wasn't created with quasar-cli so i am not sure what i am doing wrong.
Also my window gets created like this, if it's relevant:
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,
// More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
}
})
mainWindow.loadURL(process.env.APP_URL)
if (process.env.DEBUGGING) {
// if on DEV or Production with debug enabled
mainWindow.webContents.openDevTools()
} else {
// we're on production; no access to devtools pls
mainWindow.webContents.on('devtools-opened', () => {
mainWindow?.webContents.closeDevTools()
})
}
mainWindow.on('closed', () => {
mainWindow = undefined
})
}
请注意,这是您提供的代码的翻译部分。如果您有其他问题或需要更多帮助,请随时告诉我。
英文:
I am currently working on a small app using the quasar-cli setup with electron.
My electron-preload.ts looks like this:
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
})
In my MainLayout.vue i call it like this:
const firstimport = window.electronApi.importdata()
I then proceed to use the promise for some further operation which all receive the cannot read properties of undefined error. I also get errors in vscode that .electronApi doesn't exist. Literally the same thing worked in my electron app which wasn't created with quasar-cli so i am not sure what i am doing wrong.
Also my window gets created like this, if it's relevant:
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,
// More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
}
})
mainWindow.loadURL(process.env.APP_URL)
if (process.env.DEBUGGING) {
// if on DEV or Production with debug enabled
mainWindow.webContents.openDevTools()
} else {
// we're on production; no access to devtools pls
mainWindow.webContents.on('devtools-opened', () => {
mainWindow?.webContents.closeDevTools()
})
}
mainWindow.on('closed', () => {
mainWindow = undefined
})
}
答案1
得分: 1
global.d.ts文件内容如下:
import alasql from 'alasql'
/**
* Should match main/preload.ts for typescript support in renderer
*/
export default interface electronAPI {
sendMessage: (message: string) => void
importdata: () => any
}
declare global {
interface Window {
electronAPI: ElectronAPI,
}
}
英文:
Ok, After being kept up by this all night and looking at different projects and the old template I used I found my error. First of all i had a typo in electronAPI when calling it. Second of all to make the syntax errors in vscode go away i need the following file:
global.d.ts in my src folder(the renderer folder)
import alasql from 'alasql'
/**
* Should match main/preload.ts for typescript support in renderer
*/
export default interface electronAPI {
sendMessage: (message: string) => void
importdata: () => any
}
declare global {
interface Window {
electronAPI: ElectronAPI,
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论