Update findComponentRoot and processUpdates warnings for SVG
I ran into a really difficult-to-debug issue with a React app with SVG elements. Christopher sat down with me for a while and we finally figured out that the browser was moving non-SVG elements out of a parent `<svg>` node which triggered the `processUpdates()` invariant. This updates the error message thrown from there to include this scenario in the possible issues list.
Fred Zhao committed
May 28, 2014 at 17:33 UTC
50516585a4ab039e67d351011db11970d95ee50c
3 files changed
+10
-8
src/browser/ui/ReactMount.js
+3
-3
@@ -642,9 +642,9 @@ var ReactMount = {
642
false,
643
'findComponentRoot(..., %s): Unable to find element. This probably ' +
644
'means the DOM was unexpectedly mutated (e.g., by the browser), ' +
645
- 'usually due to forgetting a <tbody> when using tables or nesting <p> ' +
646
- 'or <a> tags. Try inspecting the child nodes of the element with React ' +
647
- 'ID `%s`.',
645
+ 'usually due to forgetting a <tbody> when using tables, nesting <p> ' +
646
+ 'or <a> tags, or using non-SVG elements in an <svg> parent. Try ' +
647
+ 'inspecting the child nodes of the element with React ID `%s`.',
648
targetID,
649
ReactMount.getID(ancestorNode)
650
);
src/browser/ui/dom/DOMChildrenOperations.js
+4
-3
@@ -118,9 +118,10 @@ var DOMChildrenOperations = {
118
updatedChild,
119
'processUpdates(): Unable to find child %s of element. This ' +
120
'probably means the DOM was unexpectedly mutated (e.g., by the ' +
121
- 'browser), usually due to forgetting a <tbody> when using tables ' +
122
- 'or nesting <p> or <a> tags. Try inspecting the child nodes of the ' +
123
- 'element with React ID `%s`.',
121
+ 'browser), usually due to forgetting a <tbody> when using tables, ' +
122
+ 'nesting <p> or <a> tags, or using non-SVG elements in an <svg> '+
123
+ 'parent. Try inspecting the child nodes of the element with React ' +
124
+ 'ID `%s`.',
125
updatedIndex,
126
parentID
127
);
src/core/__tests__/ReactInstanceHandles-test.js
+3
-2
@@ -147,8 +147,9 @@ describe('ReactInstanceHandles', function() {
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), 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 ' +
150
+ 'forgetting a <tbody> when using tables, nesting <p> or <a> tags, ' +
151
+ 'or using non-SVG elements in an <svg> parent. Try inspecting the ' +
152
+ 'child nodes of the element with React ' +
153
'ID `.0`.'
154
);
155
});