[Bug]: Class in computed field of itself

[p51lee]

💻

• Would you like to work on a fix?

How are you using Babel?

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

Input code

// Expected: ReferenceError

// input1.js
class x { [ x ] } // got Error

// input2.js
class x { [ x ++ ] } // got SyntaxError

// input3.js
class x { [ x = 0 ] } // normal termination

Configuration file name

No response

Configuration

No response

Current and expected behavior

Running input1.js, input2.js and input3.js should all result in ReferenceError:

$ node input1.js
input1.js:1
class x { [ x ] }
            ^

ReferenceError: Cannot access 'x' before initialization
    at Object.<anonymous> (/input1.js:1:13)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.11.0

$ node input2.js
input2.js:1
class x { [ x ++ ] }
              ^

ReferenceError: Cannot access 'x' before initialization
...

$ node input3.js
input3.js:1
class x { [ x = 0 ] }
              ^

ReferenceError: Cannot access 'x' before initialization
...

However, transpilation outputs, output1.js, output2.js and output3.js behave differently:

$ node output1.js # throws Error
output1.js:8
function _classNameTDZError(name) { throw new Error("Class \"" + name + "\" cannot be referenced in computed property keys."); }
                                    ^

Error: Class "x" cannot be referenced in computed property keys.
    at _classNameTDZError (output1.js:8:43)
    at Object.<anonymous> (/Users/p51lee/dev/esmeta-plrg/output.js:9:9)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.11.0

$ node output2.js # throws SyntaxError
output2.js:9
_ref = (_classNameTDZError("x"), x)++;
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Invalid left-hand side expression in postfix operation
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Node.js v18.11.0

$ node output3.js # terminates without error

Environment

1. Reproduction on Babel's own REPL
2. Reproduction on Babel's own REPL
3. Reproduction on Babel's own REPL

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @p51lee! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[nicolo-ribaudo]

Same as #15150 (comment)

function _tdz(name) { throw new ReferenceError(name + " is not defined - temporal dead zone"); }
class x {
  [_tdz("x")];
}
class y {
  [_tdz("y")++];
}
class z {
  [(_tdz("z"), z = 0)];
}