Search code examples
mobxmobx-react

Interprete mobx console outputs

I'm stuck with interpreting mobx console outputs. All components are named "observerComponent" in the console output. Is there a way to enforce a name?

Console Output:

react_devtools_backend.js:3973 Warning: Cannot update a component (`observerComponent`) while rendering a different component (`observerComponent`). 
at observerComponent (http://localhost:4200/vendor.js:40885:73)
at div
at http://localhost:4200/vendor.js:12601:62
at div
at http://localhost:4200/vendor.js:12763:34
at observerComponent (http://localhost:4200/vendor.js:40885:73)
at DndProvider (http://localhost:4200/vendor.js:135424:11)
at observerComponent (http://localhost:4200/vendor.js:40885:73)
at observerComponent (http://localhost:4200/vendor.js:40885:73)
at Route (http://localhost:4200/vendor.js:107737:29)
at Switch (http://localhost:4200/vendor.js:107939:29)
at main
at http://localhost:4200/vendor.js:14246:25
at http://localhost:4200/vendor.js:14229:66
at section
at http://localhost:4200/vendor.js:14262:63
at http://localhost:4200/vendor.js:14229:66
at section
at http://localhost:4200/vendor.js:14262:63
at http://localhost:4200/vendor.js:14229:66
at observerComponent (http://localhost:4200/vendor.js:40885:73)
at App (http://localhost:4200/main.js:277:76)
at Router (http://localhost:4200/vendor.js:107368:30)
at BrowserRouter (http://localhost:4200/vendor.js:106988:35)

Component:

const GenericEditor = observer(() => {
   /**/
});

export default GenericEditor;

//edit

https://mobx.js.org/react-integration.html#displayname Does not work for console outputs from react

Solution

  • You can try using displayName

    export const MyComponent = observer(function MyComponent(props) {
    return <div>hi</div>
})
MyComponent.displayName = 'MyComponent'