Error with electron's puppeteer. " equire is not defined" and "__dirname is not defined"

Question

I'm trying to create an Electron application using the Vue CLI package in npm, but in the process of using puppeteer, I get the following error message.

Uncaught ReferenceError: __dirname is not defined
    at eval (webpack-internal:///./node_modules/electron/index.js:4)
    at Object../node_modules/electron/index.js (chunk-vendors.js:2014)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./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/App.vue?vue&type=script&lang=js&:114)
    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/App.vue?vue&type=script&lang=js& (app.js:938)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./src/App.vue?vue&type=script&lang=js&:2)
    at Module../src/App.vue?vue&type=script&lang=js& (app.js:1007)
vue.runtime.esm.js?2b0e:8440 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

As a result of my research, I found an article that said I should set nodeIntegration to true, so I decided to try the following I changed nodeIntegration in background.js, App.vue, and vue.config.js to true, and now I get the following error. How can I fix this?

Uncaught ReferenceError: require is not defined
    at eval (external "events"?7a7e:1)
    at Object.events (app.js:1123)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (emitter.js?a6bd:1)
    at Object../node_modules/webpack/hot/emitter.js (chunk-vendors.js:3793)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (dev-server.js?6895:50)
    at Object../node_modules/webpack/hot/dev-server.js (chunk-vendors.js:3782)

The version of the npm package you are using is as follows.

"dependencies": {
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "electron": "^12.0.5",
    "electron-store": "^8.0.0",
    "multer": "^1.4.2",
    "nedb": "^1.8.0",
    "path": "^0.12.7",
    "puppeteer": "^9.1.1",
    "puppeteer-core": "^9.1.1",
    "puppeteer-in-electron": "^3.0.3",
    "readline": "^1.3.0",
    "require": "^2.4.20",
    "semantic-ui-vue": "^0.11.0",
    "vue": "^2.6.11",
    "vue-js-modal": "^2.0.0-rc.6",
    "vuejs-dialog": "^1.4.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "^4.5.13",
    "babel-eslint": "^10.1.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.1.1",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
    "vue-template-compiler": "^2.6.11"
  },

score 0 · Accepted Answer · answered May 13 '21 at 06:03

Make sure you have contextIsolation set to false in your BrowserWindow settings.

Like this:

new BrowserWindow({
    webPreferences:  {
        nodeIntegration:  true,
        contextIsolation: false
    },
});

See here:

NOTE: To access the Node.js API from the Renderer process, you need to set the nodeIntegration preference to true and the contextIsolation preference to false.

Disclaimer, turning on nodeIntegration opens up security holes in your app. See Zac's answer on how to fix them.

If you would like, you can take a look at this as well. https://stackoverflow.com/questions/67519649/an-error-occurred-in-vue-cli-electron-uncaught-in-promise-error-the-paramet — kuroro, May 13 '21 at 23:40

Error with electron's puppeteer. " equire is not defined" and "__dirname is not defined"

1 Answers1