Skip undefined attribute in Head

packages/next/next-server/lib/head.tsx

@@ -140,8 +140,19 @@ function reduceComponents(
     .filter(unique())
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
-      const key = c.key || i
-      return React.cloneElement(c, { key })
+      const cleanProps: { [key: string]: string } = {}
+
+      Object.keys(c.props).forEach(key => {
+        let val = c.props[key]
+
+        // TODO: do we want to normalize null/true/false here also?
+        if (val === undefined) {
+          val = ''
+        }
+        cleanProps[key] = val
+      })
+
+      return React.cloneElement(c, { key: c.key || i, ...cleanProps })
     })
 }
 

test/integration/client-navigation/pages/head.js

@@ -16,6 +16,9 @@ export default () => (
 
       <meta content="my meta" />
 
+      {/* this will not render */}
+      <meta name="empty-content" content={undefined} />
+
       {/* allow duplicates for specific tags */}
       <meta property="article:tag" content="tag1" key="tag1key" />
       <meta property="article:tag" content="tag2" key="tag2key" />

test/integration/client-navigation/test/index.test.js

@@ -1097,6 +1097,15 @@ describe('Client Navigation', () => {
     await browser.close()
   })
 
+  it('should handle undefined prop in head client-side', async () => {
+    const browser = await webdriver(context.appPort, '/head')
+    const value = await browser
+      .elementByCss('meta[name="empty-content"]')
+      .getAttribute('content')
+
+    expect(value).toBe('')
+  })
+
   renderingSuite(
     (p, q) => renderViaHTTP(context.appPort, p, q),
     (p, q) => fetchViaHTTP(context.appPort, p, q)

test/integration/client-navigation/test/rendering.js

@@ -17,6 +17,14 @@ export default function(render, fetch) {
       expect(html.includes('My component!')).toBeTruthy()
     })
 
+    it('should handle undefined prop in head server-side', async () => {
+      const html = await render('/head')
+      const $ = cheerio.load(html)
+      const value = $('meta[name="empty-content"]').attr('content')
+
+      expect(value).toBe('')
+    })
+
     test('renders with fragment syntax', async () => {
       const html = await render('/fragment-syntax')
       expect(html.includes('My component!')).toBeTruthy()