[英]Cannot read property `match` of undefined. I have no clues about it, since it doesn't point to any files
I'm getting this error: Cannot read property match
of undefined.我收到此错误:无法读取未定义的属性
match
。
Cannot read property 'match' of undefined无法读取未定义的属性“匹配”
This is the line in polyfills.js pointed by the error message:这是错误消息指向的 polyfills.js 中的行:
I do not have any clue about this kind of problem, because it doesn't point to any specific file.我对这类问题没有任何线索,因为它不指向任何特定文件。 Would you be so kind in having a look at this github repo.
您能看看这个 github 回购协议吗?
https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding
Update 1)更新 1)
Thanks to Elias comment, I realized that vue.config.js was messed-up.感谢 Elias 的评论,我意识到 vue.config.js 被搞砸了。 Now vue.config.is is:
现在 vue.config.is 是:
// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide
/guide.html#web-workers
const WorkerPlugin = require('worker-plugin')
module.exports = {
// options...
publicPath: '',
pluginOptions: {
electronBuilder: {
// Prevent bundling of certain imported packages and instead
retrieve these external dependencies at runtime.
// In order to connect to websocket.
externals: ['ggc'],
builderOptions: {
productName: 'GGC',
win: {
icon: './public/app.ico'
},
mac: {
icon: './public/icons/Icon.icns',
target: [
'pkg',
'dmg',
'zip',
],
},
linux: {
icon: './public/app.png'
}
},
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/configuration.html#webpack-configuration
chainWebpackRendererProcess: (config) => {
// Chain webpack config for electron renderer process only
// The following example will set IS_ELECTRON to true in your
app
config.plugin('define').tap((args) => {
args[0]['IS_ELECTRON'] = true
return args
})
},
mainProcessFile: 'src/background.js',
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/configuration.html#typescript-options
disableMainProcessTypescript: false, // Manually disable
typescript plugin for main process. Enable if you want to use regular
js for the main process (src/background.js by default)
mainProcessTypeChecking: false, // Manually enable type checking
during webpck bundling for background file.
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/guide.html#preload-files
preload: 'src/preload.js',
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/security.html#node-integration
nodeIntegration: true
},
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/guide.html#web-workers
configureWebpack: {
plugins: [new WorkerPlugin()]
}
}
}
Regarding nodeIntegration, I disabled it in /src/background.js because I read it is more secure to have preload.js file关于 nodeIntegration,我在 /src/background.js 中禁用了它,因为我读到拥有 preload.js 文件更安全
This is my new webpack.config.js (it was messed up as well, like vue.config.is, with each module.exports overriding the previous one):这是我的新 webpack.config.js(它也被搞砸了,就像 vue.config.is,每个 module.exports 都覆盖了前一个):
module.exports = {
entry: './src/background.js',
target: 'node',
output: {
path: path.join(__dirname, 'build'),
filename: 'background.js'
},
// https://github.com/GoogleChromeLabs/worker-plugin
plugins: [
new WorkerPlugin()
]
}
I do not understand what should I enable here in webpack: https://webpack.js.org/plugins/define-plugin/我不明白我应该在 webpack 中启用什么: https://webpack.js.org/plugins/define-plugin/
Update 2)更新 2)
I disabled nodeIntegration in vue.config.js我在 vue.config.js 中禁用了 nodeIntegration
vue.config.js: vue.config.js:
// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide
/guide.html#web-workers
const WorkerPlugin = require('worker-plugin')
module.exports = {
// options...
publicPath: '',
pluginOptions: {
electronBuilder: {
// Prevent bundling of certain imported packages and instead
retrieve these external dependencies at runtime.
// In order to connect to websocket.
externals: ['ggc'],
builderOptions: {
productName: 'GGC',
win: {
icon: './public/app.ico'
},
mac: {
icon: './public/icons/Icon.icns',
target: [
'pkg',
'dmg',
'zip',
],
},
linux: {
icon: './public/app.png'
}
},
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/configuration.html#webpack-configuration
chainWebpackRendererProcess: (config) => {
// Chain webpack config for electron renderer process only
// The following example will set IS_ELECTRON to true in your
app
config.plugin('define').tap((args) => {
args[0]['IS_ELECTRON'] = true
return args
})
},
mainProcessFile: 'src/background.js',
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/configuration.html#typescript-options
disableMainProcessTypescript: false, // Manually disable
typescript plugin for main process. Enable if you want to use regular
js for the main process (src/background.js by default)
mainProcessTypeChecking: false, // Manually enable type checking
during webpck bundling for background file.
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/guide.html#preload-files
preload: 'src/preload.js',
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/security.html#node-integration
nodeIntegration: false
},
// https://nklayman.github.io/vue-cli-plugin-electron-builder
/guide/guide.html#web-workers
configureWebpack: {
plugins: [new WorkerPlugin()]
}
}
}
and defined process in webpack.config.js并在 webpack.config.js 中定义流程
webpack.config.js: webpack.config.js:
module.exports = {
entry: './src/background.ts',
target: 'node',
output: {
path: path.join(__dirname, 'build'),
filename: 'background.js'
},
// https://github.com/GoogleChromeLabs/worker-plugin
plugins: [
new WorkerPlugin()
],
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
}
When running yarn electron:serve I now get Error: Cannot read property 'match' of undefined当运行 yarn electron:serve 我现在得到错误:无法读取未定义的属性“匹配”
If I keep nodeIntegration:true in vue.config.js and change in src/background.js to:如果我在 vue.config.js 中保留 nodeIntegration:true 并将 src/background.js 更改为:
webPreferences: {
nodeIntegration: true,
//nodeIntegration: false,
//contextIsolation: true, // protects against prototype pollution
//preload: path.join(__dirname, "../dist_electron/preload.js"),
},
when running yarn electron:serve I get this error: "Cannot read property 'app' of undefined"运行 yarn electron:serve 时出现此错误:“无法读取未定义的属性‘app’”
This is /src/store/modules/app.ts:这是 /src/store/modules/app.ts:
import Vue from 'vue'
import { loadSettings, setSettings } from '@/services/electron-
services/setting/setting'
const TOGGLE_THEME = 'TOGGLE_THEME'
const stateRecord: App = loadSettings()
const app = {
state: {
currentTheme: stateRecord.currentTheme || 'light',
},
mutations: {
[TOGGLE_THEME](state: App, currentTheme: Theme) {
state.currentTheme = currentTheme
},
},
actions: {
TOGGLE_THEME({ commit }: any, payload: App) {
setSettings('settings.currentTheme', payload.currentTheme)
commit(TOGGLE_THEME, payload.currentTheme)
},
},
}
export default app
But I would prefer to solve the problem while keeping nodeIntegration: false in order to keep the app safer但我更愿意在保持 nodeIntegration: false 的同时解决问题,以保持应用程序更安全
Update 3) I discovered that the problem "Cannot read property match
of undefined" disappears once I comment this line更新 3) 我发现一旦我评论此行,“无法读取未定义的属性
match
”问题就消失了
const theme = db.get<Theme>('settings.currentTheme');
in src/background.ts:在 src/background.ts 中:
async function create Window() {
const windowSize = db.get<WindowSizeModel>('windowSize');
//const theme = db.get<Theme>('settings.currentTheme');
win = new BrowserWindow({
...windowSize,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, "../dist_electron/preload.js"),
},
})
and db.get('settings.currentTheme') comes from this file:和 db.get('settings.currentTheme') 来自这个文件:
src/services/electron-services/database/index.ts: src/services/electron-services/database/index.ts:
import Lowdb from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
import fs from 'fs-extra'
import LodashID from 'lodash-id'
import { app, remote } from 'electron'
interface Schema {
windowSize: {
height: number
width: number
}
settings: {
currentLang: string
currentTheme: string
}
}
const isRenderer: boolean = process.type === 'renderer'
// Render process use remote app
const APP: Electron.App = isRenderer ? remote.app : app
const STORE_PATH: string = APP.getPath('userData')
// In production mode, during the first open application
// APP.getPath('userData') gets the path nested and the datastore.js
is loaded.
// if it doesn't exist, create it.
if (!isRenderer) {
if (!fs.pathExistsSync(STORE_PATH)) {
fs.mkdirpSync(STORE_PATH)
}
}
class DB {
private db: Lowdb.LowdbSync<Schema>
public constructor() {
const adapter: Lowdb.AdapterSync<Schema> = new FileSync<Schema>
(path.join(STORE_PATH, '/db.json'))
this.db = Lowdb(adapter)
// Use lodash-id must use insert methods
this.db._.mixin(LodashID)
if (!this.db.has('windowSize').value()) {
this.db
.set('windowSize', {
width: 1025,
height: 749,
})
.write()
}
if (!this.db.has('settings').value()) {
this.db
.set('settings', {
//currentLang: 'en',
currentTheme: 'light',
})
.write()
}
// Purple to Night
if (this.db.get('settings.currentTheme').value() === 'purple') {
this.db.set('settings.currentTheme', 'night').write()
}
if (!this.db.has('settings.currentLang')) {
this.db.set('settings.currentLang', 'en').write()
}
}
// read() is to keep the data of the main process and the
rendering process up to date.
public read() {
return this.db.read()
}
public get<T>(key: string): T {
return this.read().get(key).value()
}
public find<T>(key: string, id: string): T {
const data: $TSFixed = this.read().get(key)
return data.find({ id }).value()
}
public set<T>(key: string, value: T): T {
return this.read().set(key, value).write()
}
public insert<T>(key: string, value: T): T {
const data: $TSFixed = this.read().get(key)
return data.insert(value).write()
}
public update<T>(key: string, id: string, value: T): T {
const data: $TSFixed = this.read().get(key)
return data.find({ id }).assign(value).write()
}
public remove<T>(key: string, id: string): T {
const data: $TSFixed = this.read().get(key)
return data.removeById(id).write()
}
public filter<T, K>(key: string, query: K): T {
const data: $TSFixed = this.read().get(key)
return data.filter(query).value()
}
public has(key: string): boolean {
return this.read().has(key).value()
}
}
export default new DB()
Your problem is the vue.config.js only exports the last object, each module.exports
overrides previous exports.你的问题是vue.config.js只导出最后一个 object,每个
module.exports
覆盖以前的导出。
The other problem you may have is that you disabled nodeIntegration
, thus process
will indeed be undefined
unless you enable webpacks definition .您可能遇到的另一个问题是您禁用
nodeIntegration
,因此process
确实是undefined
的,除非您启用webpacks definition 。
Edit: To make require
available on the renderer, you need to enable nodeIntegration
in your background.ts file or disable it in vue.config.js .编辑:要使
require
在渲染器上可用,您需要在background.ts文件中启用nodeIntegration
或在vue.config.js中禁用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.