Npm Install Cannot Read Property 'match' of Undefined
I'm using your fantabulous electron app as starting point to understand how to implement a vue,.js - electron.js app in a totally different employ-case.
I'm encountering this problem:
I discovered that once I actuate this line:
const stateRecord: App = loadSettings()
in /src/shop/modules/app.ts
I get this fault: "Cannot read property 'match' of undefined"
This is /src/store/modules/app.ts :
import Vue from 'vue' import { loadSettings, setSettings } from '@/services/electron-services/setting/setting' const TOGGLE_THEME = 'TOGGLE_THEME' const TOGGLE_LANG = 'TOGGLE_LANG' const stateRecord: App = loadSettings() const app = { state: { currentTheme: stateRecord.currentTheme || 'light', }, mutations: { [TOGGLE_THEME](state: App, currentTheme: Theme) { state.currentTheme = currentTheme }, }, deportment: { TOGGLE_THEME({ commit }: any, payload: App) { setSettings('settings.currentTheme', payload.currentTheme) commit(TOGGLE_THEME, payload.currentTheme) }, }, } export default app this is src/services/electron-services/setting/setting :
import db from '../database/index' export const loadSettings = (): App => { return db.get<App>('settings') } consign const setSettings = (primal: cord, value: cord | boolean | number): string | boolean | number => { return db.ready<string | boolean | number>(key, value) } export default {} and this is electron-services/database/index.ts :
import Lowdb from 'lowdb' import FileSync from 'lowdb/adapters/FileSync' import path from 'path' import fs from 'fs-actress' 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) } } grade DB { private db: Lowdb.LowdbSync<Schema> public constructor() { const adapter: Lowdb.AdapterSync<Schema> = new FileSync<Schema>(path.bring together(STORE_PATH, '/db.json')) this.db = Lowdb(adapter) // Utilise lodash-id must utilise 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 .gear up('settings', { currentLang: 'en', currentTheme: 'lite', }) .write() } // Purple to Night if (this.db.get('settings.currentTheme').value() === 'royal') { this.db.set('settings.currentTheme', 'dark').write() } if (!this.db.has('settings.currentLang')) { this.db.fix('settings.currentLang', 'en').write() } } // read() is to keep the data of the master procedure and the rendering process upward to date. public read() { return this.db.read() } public become<T>(key: string): T { return this.read().go(primal).value() //return this.db.get(key).value() } public observe<T>(key: string, id: string): T { const information: $TSFixed = this.read().get(key) return information.find({ id }).value() } public set<T>(central: cord, value: T): T { //return this.read().fix(key, value).write() return this.db.set(key, value).write() } public insert<T>(key: string, value: T): T { const information: $TSFixed = this.read().get(key) return information.insert(value).write() } public update<T>(cardinal: 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) render data.removeById(id).write() } public filter<T, M>(key: string, query: One thousand): T { const information: $TSFixed = this.read().get(key) return data.filter(query).value() } public has(key: cord): boolean { render this.read().has(primal).value() } } Surroundings Info:
Arrangement: OS: Linux 5.iv Ubuntu 18.04.v LTS (Bionic Beaver) CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ four.00GHz Binaries: Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node Yarn: 1.22.v - /usr/bin/yarn npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm Browsers: Chrome: 85.0.4183.83 Firefox: eighty.0 npmPackages: @vue/boom-boom-helper-vue-jsx-merge-props: i.0.0 @vue/babel-plugin-transform-vue-jsx: 1.1.2 @vue/babel-preset-app: 4.4.half dozen @vue/babel-preset-jsx: 1.1.2 @vue/babel-sugar-functional-vue: ane.1.2 @vue/babel-sugar-inject-h: 1.one.2 @vue/babel-sugar-v-model: 1.1.ii @vue/babel-sugar-v-on: one.1.2 @vue/cli-overlay: 4.4.6 @vue/cli-plugin-babel: ~iv.4.0 => four.4.vi @vue/cli-plugin-e2e-cypress: ~4.iv.0 => iv.4.6 @vue/cli-plugin-router: ~4.4.0 => four.4.6 @vue/cli-plugin-typescript: ~iv.4.0 => 4.iv.6 @vue/cli-plugin-unit-mocha: ~four.four.0 => 4.4.6 @vue/cli-plugin-vuex: ~four.4.0 => 4.4.6 @vue/cli-service: ~4.four.0 => iv.4.6 @vue/cli-shared-utils: 4.4.6 @vue/component-compiler-utils: 3.ii.0 @vue/preload-webpack-plugin: 1.1.2 @vue/test-utils: ^i.0.3 => 1.0.3 @vue/spider web-component-wrapper: 1.ii.0 babel-helper-vue-jsx-merge-props: two.0.3 typescript: ^three.ix.seven => three.9.7 vue: ^2.6.xi => 2.6.11 vue-class-component: ^7.2.5 => vii.2.5 vue-cli-plugin-electron-builder: ~2.0.0-rc.4 => 2.0.0-rc.four vue-hot-reload-api: 2.3.four vue-i18n: ^8.20.0 => viii.xx.0 vue-loader: 15.9.iii vue-property-decorator: ^9.0.0 => 9.0.0 vue-router: ^3.2.0 => 3.three.4 vue-style-loader: 4.1.ii vue-template-compiler: ^2.6.eleven => ii.6.eleven vue-template-es2015-compiler: 1.9.1 vuetify: ^2.3.10 => 2.3.10 vuex: ^3.5.1 => 3.five.one vuex-class: ^0.3.2 => 0.3.2 npmGlobalPackages: @vue/cli: 4.4.6 electron version: x.0.0 This is vue.config.js :
const WorkerPlugin = crave('worker-plugin') module.exports = { // options... publicPath: '', pluginOptions: { electronBuilder: { // Foreclose bundling of certain imported packages and instead retrieve these external dependencies at runtime. // In order to connect to websocket. // https://github.com/nklayman/vue-cli-plugin-electron-builder/bug /652#issuecomment-583764345 externals: ['ggc', 'tesseract.js'], builderOptions: { productName: 'GGC', win: { icon: './public/app.ico' }, mac: { icon: './public/icons/Icon.icns', target: [ 'pkg', 'dmg', 'zippo', ], }, linux: { icon: './public/app.png' } }, // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide /configuration.html#webpack-configuration chainWebpackRendererProcess: (config) => { // Concatenation webpack config for electron renderer process only // The post-obit 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.ts', // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide /configuration.html#typescript-options disableMainProcessTypescript: simulated, // Manually disable typescript plugin for master procedure. Enable if you desire to apply regular js for the chief procedure (src/background.js by default) mainProcessTypeChecking: simulated, // 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: simulated }, // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#spider web- workers configureWebpack: { plugins: [new WorkerPlugin()] } } } And this is webpack.config.js :
module.exports = { entry: './src/groundwork.ts', target: 'node', output: { path: path.bring together(__dirname, 'build'), filename: 'groundwork.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(procedure.env.NODE_ENV) }), //https://vuetifyjs.com/en/getting-started/quick-start/#webpack-install rules: [ { test: /\.due south(c|a)ss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', // Requires sass-loader@^7.0.0 options: { implementation: crave('sass'), fiber: crave('fibers'), indentedSyntax: true // optional }, // Requires sass-loader@^8.0.0 options: { implementation: require('sass'), sassOptions: { fiber: require('fibers'), indentedSyntax: true // optional }, }, }, ], }, ], } What could be the cause of this "Cannot read property 'lucifer' of undefined"? What's wrong with this role in course DB ?:
public get<T>(primal: string): T { return this.read().get(key).value() //render this.db.get(key).value() } You lot can find the GitHub repo here: https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding
Looking forrad to your kind help
Source: https://github.com/emqx/MQTTX/issues/304
0 Response to "Npm Install Cannot Read Property 'match' of Undefined"
Post a Comment