<p dir="auto"><strong>Config:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;node6&quot;,
    &quot;stage-1&quot;
  ],
  &quot;plugins&quot;: [
    &quot;babel-plugin-transform-async-to-generator&quot;,
    &quot;babel-plugin-syntax-async-functions&quot;
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    "node6",
    "stage-1"
  ],
  "plugins": [
    "babel-plugin-transform-async-to-generator",
    "babel-plugin-syntax-async-functions"
  ]
}
</code></pre></div>
<p dir="auto"><strong>Code:</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class A {
  log() {
    return new Promise(resolve =&gt; {
      setTimeout(function () {
        console.log('should print after 1 second');
        resolve();
      }, 1000);
    });
  }
}

class B extends A {
  async log() {
    await super.log();
  }
}

const b = new B;
b.log();"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">A</span> <span class="pl-kos">{</span>
  <span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-v">Promise</span><span class="pl-kos">(</span><span class="pl-s1">resolve</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'should print after 1 second'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">1000</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">B</span> <span class="pl-k">extends</span> <span class="pl-v">A</span> <span class="pl-kos">{</span>
  <span class="pl-k">async</span> <span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">await</span> <span class="pl-smi">super</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-s1">b</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">B</span><span class="pl-kos">;</span>
<span class="pl-s1">b</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected:</strong></p>
<p dir="auto">Should dump <code class="notranslate">should print after 1 second</code> to screen</p>
<p dir="auto"><strong>Actual:</strong></p>
<blockquote>
<p dir="auto">yield super.log();<br>
^^^^^<br>
SyntaxError: 'super' keyword unexpected here</p>
</blockquote>
<p dir="auto"><strong>Issue:</strong></p>
<p dir="auto">The issue is that an <code class="notranslate">await</code> statement is wrapped like this...</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let B = class B extends A {
  log() {
    return _asyncToGenerator(function* () {
      yield super.log(); // &lt;--- `super` loses its context
    })();
  }
};"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-v">B</span> <span class="pl-c1">=</span> <span class="pl-k">class</span> <span class="pl-v">B</span> <span class="pl-k">extends</span> <span class="pl-v">A</span> <span class="pl-kos">{</span>
  <span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-en">_asyncToGenerator</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-c1">*</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">yield</span> <span class="pl-smi">super</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// &lt;--- `super` loses its context</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This fixes it:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let B = class B extends A {
  log() {
    const fn = super.log.bind(this);
    return _asyncToGenerator(function*() {
      yield fn.call();
    })();
  }
};"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-v">B</span> <span class="pl-c1">=</span> <span class="pl-k">class</span> <span class="pl-v">B</span> <span class="pl-k">extends</span> <span class="pl-v">A</span> <span class="pl-kos">{</span>
  <span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">fn</span> <span class="pl-c1">=</span> <span class="pl-smi">super</span><span class="pl-kos">.</span><span class="pl-c1">log</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-en">_asyncToGenerator</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-c1">*</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">yield</span> <span class="pl-s1">fn</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<blockquote>
<p dir="auto">Issue originally made by Dmitriy Krasnikov (dmitriy.krasnikov)</p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6.3.26</li>
<li><strong>Node version:</strong> 5.3</li>
<li><strong>npm version:</strong> 3.3.12</li>
</ul>
<h3 dir="auto">Options</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  plugins:[
    &quot;transform-async-to-generator&quot;,
  ]
}"><pre class="notranslate"><code class="notranslate">{
  plugins:[
    "transform-async-to-generator",
  ]
}
</code></pre></div>
<h3 dir="auto">Input code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export class BaseClass {
  async test(id){
    console.log(id);
  }
}
export class ChildClass extends BaseClass{
  async test(id){
    id=1;
    super.test(id);
  }
}

let cls = new ChildClass();
cls.test(5);"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">BaseClass</span> <span class="pl-kos">{</span>
  <span class="pl-k">async</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">ChildClass</span> <span class="pl-k">extends</span> <span class="pl-v">BaseClass</span><span class="pl-kos">{</span>
  <span class="pl-k">async</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-s1">id</span><span class="pl-c1">=</span><span class="pl-c1">1</span><span class="pl-kos">;</span>
    <span class="pl-smi">super</span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">let</span> <span class="pl-s1">cls</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">ChildClass</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">cls</span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-c1">5</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">Outputs:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export class BaseClass {
  test(id) {
    return _asyncToGenerator(function* () {
      console.log(id);
    })();
  }
}
export class ChildClass extends BaseClass {
  test(id) {
    return _asyncToGenerator(function* () {
      id = 1;
      super.test(id);
    })();
  }
}

let cls = new ChildClass();
cls.test(5);"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">BaseClass</span> <span class="pl-kos">{</span>
  <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-en">_asyncToGenerator</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-c1">*</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">ChildClass</span> <span class="pl-k">extends</span> <span class="pl-v">BaseClass</span> <span class="pl-kos">{</span>
  <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-en">_asyncToGenerator</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-c1">*</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">id</span> <span class="pl-c1">=</span> <span class="pl-c1">1</span><span class="pl-kos">;</span>
      <span class="pl-smi">super</span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">let</span> <span class="pl-s1">cls</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">ChildClass</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">cls</span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-c1">5</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>