The occurrence of an unanticipated character '#' was found

I'm currently facing an issue while using webpack to load dependencies. Whenever I execute the npm run dev command, I encounter the following error:

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\www\playing-with-texture-projection-in-three-js\src\lib\WebGLApp.js: Unexpected character '#' ;

                       export default class WebGLApp {
                           #updateListeners = []
                           #tmpTarget = new THREE.Vector3()
                           #rafID
                           #lastTime

                           constructor({
                              background = '#000',
                              backgroundAlpha = 1,
                              fov = 45,
                              near = 0.01,
                              far = 100,
                              ...options
                              } = {}) {
                              this.rend
                           .......
                           .......

I am working with plain JavaScript along with some libraries. Can anyone help me identify what I might be missing?

javascriptnpmwebpackecmascript-next

Answer №1

As mentioned by @PatrickHund in the comments, this is a cutting-edge addition to EcmaScript.

To implement this feature, you will need to utilize the 

babel-plugin-transform-class-properties
plugin for transformation.

For more information, check out the source here:

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

How does the 'order' stack up against the 'products' array? Display the names of the products that are included in the order

I have an array of items for sale: const products = { { id: product1, name: 'Product A', price: 100 }, { id: product2, name: 'Product B', price: 200 }, { id: ...

javascript

Request to convert jQuery Ajax code into Vanilla JavaScript code

Are there any vanilla JavaScript alternatives available for the code snippet below? function verifyEmail() { var apiUrl = "https://apilayer.net/api/check?access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + document.getElementById('email&apos ...

javascriptjqueryajaxapiemail-validation

An issue occurred while attempting to read words from JSON file

My current issue involves loading words from JSON into my webpage. The images are functioning properly, thankfully. I have already successfully loaded the necessary images through JSON onto my webpage. However, I am still in need of loading words through ...

javascriptjqueryhtmlcssjson

Maximizing code efficiency with jQuery toggleClass

After creating a code to validate input fields for empty values, I've come to realize that using jQuery toggleClass could potentially enhance or optimize it. However, I'm stuck on how to go about implementing this improvement. Any assistance woul ...

javascriptjquery

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

javascripthtmlmodel-view-controllerhandlebars.js

Exploring the Node environment setup within Nest.js

Currently, I am in the midst of setting up a Nest.js project and seeking an efficient solution for defining the Node environment used by the ConfigService to load environment variables: import { Module } from '@nestjs/common'; import { ConfigSer ...

javascriptnode.jstypescriptenvironment-variablesnestjs

Tips on sending the total value of a form to a PHP script

Looking for help with a PHP script to calculate the sum of checked checkboxes with corresponding numeric values. For example, if checkbox 1 = 80; checkbox 2 = 21; and checkbox 3 = 15, and the user checks checkboxes 2 and 3, the PHP should output 36. I hav ...

javascriptphphtmlcheckbox

PHP and JavaScript: Understanding Variables

I currently have a View containing an Associative Array filled with information on accidents. Users will have the ability to click on a Country. Once clicked, I want to display accident-related data for that specific country. This data is pulled from PHP ...

javascriptphpjquery

When a page loads, automatically refreshing a row in MySQL

I've been searching around, but haven't found a solution to my basic issue. I need help with creating a system where a user can only view a page once per day. Currently, clicking a button updates the MySQL Row, but users can bypass this restricti ...

javascriptphpmysqlajax

Disappearing Facebook share button: A common occurrence when navigating in Nuxt.js (Vue.js)

Within my nuxt.js web app, utilizing version 2.15.7, I have integrated a Facebook share button by following the instructions outlined in this comprehensive code example. Upon initial load of the application, the Facebook share button appears as expected. ...

javascriptfacebookvue.jsnuxt.jsfacebook-javascript-sdk

Guidelines for incorporating JS in Framework7

I am developing an application using the framework7. I am facing a challenge where I need to execute some javascript in my page-content, but it is not running as expected. <div class="pages"> <div class="page close-panel" data-page="item"> ...

javascripthtmlhtml-framework-7

"Delightful Data Display: Achieving Ajax Triumph with

When I include the success function in my DataTable, the rows do not automatically fill up in the table. However, when I remove the success function everything works correctly, and the datatable fills with data as expected. I am trying to retrieve a messag ...

javascriptjqueryajax

Issue occurs when trying to access the 'set' property of an undefined variable, leading to an error message stating "Cannot read property 'set' of undefined" while using 'this

I'm facing an issue while setting up basic cookies for my Vue project. When I try to set a cookie, I encounter the following error. My package.json file indicates that I am using vue-cookies version ^1.7.4. The error message occurs when I click the bu ...

javascriptvue.jsnpmvuejs3vue-cookies

I am looking to include both the type and maxLength attributes in a MUI TextField

<TextField value={ele.mobile} helperText={ferrors[id]?.mobile} name="mobile" classes={{ root: classes.textField }} InputProps={{ clas ...

javascripthtmlreactjsmaterial-ui

Tips for quickly rendering over 10,000 items with React and Flux

What is the most efficient way to render a large number of items in React? Imagine creating a checkbox list with over 10,000 dynamically generated checkbox items. I have a store that holds all the items and serves as the state for the checkbox list. Whe ...

javascriptcheckboxreactjsfluxrefluxjs

Attempting to assign a File object as a property to a component but receiving an empty object in return. I'm curious about the security implications of this as well

I created a modal for previewing avatars with a generic design: <avatar-update :img-file="avatarFile" :show="avatarModalShow" :img-url="url" @close="avatarModalShow = !avatarModalShow" :change-avatar="updateCrop" @destroyUrl="imgUrl = null"> </av ...

javascriptlaravelsecurityvue.js

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

javascriptjqueryhtmlcss

Choose a specific parameter from a line using the body parser in Node.js

Upon receiving a post message, I am having trouble selecting a value from CSV data. Here is a sample of what I receive: { reader_name: '"xx-xx-xx-xx-xx-xx"', mac_address: '"name"', line_ending: '\n', field_delim: & ...

javascriptnode.jsexpress

Leveraging Javascript/Jquery for numbering items in a list

This is a snippet of HTML code that I am working with: <ul> <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li> <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li> <li data ...

javascriptjqueryhtml

"Webpack is creating a one-to-one mapping between the build directory and the source directory

Is there a method to automatically compile all files from the source directory to a build directory while preserving the same directory structure? Can I achieve the above without the need to manually add multiple entry points to the webpack.config.js file ...

reactjssassecmascript-6webpackbabeljs