Preload not available in renderer

[JapSeyz]

What happened?

Hi!

I've been unsuccessfully trying for a while to get access to the Node apis.

My preload.js

import fs from 'fs'
import os from 'os'
import path from 'path'
import { exec } from 'child_process'
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('preload', {
  exists: dirPath => fs.existsSync(dirPath),
  mkdir: dirPath => fs.mkdirSync(dirPath, { recursive: true }),
  write: (path, contents) => fs.writeFileSync(path, contents),
  path: (dir, name) => path.join(dir, name),
  read: dir => fs.readFileSync(dir, 'utf8'),
  platform: () => os.platform(),
  exec
})

I'm getting an error that fs wasn't found within preload.js

In much the same way, window.preload is also undefined.

This is a fresh install I did a few days ago, without much changed yet.

What did you expect to happen?

The preloader methods to be usable on the renderer

Reproduction URL

https://google.com

How to reproduce?

I have a private GH repo I can share, if needed.

The bug is Electron specific, so I can't really create a codepen/sandbox etc.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Electron Mode

Platforms/Browsers

No response

Quasar info output

Operating System - Darwin(21.5.0) - darwin/arm64
NodeJs - 16.15.1

Global packages
  NPM - 8.11.0
  yarn - 1.22.19
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.7.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.9 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.1 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.4
  pinia - Not installed
  vuex - Not installed
  electron - 20.0.3 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.13 -- Babel compiler core.
  webpack - 5.74.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - Jespers-MacBook-Pro.local
  en0 - 192.168.1.123

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @JapSeyz! 👋

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. 👏

[rstoenescu]

Hi,

This has to do with Electron exclusively.

Excerpt from a change today in docs which deals with Electron >= 20:

* WARNING!
 * If accessing Node functionality (like importing @electron/remote) then in your
 * electron-main.js you will need to set the following when you instantiate BrowserWindow:
 *
 * mainWindow = new BrowserWindow({
 *   // ...
 *   webPreferences: {
 *     // ...
 *     sandbox: false // <-- to be able to import @electron/remote etc in preload script
 *   }
 * }