React-hot-loader: Uncaught ReferenceError: _this5 is not defined

[timneutkens]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

After hot-reloading a file with multiple components (4 to 5) in one file an error is thrown

VM97:6 Uncaught ReferenceError: _this5 is not defined
    at value (eval at __reactstandin__regenerateByEval (header.js:996), <anonymous>:6:9)
    at HTMLUnknownElement.callCallback (react-dom.development.js:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
    at Object.invokeGuardedCallback (react-dom.development.js:436)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:450)
    at executeDispatch (react-dom.development.js:834)
    at executeDispatchesInOrder (react-dom.development.js:856)
    at executeDispatchesAndRelease (react-dom.development.js:954)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:965)
    at Array.forEach (<anonymous>)

Expected behavior

Hot reload should be applied and not crash the component

Actual behavior

What actually happens:

_this5 is not defined

[timneutkens]

Sounds very similar to #928

[theKashey]

There was _this, this2, this3, half year later someone asked for this4, and now this5.
😩🤘

[timneutkens]

I wonder if there's a better way to do this. cc @hzoo @loganfsmyth

[timneutkens]

Specifically @theKashey has to keep adding this https://github.com/gaearon/react-hot-loader/blob/8a6f69d8c32ce588bf0f84d676134800540f5c5e/src/proxy/inject.js#L146-L156

[loganfsmyth]

I'm happy to try to help, but it would go a long way if someone could spell out what this wrapper is doing, since I'm not familiar with the internals of the hot loader.

What ends up running at the end, and why isn't _this5 already available in the outer scope?

Can could in theory generate any number of _this variables, dependent only on how many arrow functions and this references you have in a single file.

[theKashey]

So what we are doing - reading function body from one class, and executing it in the scope of another. as result all variables, possible _visible_ from a function, including this, are _right_.

@loganfsmyth - this problem could be fixed with easy, if only you know babel. And look like - you know.

We just need to place our "regenerator" function inside a constructor, the place where all those thisN already defined. Currently, we are just adding it to the class.
The trick is - we have to the put a function into the transpiled class constructor, so in the scope, where this5 is already defined.
Link to sources - https://github.com/gaearon/react-hot-loader/blob/master/src/babel.dev.js#L176 - just appending class methods. Works, but not _always_ :)

Moving regenerator into constructor will not cover some inheritance cases, as long they will have a "place" inside another constructor, but it will be better than current state.

[loganfsmyth]

It seems like, along with the current behavior of injecting

 [REGENERATE_METHOD](key, code){
   this[key] = eval(code);
 }

You could special-case if the class has a constructor, also inject

 this[REGENERATE_METHOD] = function(key, code) {
   this[key] = eval(code);
 };

in the constructor? Then you could use that instead.

As you said, there are a _lot_ of edge cases in approaches like this, but I feel like the logic in here is already a little scary to me, so it's not much worse with this :P

[theKashey]

Just to double check - adding code like

 [REGENERATE_METHOD] = (key, code) => this[key] = eval(code);

will result regenerator code to be moved inside a constructor?
What is the "right" way to put this method there?

[theKashey]

I have failed :(

To move renerate inside constructor and keep the "// @ts-ignore" comments.

The move itself is relatively easy, but how to add comments :(

[theKashey]

Just add this4-6 for now. Will help for a while.
If anybody could help modify babel plugin - please do it.