problems with __dirname in Electron js

Question

i am taking a course that uses Electron 5.0.13, and is giving that error in the terminal of my application in Electron

Uncaught ReferenceError: __dirname is not defined
at eval (index.js?bdb9:4)
at Object../node_modules/electron/index.js (chunk-vendors.js:2080)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Home.vue?vue&type=script&lang=js&:2)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Home.vue?vue&type=script&lang=js& (app.js:950)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (Home.vue?59e2:1)
at Module../src/components/Home.vue?vue&type=script&lang=js& (app.js:1113)

I was using Electron 9.0 and came across this error in the course had someone who asked and the teacher answered that was to put Electron 5.0.13, that’s what I did, but n solved, already removed Yarn-lock and node_modules several times and did not solve.

Here is the code

<script src="https://electron.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template>
    <v-content fluid>
        <v-form>
            <v-file-input multiple chips v-model="files" append-icon="mdi-send"
            label="Selecione um Legenda" prepend-icon="mdi-message-text"
            @click:append="processSubtitles"/>
        </v-form>
        <div class="pills">
            <Pill v-for="word in groupedWords" :key="word.name" 
            :name="word.name" :amount="word.amount"/>
        </div>
    </v-content>
</template>

<script>
import { ipcRenderer } from 'electron'
import Pill from './pill.vue'

export default {
    components: { Pill },
    data: function() {
        return {
            files: [],
            groupedWords: [
                { name: 'i', amount: 1234 },
                { name: 'you', amount: 900 },
                { name: 'he', amount: 853 }
            ]
        }
    },
     methods: {
         processSubtitles() {
             console.log(this.files)
            
            ipcRenderer.send('blabla', 'ping')
            ipcRenderer.on('blabla', (event, resp) => {
                console.log(resp)
            })
        }
    }
}
</script>

Answer 1

Creates a file called vue.config.js at the root of the project, and puts this inside to enable Node integration.

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

Credits: https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/683#issuecomment-600179004

Answer 2

Try to use the solution you have in that Soen publication using Preload.js and window:

This way you can call the method below inside the files

window.ipcRenderer.send(channel, args...) .

Just make sure you set up the Preload.js file on Vue.config.js:

// vue.config.js - project root
module.exports = {
  pluginOptions: {
    electronBuilder: {
       preload: 'src/preload.js'  //adicione essa linha
    }
  }
}

The file Preload.js:

// src/preload.js

import { contextBridge, ipcRenderer } from 'electron'


contextBridge.exposeInMainWorld('ipcRenderer', {
  send: (channel, data) => {
    let validChannels = ['nameOfClientChannel'] // <-- Array of all 
    ipcRenderer Channels used in the client
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  },
  receive: (channel, func) => {
    let validChannels = ['nameOfElectronChannel'] // <-- Array of all 
    ipcMain Channels used in the electron
    if (validChannels.includes(channel)) {
      // Deliberately strip event as it includes `sender`
      ipcRenderer.on(channel, (event, ...args) => func(...args))
    }
  }
})    

---

Another solution can be found in that article:

It uses a __Static parameter instead of __dirname to refer to the Preload.js file and does not configure in Vue.config.js. To make sure it works you need to disable es-lint Warning for Preload.js within the Browserwindow constructor:

// eslint-disable-next-line no-undef
preload: path.resolve(__static, 'preload.js')

And make sure you’ve added the Preload.js file inside the /public folder