#Electron / React creating a new window on button click

19 messages · Page 1 of 1 (latest)

desert wind
# 
// app.js
import React from 'react';
const electron = window.require('electron');
const remote = electron.remote
const {BrowserWindow} = remote


export default function App(){
   return(
      <button onClick={()=>{
        let win = new BrowserWindow()
        win.loadURL('https://www.electronjs.org/docs/api/remote')
        }}>
        Open BrowserWindow
        </button>
  )

}

// main.js
const { app, BrowserWindow } = require('electron');

require('@electron/remote/main').initialize()

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  });

  win.loadURL('http://localhost:3000');

  //const win2 = new BrowserWindow({ parent: win, modal: true, show:false })
  //win2.loadURL('https://github.com')
  //win2.once('ready-to-show', () => { win2.show() })
}

app.whenReady().then(createWindow);

error:

Uncaught TypeError: Cannot destructure property 'BrowserWindow' of 'remote' as it is undefined.
    at ./src/App.js (App.js:4:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/index.js (App.js:7:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1
#

if you want any other info about the project files fell free to ask

charred rampart
#

have you readed docs?

#

starting guide at least

desert wind
charred rampart
#

this blog 4years old

desert wind
#

...

#

do u have any latest blog for me to follow?

charred rampart
#

i am talking about official docs and guide

desert wind
charred rampart
#

time to start reading

acoustic laurel
#

you need to read the docs

desert wind
#

ok i will read it 👍

acoustic laurel
#

huh, this tutorial is bad, disabling security and all

desert wind
#

wdym? ( i am new to electron )

acoustic laurel
#

I think you also need to know that CRA is no longer maintained, I wouldn't recommend using it to create a React app in 2023

acoustic laurel
desert wind
#

hi guys i read the doc... but i want to ask is there any way to make a window in the app.js file?? or do i have to link it to preload or ipcrenderer

charred rampart
#

window.open