I'm looking for some advice to help me debug a warning in one of my react-redux applications.
Problem
I'm receiving this warning below with a confusing stack trace. I believe I understand the problem/issue. But, it is difficult to debug the stack trace given the stack trace refers to minified webpack files and line numbers.
Warning: Cannot update a component (`Connect(Main)`) while rendering a different
component (`MainComponent`). To locate the bad setState() call inside `MainComponent`
I've tried to follow the very helpful directions that the legend Dan Abramov gives explanation on how to debug this type of error by using the stack trace.
As illustrated in the images below, Dan's stack trace refers to source code and line numbers. My stack trace has minified webpack .js files and line numbers that do not help me debug the issue in my code.
Question
How can I get my stack trace to report line numbers and source files like Dan's stack trace?
Example
Dan Abramov's Stack Trace Example
My Stack Trace ##:
Things I have tried to do (so far)
- I learned about and read a lot about source maps. I'm guessing this is the potential solution. But, I have not made progress.
- Source maps are enabled in chrome development build, but the source maps do not seem to be applied for this stack trace.
- I also built a production build with maps, and the warning does not show up in the production build as I expect whatever caught the warning was removed during optimization.
- I've thought about "ejecting" and trying to set up my webpack.config.js. But, that seems like overkill for this issue. I don't want to npm run eject if I can avoid it.
- I've looked at this in vs code, and the chrome debugger. Both are the same stack trace.
In advance, thank you so much for any help or ideas you may have!
