We can also associate the duplicate key warning with this Fiber

That way we'll get the callsite with the duplicate key on the stack
facebook · Jun 6, 2024 · 8eec615 · 8eec615
1 parent 5740a0e
commit 8eec615
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactChildReconciler-test.js b/packages/react-dom/src/__tests__/ReactChildReconciler-test.js
@@ -129,6 +129,7 @@ describe('ReactChildReconciler', () => {
         'duplicated and/or omitted — the behavior is unsupported and ' +
         'could change in a future version.\n' +
         '    in div (at **)\n' +
+        (gate(flags => flags.enableOwnerStacks) ? '' : '    in div (at **)\n') +
         '    in Component (at **)\n' +
         (gate(flags => flags.enableOwnerStacks)
           ? ''
@@ -190,6 +191,7 @@ describe('ReactChildReconciler', () => {
         'duplicated and/or omitted — the behavior is unsupported and ' +
         'could change in a future version.\n' +
         '    in div (at **)\n' +
+        (gate(flags => flags.enableOwnerStacks) ? '' : '    in div (at **)\n') +
         '    in Component (at **)\n' +
         (gate(flags => flags.enableOwnerStacks)
           ? ''

diff --git a/packages/react-dom/src/__tests__/ReactMultiChild-test.js b/packages/react-dom/src/__tests__/ReactMultiChild-test.js
@@ -227,12 +227,13 @@ describe('ReactMultiChild', () => {
           'across updates. Non-unique keys may cause children to be ' +
           'duplicated and/or omitted — the behavior is unsupported and ' +
           'could change in a future version.\n' +
-          '    in div (at **)\n' +
-          '    in WrapperComponent (at **)\n' +
+          '    in div (at **)' +
           (gate(flags => flags.enableOwnerStacks)
             ? ''
-            : '    in div (at **)\n') +
-          '    in Parent (at **)',
+            : '\n    in div (at **)' +
+              '\n    in WrapperComponent (at **)' +
+              '\n    in div (at **)' +
+              '\n    in Parent (at **)'),
       );
     });
 
@@ -292,12 +293,13 @@ describe('ReactMultiChild', () => {
           'across updates. Non-unique keys may cause children to be ' +
           'duplicated and/or omitted — the behavior is unsupported and ' +
           'could change in a future version.\n' +
-          '    in div (at **)\n' +
-          '    in WrapperComponent (at **)\n' +
+          '    in div (at **)' +
           (gate(flags => flags.enableOwnerStacks)
             ? ''
-            : '    in div (at **)\n') +
-          '    in Parent (at **)',
+            : '\n    in div (at **)' +
+              '\n    in WrapperComponent (at **)' +
+              '\n    in div (at **)' +
+              '\n    in Parent (at **)'),
       );
     });
   });

diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
@@ -1061,14 +1061,16 @@ function createChildReconciler(
             knownKeys.add(key);
             break;
           }
-          console.error(
-            'Encountered two children with the same key, `%s`. ' +
-              'Keys should be unique so that components maintain their identity ' +
-              'across updates. Non-unique keys may cause children to be ' +
-              'duplicated and/or omitted — the behavior is unsupported and ' +
-              'could change in a future version.',
-            key,
-          );
+          runWithFiberInDEV(workInProgress, () => {
+            console.error(
+              'Encountered two children with the same key, `%s`. ' +
+                'Keys should be unique so that components maintain their identity ' +
+                'across updates. Non-unique keys may cause children to be ' +
+                'duplicated and/or omitted — the behavior is unsupported and ' +
+                'could change in a future version.',
+              key,
+            );
+          });
           break;
         case REACT_LAZY_TYPE: {
           let resolvedChild;

diff --git a/packages/react/src/__tests__/ReactJSXElementValidator-test.js b/packages/react/src/__tests__/ReactJSXElementValidator-test.js
@@ -322,9 +322,7 @@ describe('ReactJSXElementValidator', () => {
           </>,
         );
       });
-    }).toErrorDev('Encountered two children with the same key, `a`.', {
-      withoutStack: true,
-    });
+    }).toErrorDev('Encountered two children with the same key, `a`.');
   });
 
   it('does not call lazy initializers eagerly', () => {