Strange error with React Devtools: the creation of the observable instance must be done on the initializing phase

[danielkcz]

Bug report

• [x] I've checked documentation and searched for existing issues
• [x] I've made sure my project is based on the latest MST version

Sandbox link or minimal reproduction code I am not able to reproduce it anywhere else unfortunately

Describe the expected behavior

MST shouldn't be surprised by shenanigans of React devtools :)

Describe the observed behavior

MST: 3.14.0 MobX: 5.9.4 React Devtools: 3.6.0

You can see the backend.js in stacktrace which is from React devtools, not my application code. It happens somewhat randomly when devtools are active and I reload the page.

I am fairly certain this wasn't happening before, so it's most likely some change in React Devtools which started doing something shady.

[xaviergonz]

Yeah, react dev tools do very weird stuff to passed props. It used to access them and all its props when they were no longer part of the props of a component (therefore triggering warnings/errors about detached objects being accessed). I wonder if there's a way to detect when react-dev-tools are doing their weird "deep reading" and do something else instead (like returning the snapshot or whatever)...

[barbalex]

I got this error in my app after refacturing when moving from using auth0 to firebase. I have no idea why. backend.js was not in the stack trace.

I found out that the issue did not occur if I deactivated mst-persist (which has worked flawlessly for two years so far). So I ended up doing that 😢

My app is way to complicated to build a simple reproducible example so I am afraid this will not be any help to solve issues.

[kresli]

for me this happened because onClick the button removed value from map and button's parent tried to assign the value to react state which was already deleted.

const [element, setElement] = useState();
<div onClick={() => setElement(element)}>
  <div onClick={() => store.delete(element)}/>
</div>

[danielkcz]

@kresli That's actually correct behavior I think. The issue I posted above is false negative due to React Devtools shenanigans.

[quanlh-ttlab]

I got this error in my react native app when try to update data mapping for component in react-native-reanimated ui lib. I dont know why but when i remove dependencies in hook function where mst action place at, it worked.
Also this error is appear when using replace an array state and when i use detach and applySnapshot instead, the error is disappear