Electron - Node Integration = false, Production Build Fails

[ghost]

Describe the bug
Using Quasar Electron Mode: with Node Integration False fails on production build using electron-builder.

// quasar.conf.js
      nodeIntegration: false,

// electron-main.js
      nodeIntegration: QUASAR_NODE_INTEGRATION,
      nodeIntegrationInWorker: QUASAR_NODE_INTEGRATION,
      preload: path.resolve(__dirname, 'electron-preload.js'),

The dev version works and loads fine, but on production build, i get the following error:

Uncaught ReferenceError: __dirname is not defined
at Object. (vendor.js:formatted:60347)

Diving Deeper:
The error is initiated at line APP_URL, I suspect this is a webpack config error, since for the same project and same code, SPA build (both prod and dev) works just fine.

Also, the main process and renderer process both do not throw any error, the problem just lies in the vendors.js chunk emitted for the app itself.

Also another project initiated some time before (earlier versions) used to work fine too.

e.exports = f(Object({
                NODE_ENV: "production",
                CLIENT: !0,
                SERVER: !1,
                DEV: !1,
                PROD: !0,
                MODE: "electron",
                **APP_URL: "file://" + __dirname + "/index.html",**
                VUE_ROUTER_MODE: "hash",
                VUE_ROUTER_BASE: ""
            }).NODE_NDEBUG)

What does not work
Setting up same env variable in quasar.conf.js with blank JSON string to overwrite the default value.

      env: ctx.dev
        ? { }
        : { APP_URL: JSON.stringify('') },

Expected behavior
Should probably extend SPA config without modification on Node Integration = False.

Platform (please complete the following information):
OS: Win 10.0.17134
Yarn: 1.22.4
Browsers: Chrome 81.0.4044.122
Electron: 8.2.3
Electron-Builder: 22.5.1

[ghost]

Temporary Hack:

node_modules@quasar\app\lib\quasar.conf.js

1. Comment Out
   cfg.build.APP_URL = file://" + __dirname + "/index.html

2. Change the loadURL param in electron-main.js in your src-electron/main-process
   mainWindow.loadURL(process.env.PROD ? file://${__dirname}/index.html : process.env.APP_URL);

[rstoenescu]

Cannot reproduce. But regardless, your changes don't actually make sense. They are essentially the same thing. Can you offer a reproduction repo pls?

[BlueFrog130]

Came across this bug. It appears that the quasar-conf.js does not have access to node, so the URL needs to be set in electron.

[ghost]

@rstoenescu, please find the reproduction repo here:
https://github.com/newCodeRunner/quasar-issue-6893

I took some more deep diving, the issue does not pop up until i import the dependency 'request', which then seems to break the quasar webpack config generating the above error.

Not sure if this should be happening but it is.

[ghost]

Also by the way, using icon genie latest version on windows and electron builder default config settings in quasar.config.js, the build process is failing.

As on windows "linux-512x512" image is not added by default in src-electron/icons/ folder and this seems to be the default requirement for electron builder.

So if anyone has cleared the src-electron/icons and rebuilt the icons, they would have to copy the 512x512 image and rename it to "linux-512x512" for the build process to actually work on default config.

[johne2310]

I have come across the same Uncaught ReferenceError: __dirname is not defined error when building Electron with nodeIntegration: false

[webnoob]

@newCodeRunner Is this still an issue on QApp 2.0?

[Menighin]

I was just trying to upgrade from QApp 1.x to QApp 2.1 and got stuck with a similar error, don't know if it is related.
I'm building an electron app and after following the upgrade guide, I get the following error when running quasar dev -m electron

// quasar.conf.js
electron: {
    nodeIntegration: true,
    // ...
}

// electron-main.js
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        useContentSize: true,
        webPreferences: {
            // Change from /quasar.conf.js > electron > nodeIntegration;
            // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
            nodeIntegration: QUASAR_NODE_INTEGRATION

            // More info: /quasar-cli/developing-electron-apps/electron-preload-script
            // preload: path.resolve(__dirname, 'electron-preload.js')
        }
    });
    // ...
}

If I just set a value (true or false) instead of using QUASAR_NODE_INTEGRATION it works fine.
Was this variable removed on the upgrade or something?

[Menighin]

I created an electron project from scratch and saw that now this QUASAR_NODE_INTEGRATION is set to process.env.QUASAR_NODE_INTEGRATION.

[ghost]

I was just trying to upgrade from QApp 1.x to QApp 2.1 and got stuck with a similar error, don't know if it is related.
I'm building an electron app and after following the upgrade guide, I get the following error when running quasar dev -m electron

// quasar.conf.js
electron: {
    nodeIntegration: true,
    // ...
}

// electron-main.js
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        useContentSize: true,
        webPreferences: {
            // Change from /quasar.conf.js > electron > nodeIntegration;
            // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
            nodeIntegration: QUASAR_NODE_INTEGRATION

            // More info: /quasar-cli/developing-electron-apps/electron-preload-script
            // preload: path.resolve(__dirname, 'electron-preload.js')
        }
    });
    // ...
}

If I just set a value (true or false) instead of using QUASAR_NODE_INTEGRATION it works fine.
Was this variable removed on the upgrade or something?

@webnoob, I can too confirm this error. Once this is resolved, we would know more about the initial error.

[webnoob]

@newCodeRunner Check @pdanpdan commits above.

Use: process.env.QUASAR_NODE_INTEGRATION instead of QUASAR_NODE_INTEGRATION

[ghost]

@webnoob, you are right thanks. @pdanpdan's commits would solve this issue completely.

[webnoob]

@newCodeRunner Just to clarify, his PR correctly documents how it should be done. It still needs changing in your source code.

[ghost]

@webnoob and @pdanpdan, there is one new error appearing though. With nodeIntegration: false, the following script tag should not be added to index.html by default webpack config.

Only happens in production env. Should I open a new issue for that?

<script>window.__statics = __dirname</script>

The renderer now throws the following error:

Uncaught ReferenceError: __dirname is not defined  at index.html:1

[pdanpdan]

@newCodeRunner yes, please open another issue

[webnoob]

Docs PR merged and now live.