this.state becoming null in mobx-react observer-wrapped component

[yang]

Description

What you are reporting:

Bug (or my own misunderstanding). When I edit a stateful class component that is wrapped in an observer() from mobx-react, this.state becomes null at some point, during a render attempt.

Expected behavior

What you think should happen: this.state should never change to null.

Actual behavior

What actually happens: this.state changes to null.

Environment

React Hot Loader version:

Run these commands in the project folder and fill in their results:

1. node -v: 10.15.1
2. npm -v: 6.8.0
3. yarn -v: 1.13.0

Then, specify:

1. Operating system: MacOS 10.14.4
2. Browser and version: Chrome 73.0.3683.103

Reproducible Demo

I just did create-react-app, eject, and added hot-loader + mobx-react, before reproing the bug:

https://github.com/yang/hot-cra-observer-repro

Video of reproing the error: you must first click to toggle off the Widget, then trigger a hot-reload in the Widget, and then click to toggle the Widget back in.

https://youtu.be/47AaO8IEwqo

[theKashey]

100% due #1207

[theKashey]

Running your example right now, and it's working without any issues.

[yang]

Hm, that's odd. I just tried this repo on a different host, and am still seeing the same issue.

Do you have a similar video of your interaction? Are you doing the steps of: toggle, hot-reload, toggle? Are you using all the same platform versions?

Let me know also if I can submit more videos, if I can do any debugging on your behalf, or if there's anything else I can do from my end to help with this issue report. Thanks for taking the time to look into this.

[theKashey]

Tried again in the "right" order and it got broken :)

[theKashey]

You know - we had almost the same issue before, I clearly remember it.
But right now I could not understand what's happening

Look like Symbols are different.... oh! It was the same issue before! - mobxjs/mobx-react#522

[theKashey]

Oh, holy 💩! I make a wrong PR! That's what's happening without tests.

It uses Symbol(name), while it shall use Symbol.for(name). Could I gently ask you to fix my mistake and open PR agains mobx-react?

[theKashey]

Another approach is to use newSymbol instead of createSymbol - mobxjs/mobx-react@98396f0

[theKashey]

....and that's already made?

[theKashey]

See - mobxjs/mobx-react@98396f0#r33543118