What could be causing the Babel installation to fail within Electron? Is Babel necessary for my project or can it be avoided?

Having trouble using the npm package https://www.npmjs.com/package/swipe-detect and encountering the following error message:

export default function(target, callback, threshold=150) {
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:776:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:851:10)
    at Module.load (internal/modules/cjs/loader.js:701:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:633:12)
    at Function.Module._load (internal/modules/cjs/loader.js:625:3)
    at Module.require (internal/modules/cjs/loader.js:739:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.<anonymous> (C:\Users\folder\main.js:22:22)
    at Module._compile (internal/modules/cjs/loader.js:839:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:851:10)

It seems to be an issue with ES6 syntax, so I've tried to install babel following this tutorial: . But encountered an error message:

npm WARN deprecated @babel/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0676696a7f606f6a6a463128322832">[email protected]</a>: 🚨 As of Babel 7.4.0, this
npm WARN deprecated package has been deprecated in favor of directly
npm WARN deprecated including core-js/stable (to polyfill ECMAScript
npm WARN deprecated features) and regenerator-runtime/runtime
npm WARN deprecated (needed to use transpiled generator functions):
npm WARN deprecated
npm WARN deprecated   > import "core-js/stable";
npm WARN deprecated   > import "regenerator-runtime/runtime";

Despite trying different tutorials and setting up the environment in .babelrc, I still get the error message.

After some research, I found out that babel is already integrated in Electron. Check out this discussion: Why is Babel needed in an Electron project.

I've been struggling for two days now, unable to find a solution. Can anyone help me understand why this error keeps appearing?

javascriptnpmelectronbabeljs

Answer №1

If you're struggling with getting your Electron/Node version to work, you can consider using the --experimental-modules argument. Be aware, however, that there might be some hiccups when you try to package your app. (Check out this link for more information on the potential issues.)

For more details on using ES modules in Electron, take a look at this GitHub thread. You'll find several suggested workarounds in that discussion.

Instead of dealing with potential complications, you could also consider cloning the library you need. It's only 100 lines long, has a generous MIT license, and you could easily modify it to suit your needs.

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

Ensure the CSS class stays on Quill clipboard.dangerouslyPasteHTML

One of the challenges I face with using the Quill Text Editor is that when I use the method clipboard.dangerouslyPasteHTML to paste HTML into the editor, it does not maintain custom CSS classes. For example: let content= '<p class="perso-clas ...

javascripttypescriptquill

Extract branch, path, and URL from the .gitmodules file by utilizing JavaScript Regex

Is there a way to extract branch, path, and URL details from the .gitmodules file using JavaScript Regex? .gitmodules [submodule "PATH"] path = <PATH> url = <URL> [submodule "PATH"] path = <PATH> url = <URL> ...

javascriptregexgithub

Using Regex to replace special characters in TypeScript

I need assistance in removing the characters "?" and "/" from my inner HTML string. Can you guide me on how to achieve this using regex? For example, I would like to replace "?" with a space in the following content. "Hello?How are you?<a href="http:/ ...

javascriptregextypescript

Determine the existence of a document/record in MongoDB

I am having trouble using .find({}) with MongoDB as it is not returning the expected response. I'm not sure how to determine if the document exists or not. What I want to achieve is: If a document exists, then do something - like sending a response b ...

javascriptmongodb

Graph your data with a stunning Fusioncharts area range graph combined with a sleek

My goal is to create a visual representation of an area range graph with a corresponding mid line. You can view the image below for reference: https://i.sstatic.net/8KDbF.png While I have successfully incorporated the low and high values, I am encounterin ...

javascriptangularfusioncharts

Issue encountered with search.run().getRange function when accessing a stored search in suitescript 2.0

I am facing an issue with my saved search in the beforeLoad userevent script. After adding a filter and running the search, Netsuite throws an UNEXPECTED_ERROR. Any ideas on what might be causing this error? var poRec = context.newRecord; var countIt ...

javascriptnetsuitesuitescriptsuitescript2.0

What is the best way to implement a composite primary key in DocumentClient.batchWrite()?

I am attempting to conduct a batch delete process based on the instructions provided in this documentation. The example given is as follows: var params = { RequestItems: { /* required */ '<TableName>': [ { DeleteRequest: ...

javascriptnode.jsamazon-web-servicesaws-lambdaamazon-dynamodb

Permission denied error when deploying Node.js application on Elastic Beanstalk

Having some trouble deploying my react application on Elastic Beanstalk. Every time I attempt to deploy, the build fails and reverts back to the sample app. The logs point towards a permission issue: gyp ERR! configure error gyp ERR! stack Error: EACCES ...

amazon-web-servicesnpmdeploymentamazon-elastic-beanstalk

Is it possible to generate an array of strings from the keys of a type or interface?

Imagine a scenario where we have a type or interface defined as NumberLookupCriteria: type NumberLookupCriteria = { dialCode: string; phoneNumber: string; } or interface NumberLookupCriteria { dialCode: string; phoneNumber: string; } Is there a w ...

javascripttypescript

How to efficiently pass props between components in NextJs

This is the project's file structure: components ├─homepage │ ├─index.jsx ├─location │ ├─index.jsx pages │ ├─location │ │ ├─[id].jsx │ ├─presentation │ │ ├─[id].jsx │ ├─_app.jsx │ ├─index.jsx ...

javascriptreactjsreduxnext.js

Discontinuing the fieldset tab interface feature from a Dexterity content type

I am looking to modify a condition to prevent the loading of certain javascript code when inserting an object of my content type. The current condition works only when editing the object: <?xml version="1.0"?> <object name="portal_javascripts"> ...

javascriptplonedexteritygenericsetup

Access the document on the desktop and open it in a new popup window

As a novice in html coding, I'm wondering if it's possible to write window size and other properties directly into the page. Let me explain. I'm currently working on a calculator and I want to run the HTML file on my desktop. Everything wor ...

javascripthtmlpopupwindow

Troubleshooting: Why is my console.log not working in JavaScript

Recently, I've been diving into the world of JavaScript, but for some reason, I can't seem to make console.log function properly. At the top of my HTML document in the head section, I added jQuery like this: <script type="text/javascript" sr ...

javascriptjqueryconsole

Video margins within a webview

After numerous attempts to embed a YouTube video in a WebView, I'm still struggling with a persistent small margin on the right side of the video. I've researched similar issues and attempted to address it through JavaScript adjustments without ...

javascriptandroidvideowebviewandroid-webview

JavaScript, Page Method, and GridView are essential components to creating dynamic and interactive

After learning how to use the page method in JavaScript and ASP.Net (VB.Net), I encountered an issue when trying to insert multiple items into a database using a gridview. Despite my efforts, there were no error messages appearing. Here is what I have so f ...

javascriptasp.netajaxvb.netgridview

Access prohibited to modify or remove node targets

I've encountered a recurring issue when trying to run the npm install command, resulting in the error message: '-bash: npm: command not found'. I then proceeded to uninstall and reinstall node and npm using homebrew, but continued to face er ...

npmosx-yosemite

What is a more efficient method for incorporating optional values into an object?

Currently, I am utilizing the optional addition feature in this way: ...(!!providerId && { providerId }), ...(!!practiceId && { practiceId }), Is there a more elegant shorthand method to replace this logic, such as: yield createRemark ...

javascriptreactjsangulartypescriptreact-native

Using jQuery and CSS to Filter and Sort Content

I need help with filtering a list of content based on their class names. The goal is to show specific items when a user clicks on one of two menus. Some items have multiple classes and users should be able to filter by both menus simultaneously. Currently ...

javascriptjqueryhtmlcss

Getting AJAX data in PHP: A comprehensive guide

As a student, I am working on creating a simple form for my website that will utilize ajax to save the submitted details to the database using PHP. I prefer not to use any external libraries like jQuery. Although I have successfully implemented the ajax "g ...

javascriptphpjqueryajax

Tips on showing a specific div when a button is clicked using jQuery and Bootstrap

In my button group, I have four buttons and I need one specific button to display certain div content when clicked. The displayed content should be based on which button is clicked. Is there a way to achieve this using Twitter Bootstrap jQuery in ASP.NET ...

javascriptjqueryhtmltwitter-bootstrap