Add missing key prop for array elements in _document (#8132)

* Add missing keys for array elements

* Add test for missing key prop in app-document

packages/next/pages/_document.tsx

@@ -608,6 +608,7 @@ export class NextScript extends Component<OriginProps> {
       <script
         async
         id={`__NEXT_PAGE__${page}`}
+        key={page}
         src={
           assetPrefix +
           (dynamicBuildId
@@ -623,6 +624,7 @@ export class NextScript extends Component<OriginProps> {
         <script
           async
           id={`__NEXT_PAGE__${page}`}
+          key={`${page}-modern`}
           src={
             assetPrefix +
             getOptionalModernScriptVariant(
@@ -650,6 +652,7 @@ export class NextScript extends Component<OriginProps> {
             : `/_next/static/${buildId}/pages/_app.js`) +
           _devOnlyInvalidateCacheQueryString
         }
+        key="_app"
         nonce={this.props.nonce}
         crossOrigin={this.props.crossOrigin || process.crossOrigin}
         {...(process.env.__NEXT_MODERN_BUILD ? { noModule: true } : {})}
@@ -665,6 +668,7 @@ export class NextScript extends Component<OriginProps> {
               : `/_next/static/${buildId}/pages/_app.module.js`) +
             _devOnlyInvalidateCacheQueryString
           }
+          key="_app-modern"
           nonce={this.props.nonce}
           crossOrigin={this.props.crossOrigin || process.crossOrigin}
           type="module"

test/integration/app-document/test/index.test.js

@@ -14,19 +14,35 @@ import rendering from './rendering'
 import client from './client'
 import csp from './csp'
 
-const context = {}
+const context = {
+  output: ''
+}
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
 
+const collectOutput = message => {
+  context.output += message
+}
+
 describe('Document and App', () => {
   beforeAll(async () => {
     context.appPort = await findPort()
-    context.server = await launchApp(join(__dirname, '../'), context.appPort)
+    context.server = await launchApp(join(__dirname, '../'), context.appPort, {
+      onStdout: collectOutput,
+      onStderr: collectOutput
+    })
 
     // pre-build all pages at the start
     await Promise.all([renderViaHTTP(context.appPort, '/')])
   })
   afterAll(() => killApp(context.server))
 
+  it('should not have any missing key warnings', async () => {
+    await renderViaHTTP(context.appPort, '/')
+    expect(context.output).not.toMatch(
+      /Each child in a list should have a unique "key" prop/
+    )
+  })
+
   rendering(
     context,
     'Rendering via HTTP',

test/lib/next-test-utils.js

@@ -138,11 +138,18 @@ export function runNextCommandDev (argv, stdOut, opts = {}) {
       if (/ready on/i.test(message)) {
         resolve(stdOut ? message : instance)
       }
+      if (typeof opts.onStdout === 'function') {
+        opts.onStdout(message)
+      }
       process.stdout.write(message)
     }
 
     function handleStderr (data) {
-      process.stderr.write(data.toString())
+      const message = data.toString()
+      if (typeof opts.onStderr === 'function') {
+        opts.onStderr(message)
+      }
+      process.stderr.write(message)
     }
 
     instance.stdout.on('data', handleStdout)
@@ -160,8 +167,8 @@ export function runNextCommandDev (argv, stdOut, opts = {}) {
 }
 
 // Launch the app in dev mode.
-export function launchApp (dir, port) {
-  return runNextCommandDev([dir, '-p', port])
+export function launchApp (dir, port, opts) {
+  return runNextCommandDev([dir, '-p', port], undefined, opts)
 }
 
 export function nextBuild (dir, args = [], opts = {}) {