Unable to load preload script. Error: module not found: fs/promises

[hermit99]

What happened?

Quasar 2.7.7 in Electron mode is currently broken when using fs promises APIs. Same issue as #11759, which seemed closed without a solution?

Unable to load preload script: C:\quasar-project.quasar\electron\electron-preload.js
(anonymous) @ VM4 sandbox_bundle:93
VM4 sandbox_bundle:93

Error: module not found: fs/promises
at preloadRequire (VM4 sandbox_bundle:93:1386)
at :4:23
at runPreloadScript (VM4 sandbox_bundle:93:2213)
at Object. (VM4 sandbox_bundle:93:2480)
at ./lib/sandboxed_renderer/init.ts (VM4 sandbox_bundle:93:2636)
at webpack_require (VM4 sandbox_bundle:1:170)
at VM4 sandbox_bundle:1:1242
at _electron_webpack_init (VM4 sandbox_bundle:1:1320)
at VM4 sandbox_bundle:160:455

OS: Windows 11
Node.js: 18.7.0 | 16.15.1 | 14.17.4 (webpack flavor only as vite needs higher) Same error on all 3 versions
Quasar 2.7.7
Electron: installed by quasar

What did you expect to happen?

In Electron console, no errors should be thrown

Reproduction URL

github

How to reproduce?

1. npm i -g @quasar/cli

2. npm init quasar
   choose either Vite or Webpack
   Features pick ESLint, Pinia, Vue-i18n
   all others default

3. quasar mode add electron

4. Replace content in src-electron/electron-preload.js with:

    import { contextBridge } from 'electron'
    import { readFile } from 'fs/promises'
   
    contextBridge.exposeInMainWorld('electronAPI', {
       readFile
    })
   

5. quasar dev -m electron

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Electron

Quasar info output

No response

Relevant log output

No response

Additional context

There would be no error on console if import { readFile } from 'fs/promises' is commented out as well as the readFile exposed API

[github-actions]

Hi @hermit99! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[mStylias]

Hey @hermit99!
I had a similar issue while trying to load the remote module through
import { BrowserWindow } from '@electron/remote'
In my case it was fixed by specifying sandbox: false inside webPreferences like so:

mainWindow = new BrowserWindow({  
    icon: path.resolve(__dirname, 'icons/icon.png'),
    width: 1200,
    height: 900,
    frame: false,
    useContentSize: true,
    webPreferences: {
      contextIsolation: true,
      sandbox: false, // add this
      // More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),
    },
  });

[hermit99]

Thanks @mStylias! You are right, this issue was introduced by latest Electron v20.0.0:
Renderers are now sandboxed by default unless nodeIntegration: true or sandbox: false is specified. (electron/electron#35125)