Encountered an error: Unable to access electron property within render.js file

I've been exploring the realm of electron app development and stumbled upon a Youtube tutorial titled Build a Desktop App with Electron... But Should You? which teaches how to create a simple screen recording application. However, I ran into an issue.

Uncaught TypeError: Cannot destructure property 'Menu' of 'remote' as it is undefined. at render.js:9

Below is the snippet of code provided in the tutorial:

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

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(souce)
   }
    })
);
videoOptionsMenu.popup();
}

Can anyone identify what mistake I may be making here?

Answer №1

To enable remote modules in the latest version of electron, you must specify the enableRemoteModule: true flag in your main electron code.

mainWindow = new BrowserWindow({
    width: 1280,
    height: 960,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
     },
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The time parameter in jQuery's ScrollLeft animation method seems to be disregarded

Hey everyone, I'm having trouble understanding this: thumb.animate( {'scrollLeft': active.width()*3}, 'slow' ); The scrolling works fine, but the "slow" parameter seems to be ignored. Instead of moving slowly, it moves instan ...

Is it possible to incorporate an element using absolute positioning using jQuery or Javascript?

When trying to add a new element on the screen, I am facing an issue with the absolute positioning not working properly. Sample Code in Javascript function drawElement(e,name){ $("#canvas").append("<div id='" + name + "' class='e ...

Attaching identical class and event handlers to numerous dynamically created elements

I am facing a challenge with the following HTML structure: <a href="#" @click.prevent="toggleClass">Show/Hide</a><br> <li :class="{myClass: showItems}">Item 1</li> <a href="#" @click.prevent="toggleClass">Show/Hide< ...

Spooky results displayed on website from NightmareJS

Is there a way to display the output from nightmareJS onto a webpage when a button is clicked using HTML, CSS, and JS? This is my nightmareJS code: var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: false}) nightmare .go ...

Stopping the audio player in HTML5 and JavaScript when the next track starts playing

My webpage contains several audio players, and I've implemented this script to handle them. While the players are functioning correctly, the issue arises when a second player is clicked while the first one is still playing. I've searched for a so ...

"Is there a way to initiate a Date Picker with the current date using Javascript in an AngularJS application

I am having an issue with my date picker where the month starts from the current month and goes up to the next 12 months. However, I only want to display dates from the current date to the last date of the current month. I believe I need to set a limit so ...

Exporting an HTML table to Excel while excluding any hidden <td> elements

I have a web application with an HTML table that displays data to users. I wanted to export the table to Excel and found a jQuery code for it. However, the exported data includes information that is hidden in the table. Is there a way to export the tabl ...

Creating unique div IDs dynamically in PHP, JavaScript, and MySQL

I'm currently working with an ajax code that fetches data from table columns when a specific data is selected from the dropdown menu. In my surveycontent.php file, I have the following script: <script type="text/javascript"> function show ...

How can timestamps be set in MongoDB during an insertOne() operation without relying on new Date() as in PostgreSQL's NOW()?

timestamp: { $currentDate: { $type: "timestamp" } } }); The insert() method is not functioning properly Is there anyone who can assist me with this issue? ...

Importing JSON data into JavaScript

For the past few hours, I've been attempting to load a JSON file into JavaScript to feed map coordinates to the Google Maps service. Unfortunately, my script is incomplete and I cannot obtain any results. Here's what I have so far: <script&g ...

Is it possible for jQuery UI Autocomplete to utilize values from various input fields simultaneously?

I've hit a roadblock with this code and it's been giving me trouble for some time now. Here is the current state of my auto-complete script: jQ19(function(){ // minLength:1 - how many characters user enters in order to start search jQ19 ...

The Java Selenium "jsExecutor" is unable to click on the HTML element

A JavaScript HTML element is defined as: document.querySelector('[value="fixedsumcredit_kp"]') <input id=​"-0198e3aa-d2b1-46ce-bdf0-192e60662cd3-fixedsumcredit_kp" type=​"radio" name=​"-0198e3aa-d2b1-46 ...

Differences between applying addClass(undefined) and addClass(null)

At times, it crosses my mind to include a class in a chain, depending on certain conditions. What would be the most fitting semantic value to add no class? For instance: $(".element").performAction().addClass(condition ? "special-class" : undefined).perf ...

Using Google App Engine with Stripe - Enable users to easily upload images for account identity verification directly through their browser using Javascript

After extensive research, I have been exploring how to enable direct browser uploads, particularly in the context of utilizing Stripe with Google App Engine, as discussed on this forum. The Stripe documentation also mentions the possibility of browser uplo ...

Leverage the power of JavaScript functions within the app.component.ts file of

I have a JavaScript file named action.js and I am trying to incorporate it into an Angular project. After doing some research, I found out that the js file should be placed in the assets folder and the path must be referenced in the scripts array within an ...

Discover the method for obtaining a selected element in a bootstrap dropdown that is dynamically populated

Similar to the question asked on Stack Overflow about how to display the selected item in a Bootstrap button dropdown title, the difference here is that the dropdown list is populated through an ajax response. The issue arises when trying to handle click ...

Receiving text from a server that restricts cross-domain ajax requests

Is there a way to retrieve a txt file from another server and display it in a div using jquery ajax? $("#div1").load("www.serverA1d.com/demo_test.txt"); When attempting to do this, the following error is displayed: Origin is not allowed by Access-Con ...

How to eliminate quotation marks from an array in JavaScript?

const original_data = ["alpha,beta,gamma","1,2,3","apple,banana,cake"]; updated_data = ["alpha,beta,gamma,1,2,3,apple,banana,cake"] The function is returning the original_data, but I require the updated_data. ...

Typescript's forEach method allows for iterating through each element in

I am currently handling graphql data that is structured like this: "userRelations": [ { "relatedUser": { "id": 4, "firstName": "Jack", "lastName": "Miller" }, "type": "FRIEND" }, { "relatedUser": ...

Getting HTML from Next.js middleware - a step-by-step guide

Is there a way to send the HTTP Status Code 410 (gone) together with a customized HTML message? I want to display the following content: <h1>Error 410</h1> <h2>Permanently deleted or Gone</h2> <p>This page is not foun ...