unexpected character = when using arrow functions with webpack / babel env preset

Question

What is wrong with this syntax:

export default class Pano {
    constructor() {
        this.buildReferences();
    }

    buildReferences=()=> {
        console.log(window);
    }
}

It is throwing the error Parsing error: Unexpected token =.

I have used this in other projects so I'm not sure what's going on.

change to ```buildReferences() { console.log(window); }``` – Sumama Waheed Jan 09 '18 at 19:55 — Sumama Waheed, Jan 09 '18 at 19:55
yes, but how do I use arrow functions? – mheavers Jan 09 '18 at 19:59 — mheavers, Jan 09 '18 at 19:59

score 1 · Accepted Answer · answered Jan 09 '18 at 20:04

A class body can only contain methods, but not data properties

So when you are inside an ES6 class, the buildReferences() syntax works like the arrow function syntax.

If you want to actual do what you are trying to do, you would have to do it inside of another function, like the constructor:

class Pano {
    constructor() {

        // you can create a data property here and assign it a function
        this.buildReferences = ()=> {
            console.log("hello");
        }

        this.buildReferences();

    }

    // this is the syntax for a function in an ES6 class
    regularFunction(){

    }

}

let test = new Pano();

FYI: TypeScript supports data properties so what you are doing would work in Typescript.

unexpected character = when using arrow functions with webpack / babel env preset

1 Answers1