💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

// This should print "true true true"
async function test() {
  class Foo { foo() { return this } }
  class Bar extends Foo {
    a = async () => super.foo``
    b = async () => super['foo']``
    c = async (foo) => super[foo]``
  }
  const bar = new Bar
  console.log(
    (await bar.a()) === bar,
    (await bar.b()) === bar,
    (await bar.c('foo')) === bar,
  )
}
test()

REPL link

Configuration file name

No response

Configuration

I configured the REPL with chrome 50, which lowers async arrow functions.

Current and expected behavior

The sample code should print true true true but currently prints false false false when transformed by Babel.

Environment

• Babel version: v7.19.5

Possible solution

I'm reporting this because I discovered that esbuild has the same bug. I plan to inject .bind(this) to fix this bug in esbuild. This is similar to what Babel already does for private property template tags:

class Foo {
  a = () => this.#b``
  #b() { return this }
}
const foo = new Foo
console.log(foo.a() === foo)

REPL link

Additional context

No response