this is not found error (undefined) when i write codes like doSomething = async () => this.xxx ...

[wuchu]

Input Code

class Test {
    doSomething = async () => {
        console.log('Test: %O', this);
    }
}

new Test().doSomething();

Babel Configuration (.bablerc, package.json, cli command)

.bablerc

module.exports = {
    plugins: [
        [
            "transform-runtime", {
                polyfill: false,
                regenerator: true
            }
        ],
        'react-hot-loader/babel',
        'transform-decorators-legacy'
    ],
    presets: [
        'es2015',
        'stage-0',
        'react'
    ]
};

package.json

{
    "autoprefixer": "^6.4.1",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "^0.24.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "hashmark": "^3.1.0",
    "json-pointer": "^0.5.0",
    "lodash": "^4.15.0",
    "mpt-loader": "0.0.4",
    "postcss-loader": "^0.13.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-hot-loader": "^3.0.0-beta.3",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }

Expected Behavior

build ok!

Current Behavior

index.js:8307 Uncaught (in promise) ReferenceError: _this3 is not defined

Possible Solution

class Test {
    doSomething = ()=> async () => {
        console.log('Test: %O', this);
    }
}

new Test().doSomething()();

// but wat the...

Context

i dont want via this style to write code like above.

Your Environment

software	version
Babel	^6.14.0
node	v6.5.0
npm	3.10.3
Operating System

[chentsulin]

You should avoid Async Arrow Functions to keep this:

class Test {
    doSomething = async function() {
        console.log('Test: %O', this);
    }
}

[danharper]

Looks like a bug with react-hot-loader/babel.

With:

'use strict';

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Test = function () {
    function Test() {
        var _this = this,
            _arguments = arguments;

        (0, _classCallCheck3.default)(this, Test);

        this.doSomething = function () {
            var _ref = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee() {
                var _args = _arguments;
                return _regenerator2.default.wrap(function _callee$(_context) {
                    while (1) {
                        switch (_context.prev = _context.next) {
                            case 0:
                                _context.next = 2;
                                return _this.__doSomething__REACT_HOT_LOADER__.apply(_this, _args);

                            case 2:
                                return _context.abrupt('return', _context.sent);

                            case 3:
                            case 'end':
                                return _context.stop();
                        }
                    }
                }, _callee, _this);
            }));

            return function NAME(_x) {
                return _ref.apply(this, arguments);
            };
        }();
    }

    (0, _createClass3.default)(Test, [{
        key: '__doSomething__REACT_HOT_LOADER__',
        value: function () {
            var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee2() {
                var _args2 = arguments;
                return _regenerator2.default.wrap(function _callee2$(_context2) {
                    while (1) {
                        switch (_context2.prev = _context2.next) {
                            case 0:
                                _context2.next = 2;
                                return _this2.__doSomething__REACT_HOT_LOADER__.apply(_this2, _args2);

                            case 2:
                                return _context2.abrupt('return', _context2.sent);

                            case 3:
                            case 'end':
                                return _context2.stop();
                        }
                    }
                }, _callee2, this);
            }));

            function __doSomething__REACT_HOT_LOADER__(_x2) {
                return _ref2.apply(this, arguments);
            }

            return __doSomething__REACT_HOT_LOADER__;
        }()
    }, {
        key: '__doSomething__REACT_HOT_LOADER__',
        value: function () {
            var _ref3 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee3() {
                return _regenerator2.default.wrap(function _callee3$(_context3) {
                    while (1) {
                        switch (_context3.prev = _context3.next) {
                            case 0:
                                console.log('Test: %O', _this3);

                            case 1:
                            case 'end':
                                return _context3.stop();
                        }
                    }
                }, _callee3, this);
            }));

            function __doSomething__REACT_HOT_LOADER__() {
                return _ref3.apply(this, arguments);
            }

            return __doSomething__REACT_HOT_LOADER__;
        }()
    }]);
    return Test;
}();

new Test().doSomething();
;

var _temp = function () {
    if (typeof __REACT_HOT_LOADER__ === 'undefined') {
        return;
    }

    __REACT_HOT_LOADER__.register(Test, 'Test', 'src/index.js');
}();

;

Without:

'use strict';

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Test = function Test() {
    var _this = this;

    (0, _classCallCheck3.default)(this, Test);
    this.doSomething = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee() {
        return _regenerator2.default.wrap(function _callee$(_context) {
            while (1) {
                switch (_context.prev = _context.next) {
                    case 0:
                        console.log('Test: %O', _this);

                    case 1:
                    case 'end':
                        return _context.stop();
                }
            }
        }, _callee, _this);
    }));
};

new Test().doSomething();

[wuchu]

@danharper Thank you!

[leebenson]

track in gaearon/react-hot-loader/issues/391

[leebenson]

@wuchu as a workaround for now, you can return a wrapped async function, a la:

someAsyncFunction = () => (async () => {
  console.log('*this* is correct ->', this);
})();

[wuchu]

@leebenson In order to preserve the 'this' point, maybe it is the best solution for me from then now, although codes look like a little strange. Thank you very much.

: ] 👍

[hzoo]

closing as it seems like a bug in gaearon/react-hot-loader?

[calesce]

@hzoo you're right, although I suspect #4270 may be the underlying issue, since our plugin uses spread when redirecting class properties to class methods. 😄