Require is Not Defined ElectronJS

Question

So basically, I have 2 javascript files, the main one and the renderer for my application, the renderer file doesnt recognize Require, so I can`t get any modules, and electron won't work, can someone please help me fix this?

here is the code:

//Buttons

const videoElement = document.querySelector('video')
const startBtn = document.getElementById('startBtn')
const stopBtn = document.getElementById('stopBtn')
const videoSelectBtn = document.getElementById('videoSelectBtn')

const {desktopCapturer, remote} = require('electron');
const { Menu} = remote;

async function getVideoSources() {

const inputSources  = await desktopCapturer.getSources({
    types: ['window','screen']
});

const videoOptionsMenu = Menu.buildFromTemplate(
    inputSources.map(source => {
        return {
            label: source.name,
            click: () => selectSource(source)
        }
    })

    
)
videoOptionsMenu.popup()


}

videoSelectBtn.onclick = getVideoSources();