Mobx: State with computed property prevent React debugging tool to expand the state

[Kimserey]

I have the following state:

export class AppState {
  users = [
    "Kim",
    "Tom",
    "Sam"
  ];

  get filteredUsers() {
    return this.users.filter(u => u.startsWith('K'));
  }
}

decorate (AppState, {
  users: observable,
  filteredUsers: computed
});

The state works fine in the application but when I open the Chrome React debugger and try to expand the state, I get the following error displayed in the console:

mobx.module.js:954 Uncaught TypeError: Cannot read property 'filter' of undefined
    at Object.get (AppState.tsx:23)
    at ComputedValue$$1.computeValue (mobx.module.js:1012)
    at ComputedValue$$1.get (mobx.module.js:945)
    at ObservableObjectAdministration$$1.read (mobx.module.js:3936)
    at Object.get (mobx.module.js:4225)
    at Object.get (mobx.module.js:339)
    at backend.js:7713
    at Array.forEach (<anonymous>)
    at Bridge._inspectResponse (backend.js:7709)
    at Bridge._handleMessage (backend.js:7590)
    at listener (backend.js:91)
get @ AppState.tsx:23
ComputedValue$$1.computeValue @ mobx.module.js:1012
ComputedValue$$1.get @ mobx.module.js:945
ObservableObjectAdministration$$1.read @ mobx.module.js:3936
get @ mobx.module.js:4225
get @ mobx.module.js:339
(anonymous) @ backend.js:7713
_inspectResponse @ backend.js:7709
_handleMessage @ backend.js:7590
listener @ backend.js:91
postMessage (async)
handleMessageFromDevtools @ contentScript.js:18
EventImpl.dispatchToListener @ VM22 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM28 extensions::utils:138
EventImpl.dispatch_ @ VM22 extensions::event_bindings:387
EventImpl.dispatch @ VM22 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM28 extensions::utils:138
dispatchOnMessage @ VM29 extensions::messaging:392

Any idea where does it come from? Is the React debugger suppose to work properly?

Mobx version: "mobx": "^5.7.0", "mobx-react": "^5.4.2"
React debugger version: 3.4.3

[mayorovp]

Look like react-devtools error. Bug lives here: https://github.com/facebook/react-devtools/blob/547916f3ad9b9c1a610f89a51a5a3bcc1923d188/agent/Bridge.js#L451

After inspecting object itself react-devtools inspect it's prototype. But prototype contains only filteredUsersproperty without users!

Probably this bug can be reproduced without mobx. Please, remove decorate and check it.

[mayorovp]

Linked issues in react-devtools:

https://github.com/facebook/react-devtools/issues/774
https://github.com/facebook/react-devtools/issues/893
https://github.com/facebook/react-devtools/issues/976

[mweststrate]

Closing here as this is out of our control

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.