[Bug] let to var allows forward reference (use in definition)

[p51lee]

💻

• Would you like to work on a fix?

How are you using Babel?

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

Input code

let x = x;

Configuration file name

No response

Configuration

No response

Current and expected behavior

Changing let to var incurs hoisting so it changes an erroneous code into normal:

$ node input.js
input.js:1
let x = x;
        ^

ReferenceError: Cannot access 'x' before initialization
    at Object.<anonymous> (input.js:1: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 output.js # no error

Environment

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]

We don't enable TDZ checks by default, because they increase the code size by a lot and usually they are not needed.

However, if you enable the tdz optinon of the transform-block-scoping plugin you'll get the error:

const code = `
let x = x;
`;

const out = babel.transformSync(code, {
  configFile: false,
  sourceType: "module",
  plugins: [
    [require("./packages/babel-plugin-transform-block-scoping"), { tdz: true }],
  ],
});

console.log(out.code);

output:

function _tdz(name) { throw new ReferenceError(name + " is not defined - temporal dead zone"); }
var x = _tdz("x");

[p51lee]

Thank you for your response!
I've tried tdz option and it solved most issues.

However, I found two cases that tdz option doesn't work as expected

1. for ( let x in x );; it is still compiled to for ( var x in x ); even if tdz option is enabled.
2. y++; let y; is compiled to _tdz(y)++; var y;, which results in SyntaxError. According to the ECMAScript specification, function call can't be used as left-hand side expression so it throws an unexpectedSyntaxError as an early error instead of ReferenceError. (By the way, there is a bug in NodeJS regarding early error. It incorrectly handles the case where the function call is used as left-hand side, so it throws ReferenceError when running _tdz(y)++; var y;, instead of SyntaxError. You may want to use other JavaScript engine to reproduce the error.)

[nicolo-ribaudo]

Thank you for the investigation! The tdz option needs a bit of care; I have started working on it so expect improvements in the next weeks :)

[nicolo-ribaudo]

#15164 fixes the _tdz("y")++ bug.