webpack - How to debug an error in reactjs -
minified code in reactjs using webpack getting error, pull down older branch no changes working before. still getting same error thinking maybe has changed reactjs or webpack. can suggest how debug find error.
uncaught error: invariant violation: findcomponentroot(..., .0.0.0.0.0): unable find element. means dom unexpectedly mutated (e.g., browser), due forgetting <tbody> when using tables, nesting tags <form>, <p>, or <a>, or using non-svg elements in <svg> parent. try inspecting child nodes of element react id ``
this due browser upgrade, rather react.
in cases browser automatically 'fix' problems html, mentioned in warning react.
if create react component uses table this:
<table> <tr> <td>a</td> <td>1</td> </tr> </table>
then browsers try out adding more semantically correct <tbody>
tag.
<table> <tbody> <tr> <td>a</td> <td>1</td> </tr> </tbody> </table>
similar behaviour can occur if nest tags shouldn't nested recursively (<a>
, <p>
, <form>
), or use svg tags (<g>
, <rect>
, <path>
) outside of <svg>
parent.
if else mutates dom whilst react trying manage it, it's difficult diff virtual dom against it, why react warns bad happened.
your browser updated fix case of behaviour hasn't covered.
if branch used work, can try in older version of browser (or whichever browser used @ time) confirm issue.
open element inspector, grab dump of html use react-dom/server
render application string, diff 2 see shows inconsistent.
Comments
Post a Comment