Avoid server insertion react key warning (#51053)

Wrap server inseration children with react key to avoid react key warning display
vercel · Jun 9, 2023 · 558632b · 558632b
1 parent 4080f63
commit 558632b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -1458,8 +1458,12 @@ export async function renderToHTMLOrFlight(
             ReactDOMServer: require('react-dom/server.edge'),
             element: (
               <>
-                {Array.from(serverInsertedHTMLCallbacks).map((callback) =>
-                  callback()
+                {Array.from(serverInsertedHTMLCallbacks).map(
+                  (callback, index) => (
+                    <React.Fragment key={'_next_insert' + index}>
+                      {callback()}
+                    </React.Fragment>
+                  )
                 )}
                 {polyfillsFlushed
                   ? null

diff --git a/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts
@@ -117,6 +117,9 @@ createNextDescribe(
         internalQueries.some((query) => content.includes(query))
       )
       expect(hasNextInternalQuery).toBe(false)
+      expect(next.cliOutput).not.toContain(
+        'Each child in a list should have a unique "key" prop'
+      )
     })
 
     it('should reuse the inline flight response without sending extra requests', async () => {