Vue-cli-plugin-electron-builder: __dirname is not defined

[simple-YoungBadBoy]

Description error
Uncaught ReferenceError: __dirname is undefined
At the time of evaluation (webpack-internal: ///./node_modules/electron/index.js: 4)
In Object ../ node_modules / electron / index.js (chunk-vendors.js: 2158)
In __webpack_require__ (app.js:849)
In fn (app.js: 151)
At the time of evaluation (webpack-internal: ///./src/main.js: 21)
In Module ../src/main.js (app.js: 1891)
In __webpack_require__ (app.js:849)
In fn (app.js: 151)
In Object.1 (app.js: 1988)
In __webpack_require__ (app.js:849)

Reproduce
In any .vue file
Undefined require ('electron') will report an error and cannot find __dirname

Expected behavior
Can call election's ipc method from anywhere, otherwise it can't communicate

Screenshot

[nklayman]

Try enabling nodeIntegration.

[simple-YoungBadBoy]

Thank you brother, this solves my problem very well! @nklayman

[yehtut-indexzero]

I don't see vue.config.js according to this URL https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration

[chrisjaimes]

this works, thanks! However this removes the ability to see the app in localhost... is that expected?

[nklayman]

@chrisjaimes not sure what you mean by "see the app in localhost". Can you elaborate on that?

[chrisjaimes]

@nklayman I meant localhost:8080 in the browser. When I run npm run electron:serve electron opens the app window but it also allows me to see the app in the browser. When I enabled nodeIntegration it also solved the initial issue but I can no longer see the app in the browser saying Uncaught ReferenceError: require is not defined. In the electron window is just fine

[nklayman]

When nodeIntegration is enabled, the webpack configuration is updated to allow native modules (by setting the webpack target to electron-renderer, along with other things). This means that it will no longer work in a web browser without the electron context, and I can't really do anything about it.