"Encountering an unexpected token issue when using Babel with decorators

Attempting to utilize decorators on classes in React with babelify. Despite having the 'es7.decorators' option enabled in Babel, encountering an 'unexpected token' error when using the '@' symbol.

Looking for some insights or solutions. See a basic example below.

Decorator:

export default function(Component) {
  return class extends Component {
    constructor() {...}
  }
}

Class:

import myDecorator from 'decorator';

@myDecorator
class MyClass{...}

Using babelify (Browserify transform for Babel):

browserify().transform(babelify.configure({
  optional: ['es7.decorators']
})

Answer №1

Special thanks to @LeonidBeschastny for bringing up the importance of the .babelrc file. By utilizing this configuration file, decorators function seamlessly. Following the guidance provided in the babelify readme, unfortunately, did not yield successful results, possibly due to inconsistencies in my setup or other unidentified factors.

Answer №2

If anyone else has encountered this issue, I experienced the same problem myself.

It appears that there were significant changes detailed in this resource: http://babeljs.io/blog/2015/03/31/5.0.0/#babelrc

To resolve it, all I had to do was include { "stage": 1 } in my babelrc file. This instructs babel to compile using experimental features, including the es7 decorator.

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

What is the best way to display a Bootstrap toggle?

I am facing an issue with a Bootstrap toggle in a Handlebars template. When the page initially loads, the toggle is visible, however, after re-templating the Handlebars template that contains the toggle, it disappears. Before Re-Template: Initial code : ...

Exploring nested maps in JavaScript

I attempted to nest a map within another map and encountered an issue where the innermost map is being executed multiple times due to the outer map. The goal is to link each description to a corresponding URL (using # as placeholders for some links). Here ...

Angular implementation of a reactive form including a child component

Upon inspection, I noticed that my father form component is displaying the values of nickName and name, but not the value of age. It seems that {{myFormFather.status}} does not recognize the component child. It's almost as if my child component is inv ...

Unable to get AJAX call to work with jQuery toggle

Struggling to make my jQuery toggles more organized; I attempted to fetch its content using an AJAX call, but unfortunately, the toggles stop working -- any tips on what I might be doing incorrectly here? <script> $(document).ready(function( ...

creating a boundary around a three-dimensional shape using Three.js

I have a number of objects in my scene affecting the outcome of the .mesh in Three.js, but I am unsure how to separate them properly. To clearly delineate the shapes, I aim to create a boundary. Check out the link for reference: extrude_geometry[i] = n ...

In the test environment, only a portion of the JavaScript code is executed, but it functions properly in both the production and development environments of

Rails 3 Currently facing an issue with a list inside a form: <%= form_for @article do |f| %> <ul> <% @product.each do |p| %> <li id="product_<%=p.id%>"> <div> <%= f.radio_button(:p_id, p ...

Utilizing recursive AJAX requests and halting execution at a specified condition

After hours of searching and attempting, I am struggling as a beginner with ajax concepts. Here is my issue: 1. I have a page that retrieves the current date's data from the database, so I am using an ajax function recursively with a setTimeout of 10 ...

Deactivate button based on two criteria

I am currently facing an issue with jQuery where I need to disable a button based on two conditions. The first condition requires the user to select an option, and the second condition requires the user to upload a file. While I have managed to write the c ...

Implementing a Reset Button to Clear Checkboxes with PHP or JavaScript

I'm looking for help with setting up a button to reset the checkboxes on my preferences page. UPDATEL: Here's more information: The solutions provided should only affect checkboxes that are currently selected, not those enabled onLoad. This is ...

The Protractor Custom Locator is experiencing difficulty in finding the element

For our project, the automation team is incorporating a custom attribute called 'lid' to elements where unique identification is challenging. A new custom locator method has been developed to find elements using the 'lid' attribute: ...

Dealing with WebGL crashes in three.js

Struggling to determine how to handle webgl loss in my application (created with electron js) using three js. We are utilizing these two functions: // renderer is THREE.WebGLRenderer renderer.context.canvas.addEventListener("webglcontextlost", contextLost ...

Turn off the ability to debug XHR requests in the developer tools of all web browsers for my website

Is there a method to prevent website users from viewing the communication between my web application and the server via ajax requests? Is there a way to achieve this on my website using code? I want to make sure that the XHR, Ajax calls, and responses ca ...

Ways to include scrolling specifically for one template

As a newcomer to frontend development, I have recently started learning Vue and the Quasar Framework. I am currently working on a table and trying to set a fixed table name with only the table items scrollable. <template> <q-table virt ...

"By implementing an event listener, we ensure that the same action cannot be

function addEventListenerToElement(element, event, handlerFunction) { if(element.addEventListener) { element.addEventListener(event, function(){ handlerFunction(this.getAttribute("src")); }, false); } } //initialize the function addEve ...

The function _plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default is not usable as a constructor

I have created a Vue application using vue cli 3 and incorporated Vuetify. To optimize the size of my bundle, I decided to modify the way Vuetify is imported: The versions I am working with are vuetify 1.5.5 and vue 3.7.0 import Vue from 'vue'; ...

Using ThreeJS in conjunction with NextJS requires that class constructors be called with the 'new' keyword

Seeking assistance with rendering a basic scene within a nextJS route named "lab2". Encountering the following error: Error: class constructors must be invoked with 'new' Call Stack: renderWithHooks mountIndeterminateComponent ...

Dynamic mouse path

Currently, I am in the process of creating a mouse trail similar to what is found on this particular website. I have been using JavaScript, jQuery, and various libraries in my attempt to achieve this effect; however, it has proven to be more challenging th ...

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

Updating code to insert elements into an array/data structure using Javascript

Hey everyone, I'm new to Javascript and I'm trying to make a change to some existing code. Instead of just returning the count of elements, I want to add each of the specified elements to an array or list. Here is the original code from a Seleni ...

Eliminating replicated vertices in a Three.js geometry model

I'm struggling with removing duplicate vertices from a SphereGeomerty. I need to eliminate the seam on one side of the geometry as it doesn't align properly when updating the vertex positions. The issue arises when attempting to create a new geo ...