Is it possible to disable the "super must be called before accessing this keyword" rule in babelify?

Question

Is it possible to disable the "super must be called before accessing this keyword" rule in babelify?

My current setup involves using babelify 7.2.0 with Gulp, but I've encountered an error when working with the following code snippet:

class One {}

class Two extends One {
  constructor() {
    this.name = 'John';
  }
}

The issue at hand is as follows:

SyntaxError: [the file path in question]: 'this' is not allowed before super()
  20 | class Two extends One {
  21 |   constructor() {
> 22 |     this.name = 'John';
     |     ^
  23 |   }
  24 | }
  25 |

Based on my understanding, it seems like this error should not be occurring because there are no super calls within the constructor that could cause a conflict. I have already raised an issue on Github regarding this matter, but I am curious if there is a workaround to temporarily disable it.

javascript gulp ecmascript-6 babeljs

Answer 1

Answer №1

It's important to note that calling super explicitly is required in subclasses before trying to access this:

class Three extends Two {
    constructor(...args) {
        super(...args);
        this.city = 'New York';
    }
}

This rule is outlined in the ECMAScript standard (refer to this response), and it closely adhered to by Babel.

Answer 2

It's important to note that calling super explicitly is required in subclasses before trying to access this:

class Three extends Two {
    constructor(...args) {
        super(...args);
        this.city = 'New York';
    }
}

This rule is outlined in the ECMAScript standard (refer to this response), and it closely adhered to by Babel.

Answer 3

Answer №2

It's not possible to disable this feature since it is a mandatory aspect stated in the ECMAScript 2015 standard.

The keyword this cannot be accessed until after the super(...) function call within the constructor of a subclass.

If you'd like more information on where this rule is specified in the standard, you can refer to this specific answer.

Answer 4

It's not possible to disable this feature since it is a mandatory aspect stated in the ECMAScript 2015 standard.

The keyword this cannot be accessed until after the super(...) function call within the constructor of a subclass.

If you'd like more information on where this rule is specified in the standard, you can refer to this specific answer.

Answer 5

Answer №3

This feature is not specific to Babel, but rather defined in ES2015. It cannot be disabled.

In a subclass constructor, the keyword this does not have a defined value until super is called. In contrast to languages like Java, calling super must be done explicitly and is never implicit.

This behavior is primarily outlined in §9.2.2,

[[Construct]] ( argumentsList, newTarget)

, and §12.3.5.1, which defines the runtime semantics for super: [[Construct]] only invokes OrdinaryCallBindThis if the [[ConstructorKind]] is "base" (not "derived"). Otherwise, the value of this remains undefined until super is called, wherein part of its execution involves invoking [[Construct]] on the super constructor, leading to either another call to its own super (if it is also a derived constructor) or to OrdinaryCallBindThis (if it's a base constructor).

Answer 6

This feature is not specific to Babel, but rather defined in ES2015. It cannot be disabled.

In a subclass constructor, the keyword this does not have a defined value until super is called. In contrast to languages like Java, calling super must be done explicitly and is never implicit.

This behavior is primarily outlined in §9.2.2,

[[Construct]] ( argumentsList, newTarget)

, and §12.3.5.1, which defines the runtime semantics for super: [[Construct]] only invokes OrdinaryCallBindThis if the [[ConstructorKind]] is "base" (not "derived"). Otherwise, the value of this remains undefined until super is called, wherein part of its execution involves invoking [[Construct]] on the super constructor, leading to either another call to its own super (if it is also a derived constructor) or to OrdinaryCallBindThis (if it's a base constructor).

Is it possible to disable the "super must be called before accessing this keyword" rule in babelify?

Answer №1

Answer №2

Answer №3

Similar questions

Verify if a selection of days using momentjs exceeds 7 days

Having trouble accessing the height of a div within an Iframe

Utilizing AngularJS to include information into JSON-LD

Handling multiple patch requests using React and Redux when onBlur event occurs

How to retrieve the chosen option from a drop-down menu in WebDriver using JavaScript without relying on the Select Class

Reformat a JSON file and save as a new file

PHP Header Redirect Not Redirecting Correctly

When a named capture group is included in the regex of a GET path, Express crashes with the error message: "Cannot read property 'name' of undefined at Layer

The initial axios GET request fails to retrieve data upon the first click

Tips for implementing a null check within the findAll() function

Tips for interpreting JSON information and showcasing it with the assistance of Ajax in JQuery?

Encountering a deployment issue on Vercel while building with NextJS

Joining Two Texts in HTML with a Link Embedded within

Confirming the accuracy of multiple fields in a form

Managing spinners in Protractor when they are concealed by a wrapper element

What is the best way to obtain the value of a Promise within a function?

One way to position a sidebar between two divs is to ensure it adjusts seamlessly to the size of the browser window when resized

Displaying retrieved data following AJAX request in ASP.NET MVC is currently not functioning

javascript mysql and php clash when it comes to loading

Clear previously filtered items