CODEWITHSUNDEEP
javascriptwebpackecmascript-6babeljs
dendog
dendog

Reputation: 3338

ES6 - Class Methods not defined when extending - babel issue

I am extending a class, and adding some properties and methods to it:

class Cmp extends ConsentString {
  constructor(result = null) {
    super(result);
    this.setCmpId(52);
  }
  loaded() {
    return this.cmpLoaded;
  }
}

I am then creating a function which returns a promise to create a new instance of the class:

export default function initCmp(loaderData) {
  return new Promise((resolve, reject) => {
    const cmp = new Cmp();
    console.log('testing', cmp.loaded()); // undefined!
    if (!cmp) reject();
    console.log('CMP: ', cmp); // this logs as you would expect apart from there are non of the methods with which I extend.
    resolve(cmp);
  });

I am able to access methods and properties from the original class, and any properties from my extension but not any of the methods - they are all undefined.

I have tried many things such as bind(this) and adding the method names to the constructor, nothing seems to work.

I also feel this bug was introduced as part of the Babel Transform Runtime I added to be able to use async/await.

EDIT: ConsentString class is here https://github.com/InteractiveAdvertisingBureau/Consent-String-SDK-JS/blob/master/src/consent-string.js

UPDATE: I have tried to run the flow without extending the class but rather creating a new class, all works fine - so the issue must be with extending, but I am unsure what that is, this is still an issue.

UPDATE 2: When I remove two plugins from babel: @babel/plugin-transform-runtime & transform-async-to-generator all works fine.

Please help!

Upvotes: 1

Views: 792

Answers (1)

dendog
dendog

Reputation: 3338

I have (thanks to a chat with @JamesLeClair) included babel-polyfill instead of the runtime which has solved the issue.

This is not the perfect solution as I am working on a library but keeps things moving for now!

Upvotes: 0

Related Questions