App electron não aceita require()

Front-end JavaScript
#1

Ola estou construindo minha primeira app no electron e toda vez que eu uso o require(exemplo: require(‘electron’)) ele da erro, não sei como resolver.

a linha abaixo é o erro.
Uncaught ReferenceError: require is not definedat index.html:7:28

pesquisei e achei um tutoria falando para colocar as seguintes linhas que o problema ia ser resolvido

webPreferences: {
  nodeIntegration : true,
  contextIsolation : false,
  enableRemoteModule: true
}

mas quando eu faço isso muda de problema ai passa a ser:

Uncaught TypeError: Cannot read properties of undefined (reading 'on')
at Object.<anonymous> (J:\electron\app.js:4:5)
at Object.<anonymous> (J:\electron\app.js:22:3)
at Module._compile (node:internal/modules/cjs/loader:1116:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1169:10)
at Module.load (node:internal/modules/cjs/loader:988:32)
at Module._load (node:internal/modules/cjs/loader:829:12)
at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
at Function.i._load (node:electron/js2c/renderer_init:33:356)
at Module.require (node:internal/modules/cjs/loader:1012:19)
at require (node:internal/modules/cjs/helpers:102:18)
#2

mas nao pode colocar require no html. Pode dizer o seu objetivo em colocar ele aí? Ou mostrar o código que tá no app

#3

Olá obrigado por responder

eu quero chamar uma segunda janela no electron

esse é meu arquivo main.js

const electron = require('electron')
const {app, BrowserWindow} = electron

win = null;

const createWindow = () => {
	win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			nodeIntegration : true
		}
	})

	win.maximize()
  
	win.loadFile('index.html')//so mostra a pagina se estiver carregada
	win.once("ready-to-show",()=>{
		win.show()
	})
	win.webContents.openDevTools();
}
app.whenReady().then(() => {
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

exports.viewpdf =(file)=>{

	var pdfurl =__dirname + file;
	
	var vpdf = pdfview.showpdf(pdfurl, {
		width: 800,
		height: 600,
		webPreferences: {
			nodeIntegration: false,
			contextIsolation: true
		}
	});
	vpdf.show();
}

arquivo index.html

<!DOCTYPE html>
<html lang="pt">
	<head>
    	<meta charset="UTF-8">
    	<title>Estudo Electron</title>
		<script>

			const { remote } = require('electron')
			const main = remote.require('./main.js')

		</script>
  	</head>
  	<body>

		<button class="botoesJanelas" onclick="main.viewpdf('./meupdf.pdf')" />open pdf</button>

  	</body>
</html>
#4

Você consegue rodar uma aplicação simples (só a janela, sem eventos), pra ver se não é a própria configuração que está errada?

Para comunicar eventos entre a view (html) e o electron, também é preciso fazer o require do ipcMain:

const electron = require('electron')
const { app, BrowserWindow, ipcMain } = require('electron')

Confira também como está o start no package.json. Deve ser algo assim:

"scripts": {
    "start": "electron ."
  },

Usando ponto, vai pegar o main.js por padrão.

Por fim, pode testar uma versão anterior do electron, em vez da última.

Abraço.