Having trouble with implementing static properties in a JavaScript Class within Vue

In my Vue2 App, I encountered an issue when trying to import a class with a static property from a separate file.

export class TestUnit {
    static testVar = "test";
}

Upon attempting to import the class using:

import { TestUnit } from "../../poco/classes/TestUnit";

I received a "Failed to compile" error with the message:

Module parse failed: Unexpected token (2:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export class TestUnit {
>     static testVar = "test";

After searching for a solution, I couldn't find one. Any ideas on what might be causing this issue?

Update: Interestingly, static methods in the TestUnit class are functioning properly:

static test() { return "test" };
This adds to my confusion.

Answer №1

Make sure to verify your node version,

  • Static class fields are compatible with versions 12.4.0 and higher.
  • Static methods have been supported since version 5.12

You can reference Node's supported features at:

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

Activating/Deactivating Textbox on Internet Explorer 9 using Javascript

It can't be due to browser discrepancies because I also tested it in Chrome. Is there possibly an error in my code? The checkbox is supposed to disable the textbox when clicked, but that's not happening. Here is the code I am using: I placed the ...

Steps to refresh your nodejs project after making changes

As a newcomer to nodejs, I find myself constantly restarting the server every time I make changes to my HTML files or when using twig, jade, or ejs template engines. Does anyone have any suggestions on how to see these changes in the browser without having ...

Using jQuery's .load function to load an HTML file from a href attribute into a div element may not function as

I'm struggling to populate the href section of my dropdown menu with my files. I'm attempting to dynamically load the files in the .where-you-tune class. Something must be off because I keep encountering (index):81 Uncaught TypeError: $(...). ...

Is it possible to transform a virtual DOM into a tangible DOM element without triggering a render?

Currently, I am utilizing html2canvas to capture a screenshot of my webpage. The challenge I am encountering is that html2canvas requires an element as a parameter. In my case, I am working with a React app where I use a template to access the virtual DOMs ...

Editable content area: Maintain and restore cursor position when placed on a blank line

While working with a contenteditable div and constantly updating the HTML as the user types, I am facing the challenge of saving and restoring the caret position. I came across a helpful solution provided by Tim Down on a similar issue, which I found on S ...

Develop a JavaScript function to generate a multiple selection form

Hey there! I have a question... Can I use JavaScript to create a multiple select form? Here's an example: <select name="item[]"> <option value="0">Option 1</option> <option value="1">Option 2</option> </select> &l ...

Which is more effective: disabling clicks on a specific area with a transparent image, or using JavaScript?

There is a specific area on my website that I want users to be able to see but not click on. This area contains a video, and I only want them to use the control player without being able to play/pause by clicking directly on the video like other websites a ...

When attempting to showcase an MUI icon that was imported, I encounter the following issues: Invalid hook call and the <ForwardRef(SvgIcon)> component

Encountering issues while trying to display an imported MUI icon leads to the following errors: Error: https://i.stack.imgur.com/USdEx.png Sample Code: import React from 'react' import ThreeDRotation from '@mui/icons-material/ThreeDRotati ...

Utilizing Angular to Bind Data Visualization Charts Locally

I am attempting to use the Kendo UI Angular directives to bind a DataViz pie chart locally, but I am encountering an error that says: TypeError: Cannot call method 'toLowerCase' of undefined at h (http://localhost:51717/Scripts/kendo/kendo.d ...

What is the best way to sort an array of objects while simultaneously evaluating against another object?

My search involves looking through a list of cars that have various attributes such as make, model, price, and more in order to compare them to the specific car I am searching for via a form. While I understand how to compare two cars directly, I am uncer ...

Tips for using jQuery to create a delete functionality with a select element

I'm relatively new to utilizing jquery. I decided to tackle this project for enjoyment: http://jsbin.com/pevateli/2/ My goal is to allow users to input items, add them to a list, and then have the option to select and delete them by clicking on the t ...

Warning: Angular JS encountered a [$injector:modulerr] error

I'm currently working on developing an application using the MEAN stack. Here is a snippet of my controller code: var myApp = angular.module('myApp',[]); myApp.controller('AppCtrl',['$scope', '$http', function( ...

Discord.js Error - TypeError: Unable to access property 'execute' as it is undefined

Currently, I am developing a Discord bot that involves reaction roles. However, I am encountering an error: TypeError: Cannot read property 'execute' of undefined. client.commands.get('reactionrole').execute(message, args, Discord, cli ...

What could be causing the unusual alignment of the 'pixels' on my resized HTML5 canvas?

Currently, I am in the process of creating a simple HTML5 canvas/JavaScript snake game inspired by the classic Nokia Snake. This is my first attempt at developing a game using HTML5 canvas and JavaScript, and I must admit, I am still a novice programmer! ...

Is it possible to create a progress bar in blue that is similar to the horizontal blue progress bar seen in Gmail when a user submits a form?

Currently, I am utilizing Bootstrap v3.3.5 on my website. In a particular situation, I have a form displayed within a Bootstrap modal dialog. The user fills in the data and submits the form. After submission, the form remains as it is until a response is ...

Looking for help positioning arrows in HTML/JS for a pop-up gallery

Currently, I am working on developing a Flask application that displays a list of videos fetched from a database in an HTML template. Upon clicking a video link, the video opens and plays in a pop-up window with arrow buttons for navigating to the next or ...

`Accessing information within a nested JSON array``

I'm currently parsing through the JSON data below. While I can extract the id and name fields without any issues, I am encountering a problem when trying to access json.templates[i].dailyemails.length, as it always returns 0. Below is the structure o ...

Utilizing Redux actions in React components

As I was delving into React and Redux concepts, I decided to create a simple component to gain a better understanding. Now, I am attempting to divide the Redux logic into a separate component, resulting in a total of two components. However, upon compili ...

Ensure to validate the values before sending the jQuery.ajax$ request

My script is functioning well during execution and correctly returns the server-side error. I am interested in learning how to utilize jQuery to validate if the values (userid, password) being passed are empty before proceeding with the .$ajax request. I ...

Revise the list on the page containing MEANJS components

Utilizing MEAN JS, I am attempting to make edits to the list items on the page, but an error keeps appearing. I have initialized the data using ng-init="find()" for the list and ng-init="findOne()" for individual data. Error: [$resource:badcfg] Error in r ...