Cannot use electron in renderer

I was using electron-vue for my project. Then I faced some issues with it. https://github.com/SimulatedGREG/electron-vue/issues/773 So I thought that it is electron-vue’s problem, so I started to use this CLI plugin. But I have the same problem with this one too.

The code in database/index.js:

import { remote } from 'electron'
let databaseAddress = path.join(remote.app.getPath('userData'), 'db.db')

Error:

And I realized that It’s not just for remote, I have the same problem with ipcRenderer and others too.

package.json:

{
  "name": "ganjoor-electron",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.12",
    "@fortawesome/free-solid-svg-icons": "^5.6.3",
    "@fortawesome/vue-fontawesome": "^0.1.4",
    "bulma-rtl": "^0.7.1",
    "pg-hstore": "^2.3.2",
    "sequelize": "^4.42.0",
    "sqlite3": "^4.0.4",
    "tedious": "^3.0.1",
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "electron": "^4.0.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-electron-builder": "^1.0.0-rc.10",
    "vue-template-compiler": "^2.5.21"
  },
  "main": "background.js"
}

Folder Structure:

.
├── babel.config.js
├── dist_electron
│   ├── index.js
│   └── package.json
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── ganjoor.s3db
│   └── index.html
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── fonts
│   │   ├── font-style.css
│   │   └── logo.png
│   ├── background.js
│   ├── database
│   │   ├── index.js
│   │   └── models
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   ├── index.js
│   │   └── modules
│   └── views
│       ├── Poems.vue
│       ├── Poets.vue
│       ├── Poet.vue
│       └── Verse.vue
└── yarn.lock

• OS and version: Ubuntu 18.10
• node version: v8.15.0
• npm version: 6.4.1
• yarn version : 1.12.3
• vue-cli-plugin-electron-builder version : 1.0.0-rc.10
• electron version: 4.0.0

[nklayman]

The issue is that you are trying to use the same file in both the main and the render process. In the main process, it’s just electron.app.getPath(), but in the renderer it’s electron.remote.getPath(). Use this:

import electron from 'electron'
const isRenderer = process && process.type === 'renderer'
console.log((isRenderer ? electron.remote : electron).app.getPath('userData'))

[nklayman]

Actually, it does fail, but only if the server is started with the remote.app.getPath already there, it works fine if added via hmr.