Debugging react with mobx show undefined properties while console.log shows otherwise
I have a react+mobx project which I debug using the following configuration:
When I debug the code, some properties of "this" object (mainly - this.props) appear as undefined. I couldn't wrap my head around this problem until I decided to print the variable to the console where I saw it wasn't undefined. This means something in the debugger doesn't work well.
I'm using Intellij 2017.1 (with the recommended plugins to support js development)
Please sign in to leave a comment.
This might be an issue with sourcemaps. Is this property defined when debugging in Dev Tools? Can you share a project that can be used to recreate the issue?
Thanks Elena,
I pushed the project into github:
https://github.com/AviEt/promiss-mobx.git
There's almost nothing there but you can start it with `npm start` and try to debug the handleClose function in AddPromissDialog.jsx and see that this.props is marked as undefined but when printing it to the console it is not undefined.
You will see the same issue when debugging in Dev Tools:
the reason is that `this` is changed to `_this` by webpack, and no name mappings are provided, so `this.props` is undefined in debugger, only `_this.props` is available
See https://stackoverflow.com/questions/36638663/value-of-this-is-incorrect-when-debugging-babel-transpiled-react-with-chrome-d and similar reports