Cannot read property 'match' of undefined : const stateRecord: App = loadSettings()

[raphael10-collab]

I'm using your excellent electron app as starting point to understand how to implement a vue,.js - electron.js app in a totally different use-case.

I'm encountering this problem:

I discovered that once I activate this line:

const stateRecord: App = loadSettings()

in /src/store/modules/app.ts

I get this error: "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
    },
  },
  actions: {
    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')
}

export const setSettings = (key: string, value: string | boolean | number): string | boolean 
| number => {
  return db.set<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-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()
    //return this.db.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()
    return this.db.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()
  }
}

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.83
    Firefox: 80.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.4.6 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.4.6 
    @vue/cli-plugin-babel: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-e2e-cypress: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-router: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-typescript: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-unit-mocha: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-vuex: ~4.4.0 => 4.4.6 
    @vue/cli-service: ~4.4.0 => 4.4.6 
    @vue/cli-shared-utils:  4.4.6 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: ^1.0.3 => 1.0.3 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    typescript: ^3.9.7 => 3.9.7 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.5 => 7.2.5 
    vue-cli-plugin-electron-builder: ~2.0.0-rc.4 => 2.0.0-rc.4 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.20.0 => 8.20.0 
    vue-loader:  15.9.3 
    vue-property-decorator: ^9.0.0 => 9.0.0 
    vue-router: ^3.2.0 => 3.3.4 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuetify: ^2.3.10 => 2.3.10 
    vuex: ^3.5.1 => 3.5.1 
    vuex-class: ^0.3.2 => 0.3.2 
  npmGlobalPackages:
     @vue/cli: 4.4.6

  electron version: 10.0.0

This is vue.config.js :

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.
      // https://github.com/nklayman/vue-cli-plugin-electron-builder/issues
/652#issuecomment-583764345
      externals: ['ggc', 'tesseract.js'],
      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.ts',
      // 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 this is 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)
  }),
  //https://vuetifyjs.com/en/getting-started/quick-start/#webpack-install
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('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 'match' of undefined"? What's wrong with this function in class DB ?:

public get<T>(key: string): T {
  return this.read().get(key).value()
  //return this.db.get(key).value()
}

You can find the GitHub repo here: https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding

Looking forward to your kind help

[ysfscream]

@raphael10-collab Hey, thanks for your using. You first confirm whether all operations on the database will have this problem, and check again if db.json is created in the corresponding path.

[raphael10-collab]

Hi @ysfscream thanks for helping.

I discovered that also the operation setSettings has the same problem:
once I only activate setSettings in src/store/modules/app.ts I get the same error:

import Vue from 'vue'
//import { loadSettings, setSettings } from '@/services/electron-services/setting/setting'
import { 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 || 'dark',
    //currentLang: stateRecord.currentLang || 'en',
    //currentTheme: 'light',
  },
  mutations: {
    //[TOGGLE_THEME](state: App, currentTheme: Theme) {
    //  state.currentTheme = currentTheme
    //},
    //[TOGGLE_LANG](state: App, currentLang: Language) {
    //  state.currentLang = currentLang
    //},
  },
  actions: {
    TOGGLE_THEME({ commit }: any, payload: App) {
      setSettings('settings.currentTheme', payload.currentTheme)
      commit(TOGGLE_THEME, payload.currentTheme)
    },
    //TOGGLE_LANG({ commit }: any, payload: App) {
    //  setSettings('settings.currentLang', payload.currentLang)
    //  commit(TOGGLE_LANG, payload.currentLang)
    //},
  },
}

export default app

src/services/electron-services/setting/setting.ts :

import db from '../database/index'

//export const loadSettings = (): App => {
//  return db.get<App>('settings')
//}

export const setSettings = (key: string, value: string | boolean | number): string | boolean | number => {
  return db.set<string | boolean | number>(key, value)
}

export default {}

What does it mean if db.json is indeed created in the corresponding path?

(base) marco@pc01:~/.config/base$ ls -lah
total 76K
drwx------ 11 marco marco 4,0K set  4 11:05  .
drwx------ 60 marco marco 4,0K set  4 10:51  ..
drwx------  3 marco marco 4,0K set  4 11:05  blob_storage
drwx------  3 marco marco 4,0K set  4 11:05  Cache
drwx------  4 marco marco 4,0K set  4 10:51 'Code Cache'

-rw------- 1 marco marco 20K set 4 10:51 Cookies
-rw------- 1 marco marco 0 set 4 10:51 Cookies-journal
drwx------ 2 marco marco 4,0K set 4 10:51 'Crash Reports'
-rw-r--r-- 1 marco marco 136 set 4 10:51 db.json
drwx------ 2 marco marco 4,0K set 4 10:51 Dictionaries
drwxr-xr-x 3 marco marco 4,0K set 4 10:51 extensions
drwx------ 2 marco marco 4,0K set 4 10:51 GPUCache
drwx------ 3 marco marco 4,0K set 4 10:51 'Local Storage'
-rw------- 1 marco marco 731 set 4 11:05 'Network Persistent State'
-rw------- 1 marco marco 822 set 4 11:05 Preferences
drwx------ 2 marco marco 4,0K set 4 11:05 'Session Storage'

(base) marco@pc01:~/.config/base$ nano db.json :

{
  "windowSize": {
    "width": 1025,
    "height": 749
  },
  "settings": {
    "currentLang": "en",
    "currentTheme": "light"
  }
}

[ysfscream]

What does it mean if db.json is indeed created in the corresponding path?

Means to check whether db.json has been created and it’s okay to look at the code now.

1. From the error message of the console, it seems to be the problem of adapter/FileSync in lowdb. I am not sure if it is because db.json cannot be read. You can modify this line of code and try it without adding your STORE_PATH:

- const adapter: Lowdb.AdapterSync<Schema> = new FileSync<Schema>(path.join(STORE_PATH, 
'/db.json'))
+ const adapter = new FileSync('db.json')

2. Didn't understand why you still add a webpack config file?

[raphael10-collab]

I removed webpack.config.js, removed node_modules folder, executed yan in order to re-install node_modules, and modified in src/services/electron-services/database/index.ts

  public constructor() {
    // const adapter: Lowdb.AdapterSync<Schema> = new FileSync<Schema>(path.join(STORE_PATH, '/db.json'))
    const adapter= new FileSync('db.json')

and still get this error:

This is the line in fileSync.js which seems to be involved:

[ysfscream]

OK, I found the polyfills.js file according to the error message. It is very likely that there is an error in this line. You can try to print the process to see.

[raphael10-collab]

I've put in node_modules/graceful-fs/polyfill.js
console.log("process.version: ", process.version) :

function patch (fs) {
  // (re-)implement some things that are known busted or missing.

  // lchmod, broken prior to 0.6.2
  // back-port the fix here.

  console.log("process.version: ", process.version)

  if (constants.hasOwnProperty('O_SYMLINK') &&
      process.version.match(/^v0\.6\.[0-2]|^v0\.5\./)) {
    patchLchmod(fs)
  }

And this is the output:

process.version: undefined

What is this "process"? And why its version is undefined?

[ysfscream]

So this should be the problem.

The process object is a global that provides information about, and control over, the current Node.js process. As a global, it is always available to Node.js

https://nodejs.org/api/process.html#process_process

About process, you can refer to the Node.js documentation for understanding, but why yours has no content, I have no idea about it. Maybe it's a problem with your local Node environment. Run node -v on the Terminal to check it. If it still doesn't work, I suggest you try to reinstall it.

[raphael10-collab]

node is working fine:

(base) marco@pc01:~/webMatters/electronMatters/ElectronVueTypeScriptScaffolding$ node -v
v14.5.0


(base) marco@pc01:~/webMatters/electronMatters/ElectronVueTypeScriptScaffolding$ node
Welcome to Node.js v14.5.0.
Type ".help" for more information.


> console.log(process.versions)
{
  node: '14.5.0',
  v8: '8.3.110.9-node.23',
  uv: '1.38.0',
  zlib: '1.2.11',
  brotli: '1.0.7',
  ares: '1.16.0',
  modules: '83',
  nghttp2: '1.41.0',
  napi: '6',
  llhttp: '2.0.4',
  openssl: '1.1.1g',
  cldr: '37.0',
  icu: '67.1',
  tz: '2020a',
  unicode: '13.0'
}

> console.log(process.version)
v14.5.0

May be this version "undefined" is due to the fact that I set, to keep the app as safe as possible, nodeIntegration: false in

webPreferences: {
      nodeIntegration: false,
      contextIsolation: true, // protects against prototype pollution
      preload: path.join(__dirname, "../dist_electron/preload.js"),
    },

?
But this nodeIntegration: false shouldn't affect the node functioning and in particular the node's process version

I searched in graceful-fs folder for all the occurences of process.version :

(base) marco@pc01:~/webMatters/electronMatters/ElectronVueTypeScriptScaffolding/node_modules/graceful-fs$ grep   
--recursive "process.version" *
graceful-fs.js:  if (process.version.substr(0, 4) === 'v0.8') {
polyfills.js:      process.version.match(/^v0\.6\.[0-2]|^v0\.5\./)) {

Why process.version is "undefined" in node_modules/graceful-fs/polyfills.js ?
And why process.version is defined, thus not undefined in node_modules/graceful-fs/graceful-fs.js ?

If I put console.log in:

  if (process.version.substr(0, 4) === 'v0.8') {
     console.log("graceful-fs-process.version: ", process.version)
    var legStreams = legacy(fs)
    ReadStream = legStreams.ReadStream
    WriteStream = legStreams.WriteStream
  }

in node_modules/graceful-fs/graceful-fs.js

I do not get any output...

Putting console.log(process) in node_modules/graceful-js/polyfill.js :

function patch (fs) {
  // (re-)implement some things that are known busted or missing.

  // lchmod, broken prior to 0.6.2
  // back-port the fix here.

   console.log("process: ", process)

  console.log("process.version: ", process.version)

I get :

 INFO  Launching Electron...
process:  process {
  version: 'v12.16.3',
  versions: {
    node: '12.16.3',
    v8: '8.5.210.20-electron.0',
    uv: '1.34.2',
    zlib: '1.2.11',
    brotli: '1.0.7',
    ares: '1.16.0',
    modules: '82',
    nghttp2: '1.41.0',
    napi: '5',
    llhttp: '2.0.4',
    http_parser: '2.9.3',
    openssl: '1.1.0',
    icu: '67.1',
    unicode: '13.0',
    electron: '10.0.0',
    chrome: '85.0.4183.84'
  },
  arch: 'x64',
  platform: 'linux',
  release: {
    name: 'node',
    lts: 'Erbium',
    sourceUrl: 'https://nodejs.org/download/release/v12.16.3/node-v12.16.3.tar.gz',
    headersUrl: 'https://nodejs.org/download/release/v12.16.3/node-v12.16.3-headers.tar.gz'
  },
  _rawDebug: [Function: _rawDebug],

plenty of other output at the end of which :

process.version:  v12.16.3
(node:9831) ExtensionLoadWarning: Warnings loading extension at /home/marco/.config/base/extensions 
/nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'.    
Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension with file or directory name    
_metadata. Filenames starting with "_" are reserved for use by the system. 
No type errors found
Version: typescript 3.9.7
Time: 4215ms

So, it seems that process.version used by node_modules/graceful-fs/polyfill.js is: v12.16.3

Why the print of console.log("process.version: ", process.version) gives "undefined" and not v12.16.3 ?

[ysfscream]

OK, I think this should be the reason for this error.

May be this version "undefined" is due to the fact that I set, to keep the app as safe as possible, nodeIntegration: false

The nodeIntegration: false means that access to Node.js API and its modules is disabled by default,
and these two file modules may need to access Node.js modules or APIs.

https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

nodeIntegration Boolean (optional) - Whether node integration is enabled

Enabling nodeIntegration only imposes risks if you load and execute code from untrusted sources, i.e. the internet or from user input. So you can set it to true value and try again.

[raphael10-collab]

I've put nodeIntegration: true in src/background.ts :

    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 as unknown) as boolean,
      nodeIntegration: true,
      //nodeIntegration: false,
      //contextIsolation: true, // protects against prototype pollution
      //preload: path.join(__dirname, "../dist_electron/preload.js"),
    },

but still get the same error: "Uncaught TypeError: Cannot read property 'match' of undefined"

Anyway, as far as I understand, to keep electron.js app safer nodeIntegration: false in conjunction with the use of preload file should be preferred: https://www.electronjs.org/docs/tutorial/security#electron-security-warnings

I do not understand why process.version is "undefined" in node_modules/graceful-fs/polyfill.js but when printed outside of polyfill.js is v12.16.3

[ysfscream]

Well, now I can only provide a few debug ideas for reference, because I don’t know why and I can’t reproduce this issue. Sorry about that.

1. Create a simple project like this, then run it to see if there are any problems, and then set it step by step to compare the difference with the current project.

2. Debug the code of graceful-fs.js, check the step from which process.version is set to undefined, and to understand the code of this library.

3. Open an issue under the graceful-fs.js repository.

[raphael10-collab]

I just updated the repo of this simple project: https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding, which is downloadable,

and I already opened an issue under graceful-fs.js repository: isaacs/node-graceful-fs#196

I'm trying to understand where process.version is set to undefined, but till now I didn't find it.

I'm wondering why you don't have any issues about this aspect.

Anyway, thank you very much for your kind help.

[raphael10-collab]

@ysfscream in isaacs/node-graceful-fs#196 I was suggested to change in /src/services/electron-services/database/index.ts the way to import electron and fs-extra :

https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding/blob/master/src/services/electron-services/database/index.ts :

const { app, remote } = window.require('electron')
const fs = remote.require('fs-extra')

But I do not understand how to define window in /src/services/electron-services/database/index.ts
Any idea how to accomplish that?

[ysfscream]

Sorry, I cloned your project and want to run it for testing, but an error occurred.

App threw an error during load
ReferenceError: window is not defined
    at eval (webpack:///./src/services/electron-services/database/index.ts?:8:25)
    at Module../src/services/electron-services/database/index.ts (/Users/yushifan/Documents/GitHub/ElectronVueTypeScriptScaffolding/dist_electron/index.js:1894:1)
    at __webpack_require__ (/Users/yushifan/Documents/GitHub/ElectronVueTypeScriptScaffolding/dist_electron/index.js:20:30)
    at eval (webpack:///./src/background.ts?:7:100)
    at Module../src/background.ts (/Users/yushifan/Documents/GitHub/ElectronVueTypeScriptScaffolding/dist_electron/index.js:1870:1)
    at __webpack_require__ (/Users/yushifan/Documents/GitHub/ElectronVueTypeScriptScaffolding/dist_electron/index.js:20:30)
    at eval (webpack:///multi_./src/background.ts?:1:18)
    at Object.0 (/Users/yushifan/Documents/GitHub/ElectronVueTypeScriptScaffolding/dist_electron/index.js:1917:1)
    at __webpack_require__ (/Users/yushifan/Documents/GitHub/ElectronVueTypeScriptScaffolding/dist_electron/index.js:20:30)
    at /Users/yushifan/Documents/GitHub/ElectronVueTypeScriptScaffolding/dist_electron/index.js:84:18

[raphael10-collab]

Hi @ysfscream !!!

The error "window is not defined" was due to these lines that I now commented in /src/services/electron-services/database/index.ts :

//const { app, remote } = window.require('electron')
//const fs = remote.require('fs-extra')

Now with these lines commented we have the usual error "Cannot read property'match' of undefined

which is the error we are trying to solve.

I updated and committed the github repo: https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding.git

Thank you very much for helping!!!

[ysfscream]

This is great!! Hope you can have a good development experience. I will close this issue :)

[raphael10-collab]

@ysfscream Have you figured out how to solve this problem?

[ysfscream]

Actually, I didn’t fully understand. Did you replace import with require?

[raphael10-collab]

The code which causes the error: "Cannot read property 'match' of undefined"

should be placed in this file:
https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding/blob/master/src/services/electron-services/database/index.ts

But I do not know how to solve it

[ntoskrnl7]

Write the following in vue.config.js:

....

configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.version': JSON.stringify(process.version)
})
],

...

}
...

[jiqiangzhu]

Write the following in vue.config.js:

....

configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.version': JSON.stringify(process.version)
})
],

...

}
...

It doesn't work at all