the var declaration is missing with the default function parameters scope

[guox191]

Bug Report

Current Behavior

Playground:
https://babeljs.io/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=GYVwdgxgLglg9mABFApgZygClJRBeRTASnwD5EBvAKEUQDcBDAJ0Qf0QEYBuGxCBNHAA2KAHRC4Ac0wMiPAL4lqtRiwAOTFHXgg07AAwKuQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015&prettier=false&targets=&version=7.7.4&externalPlugins=

Input Code

function test(func = () => {
  var a = 1;
  console.log(a);
}) {
  var previous = 0;
};

Translate these with es2015 presets, the result is:

"use strict";

function test() {
  var func = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
    var a = 1;
    console.log(a);
  };
  return function () {
    previous = 0;
  }();
}

;

We can see that the generated function returns a closure, and the various previous is not declared in the closure.

in strict mode, we will get the exception:
Uncaught ReferenceError: previous is not defined

Expected behavior/code
The var expression won't be removed.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

Babel playground with es2015 preset config.

Additional context/Screenshots

[babel-bot]

Hey @guox191! 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."

[smelukov]

I'm trying to research and solve it ☺️

[smelukov]

I think that I've found the reason:

• https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-parameters/src/params.js#L149 - at this point we use callDelegate helper
• https://github.com/babel/babel/blob/master/packages/babel-helper-call-delegate/src/index.js#L35 - at this point we use hoistVariables(there is a todo, maybe it is a reason?)
  https://github.com/babel/babel/blob/master/packages/babel-helper-hoist-variables/src/index.js#L40 - and finally at this point, we replace VariableDeclaration with multiple AssignmentExpression

@nicolo-ribaudo I have a question here (cause, for now, I'm not so familiar with babel internals):
If hoistVariables replaces VariableDeclaration with multiple AssignmentExpression then it should add another VariableDeclaration with empty init prop on VariableDeclarator to the top of the function? Where is it happen?

Thanks

[nicolo-ribaudo]

id => scope.push({ id })

This code, which is passed as a parameter to VariableDeclaration should already add the variables without initializer to the scope. Maybe that function isn't always called by hoistVariables, or it has the wrong scope?

[homobel]

I think issue I've met related to this one but in my case it's about this.
https://babeljs.io/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYGwhgzhAEBC0G8C-AoFpIwILQKYA8AXXAOwBMZ4EUBIYAexIkICcBXYQ-lgChLAC2uADTRgAI2gBeaDwCU0gHxjGEeiFwA6EPQDmPQgAsAlhE38hchdRo0IbAA65ecgNxpbR0-cG5p0C1x3TxMzCX8JYNRUdFVCaDB_ElwAd2gsHgByADF6eky3FDBNCXl3IA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.7.7&externalPlugins=

So it says _this is undefined.

[JLHwung]

@smelukov Looking into the code

babel/packages/babel-helper-call-delegate/src/index.js

Line 35 in e9dc74e

hoistVariables(path, id => scope.push({ id }));

and

babel/packages/babel-helper-hoist-variables/src/index.js

Line 32 in e9dc74e

state.emit(t.identifier(name), name, declar.node.init !== null);

I think the timing of registering declaration is incorrect. While state.emit looks like a callback executed after the path is replaced by assignment expressions

babel/packages/babel-helper-hoist-variables/src/index.js

Line 40 in e9dc74e

path.replaceWithMultiple(nodes);

it is actually executed before the path is replaced. Therefore the inserted variable declarators from scope.push is also replaced.

We can delay the timing of scope.push after we collect an array of declared variables.

I composed a unit test when digging this issue, you may work from this branch: https://github.com/JLHwung/babel/tree/add-test-10798

[JLHwung]

@homobel Thanks for the reproduction case! Yes it is the same issue.

[JLHwung]

@smelukov Are you still working on this issue? If you have any questions about developing a fix, feel free to ask in #development channel.

[openorclose]

Tried on this pr #11158,

and got this which should be right:

function test() {
  var func = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
    var a = 1;
    console.log(a);
  };
  return function () {
    var previous = 0;
  }();
}

;

[homobel]

@nicolo-ribaudo @JLHwung Unfortunately #11158 fix not resolved issue with default parameter with "this"(7.9.6) I've mentioned above.

class B {}

class A extends B {
	constructor(name, cb = () => console.log(this.name)) {
		super();

		this.name = name;
		this.cb = cb;
	}
}

const a = new A('Foo');
a.cb();

Produces:

let B = function B() {
  _classCallCheck(this, B);
};

let A = /*#__PURE__*/function (_B) {
  _inherits(A, _B);

  var _super = _createSuper(A);

  function A(name) {
    var _this2 = this;

    let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => console.log(_this.name);
    return function () {
      var _this;

      _classCallCheck(_this2, A);

      _this = _super.call(_this2);
      _this.name = name;
      _this.cb = cb;
      return _this;
    }();
  }

  return A;
}(B);

const a = new A('Foo');
a.cb();

With same "_this is not defined" error.

I'm not sure about approaches here used but I've checked example on playground with only @babel/plugin-transform-classes enabled and it produces also invalid code(same error):

let B = function B() {
  _classCallCheck(this, B);
};

let A = /*#__PURE__*/function (_B) {
  _inherits(A, _B);

  var _super = _createSuper(A);

  function A(name, cb = () => console.log(_this.name)) {
    var _this;

    _classCallCheck(this, A);

    _this = _super.call(this);
    _this.name = name;
    _this.cb = cb;
    return _this;
  }

  return A;
}(B);

const a = new A('Foo');
a.cb();