More actionable error message for <tbody> and nested <p>
This bites people all of the time. Until we have a better solution, let's just make the error message more actionable (most people don't know how the DOM gets unexpectedly mutated).
Pete Hunt committed
Mar 16, 2014 at 21:55 UTC
04f9887f0e2a078625e6d8e27c28dd1ec5ffd645
2 files changed
+8
-4
src/browser/ui/ReactMount.js
+4
-2
@@ -618,8 +618,10 @@ var ReactMount = {
618
invariant(
619
false,
620
'findComponentRoot(..., %s): Unable to find element. This probably ' +
621
- 'means the DOM was unexpectedly mutated (e.g., by the browser). ' +
622
- 'Try inspecting the child nodes of the element with React ID `%s`.',
621
+ 'means the DOM was unexpectedly mutated (e.g., by the browser), ' +
622
+ 'usually due to forgetting a <tbody> when using tables or nesting <p> ' +
623
+ 'or <a> tags. Try inspecting the child nodes of the element with React ' +
624
+ 'ID `%s`.',
625
targetID,
626
ReactMount.getID(ancestorNode)
627
);
src/core/__tests__/ReactInstanceHandles-test.js
+4
-2
@@ -146,8 +146,10 @@ describe('ReactInstanceHandles', function() {
146
}).toThrow(
147
'Invariant Violation: findComponentRoot(..., .0.1:0:junk): ' +
148
'Unable to find element. This probably means the DOM was ' +
149
- 'unexpectedly mutated (e.g., by the browser). Try inspecting the ' +
150
- 'child nodes of the element with React ID `.0`.'
149
+ 'unexpectedly mutated (e.g., by the browser), usually due to ' +
150
+ 'forgetting a <tbody> when using tables or nesting <p> or <a> ' +
151
+ 'tags. Try inspecting the child nodes of the element with React ' +
152
+ 'ID `.0`.'
153
);
154
});
155
});