Electron dev app @electron/remote error

[TokkenSchneider]

What happened?

App threw an error during load Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'D:\DEVELOPPEMENT SOFT\tada\node_modules@electron\remote\main' is not supported resolving ES modules imported from D:\DEVELOPPEMENT SOFT\tada.quasar\dev-electron\electron-main.js Did you mean to import "@electron/remote/main/index.js"? at finalizeResolution (node:internal/modules/esm/resolve:267:11) at moduleResolve (node:internal/modules/esm/resolve:870:10) at defaultResolve (node:internal/modules/esm/resolve:994:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:685:12) at #cachedDefaultResolve (node:internal/modules/esm/loader:634:25) at ModuleLoader.resolve (node:internal/modules/esm/loader:617:38) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:273:38) at ModuleJob._link (node:internal/modules/esm/module_job:135:49)

the eletron-main.js

import { initialize, enable } from '@electron/remote/main' // <-- add this
import path from 'node:path'
import os from 'node:os'
import { fileURLToPath } from 'node:url'

initialize() // <-- add this

// needed in case process is undefined under Linux
const platform = process.platform || os.platform()

const currentDir = fileURLToPath(new URL('.', import.meta.url))

let mainWindow

async function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    icon: path.resolve(currentDir, 'icons/icon.png'), // tray icon
    width: 1000,
    height: 600,
    useContentSize: true,
    frame: false, // <-- add this
    webPreferences: {
      contextIsolation: true,
      // More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
      sandbox:false,
      preload: path.resolve(
        currentDir,
        path.join(process.env.QUASAR_ELECTRON_PRELOAD_FOLDER, 'electron-preload' + process.env.QUASAR_ELECTRON_PRELOAD_EXTENSION)
      )
    }
  })

  enable(mainWindow.webContents) // <-- add this

  if (process.env.DEV) {
    await mainWindow.loadURL(process.env.APP_URL)
  } else {
    await mainWindow.loadFile('index.html')
  }

  if (process.env.DEBUGGING) {
    // if on DEV or Production with debug enabled
    mainWindow.webContents.openDevTools()
  } else {
    // we're on production; no access to devtools pls
    mainWindow.webContents.on('devtools-opened', () => {
      mainWindow.webContents.closeDevTools()
    })
  }

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

What did you expect to happen?

On quasar dev -m electron --devtools, I preview the app

Reproduction URL

It's a local electron app

How to reproduce?

1. Fresh install quasar and electron mode
2. Run app electron app mode dev

Flavour

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

Areas

Electron Mode

Platforms/Browsers

Electron

Quasar info output

[ESLint] Found 131 errors and 0 warning
D:\DEVELOPPEMENT SOFT\tada git:[master]
quasar info

Operating System - Windows_NT(10.0.26100) - win32/x64
NodeJs - 22.2.0

Global packages
  NPM - 10.7.0
  yarn - 1.22.22
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - 2.5.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.18.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.2.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - 1.1.0 -- Official ESLint plugin for Quasar
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - 3.0.2 -- Intuitive, type safe and flexible Store for Vue
  vite - 6.2.5 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.24.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.25.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - 35.1.5 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  @electron/packager - 18.3.6 -- Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-qiconpicker - 2.0.7 -- QIconPicker - A Quasar App Extension
  @quasar/quasar-app-extension-qcalendar - 4.1.2 -- A Quasar App Extension for @quasar/quasar-ui-qcalendar

Relevant log output

Additional context

No response

[github-actions[bot]]

Hi @TokkenSchneider! 👋

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

[vigorox]

Got the same issue on a new project created last night.

[vigorox]

Found a temporary solution:

import { initialize, enable } from '@electron/remote/main/index.js';

[Reinering]

same issue

[yuwuweichun]

import { initialize, enable } from '@electron/remote/main/index.js'

is effective!

[rstoenescu]

Hi,

This is due to how @electron/remote is configured. With ESM, you should import the full path (@electron/remote/main/index.js).