Fix <noscript> children in next/head #18108

TyMick · 2020-10-21T21:48:33Z

This is related to #17770 (and #17920) in that it deals with a change introduced in #16758, but I ran into a slightly different issue. Rather than trying to add a React component to next/head, I've been putting a <noscript> element with a <meta> child in my next/head.

Here's a Shortcut component I've been using on a static site to make client-side redirects:

export default function Shortcut({ url, as }) {
  const router = useRouter();

  useEffect(() => {
    if (as) {
      router.push(url, as);
    } else if (url[0] === "/") {
      router.push(url);
    } else {
      window.location = url;
    }
  }, []);

  return (
    <>
      <Head>
        <noscript>
          <meta httpEquiv="refresh" content={`0;url=${as || url}`} />
        </noscript>
        <link rel="canonical" href={as || url} />
      </Head>
      <Container fluid as="p" style={{ textAlign: "left" }}>
        Redirecting to{" "}
        {as ? (
          <A href={url} as={as}>{`https://tymick.me${as}`}</A>
        ) : url[0] === "/" ? (
          <A href={url}>{`https://tymick.me${url}`}</A>
        ) : (
          <a href={url}>{url}</a>
        )}
        &hellip;
      </Container>
    </>
  );
}

I put the <meta httpEquiv="refresh" inside a <noscript> as a fallback—if JavaScript is enabled, it'd rather use the code in my useEffect function to redirect the user.

This worked fine until v9.5.4, when this bit was added:

next.js/packages/next/next-server/server/render.tsx

Lines 260 to 275 in 755934d

    
           head: React.Children.toArray(docProps.head || []) 
        
             .map((elem) => { 
        
               const { children } = elem?.props 
        
               return [ 
        
                 elem?.type, 
        
                 { 
        
                   ...elem?.props, 
        
                   children: children 
        
                     ? typeof children === 'string' 
        
                       ? children 
        
                       : children.join('') 
        
                     : undefined, 
        
                 }, 
        
               ] 
        
             }) 
        
             .filter(Boolean) as any,

...and now, when my <noscript><meta ... /></noscript> encounters that, I get the following error:

TypeError: children.join is not a function
    at .../tywmick.github.io/node_modules/next/dist/next-server/server/render.js:17:275
    at Array.map (<anonymous>)
    at renderDocument (.../tywmick.github.io/node_modules/next/dist/next-server/server/render.js:17:86)
    at renderToHTML (.../tywmick.github.io/node_modules/next/dist/next-server/server/render.js:52:103)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async .../tywmick.github.io/node_modules/next/dist/next-server/server/next-server.js:81:66
    at async __wrapper (.../tywmick.github.io/node_modules/next/dist/lib/coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (.../tywmick.github.io/node_modules/next/dist/next-server/server/next-server.js:106:365)
    at async DevServer.renderToHTML (.../tywmick.github.io/node_modules/next/dist/next-server/server/next-server.js:107:656)
    at async DevServer.renderToHTML (.../tywmick.github.io/node_modules/next/dist/server/next-dev-server.js:34:578)

Apparently when children is that <meta> element, it fails typeof children === 'string', so it attempts to call children.join(''), and DOM elements have no join() method.

All that to say, here's my little fix: changing...

children: children 
  ? typeof children === 'string' 
    ? children 
    : children.join('') 
  : undefined,

...to...

children: children 
  ? Array.isArray(children)
    ? children.join('')
    : children
  : undefined,

Does that accidentally miss any edge cases? That is, are we expecting any situations when children isn't an array but does have a join() method we want to use? If we need to be ready for something array-like that fails Array.isArray(children), I could change that part to "join" in children instead. 🤷🏼‍♂️

ijjk · 2020-10-21T21:57:42Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
buildDuration	11.2s	11.1s	-30ms
nodeModulesSize	91.2 MB	91.2 MB	⚠️ +9 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.107	2.099	-0.01
/ avg req/sec	1186.59	1190.8	+4.21
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.148	1.163	⚠️ +0.02
/error-in-render avg req/sec	2177.63	2148.72	⚠️ -28.91

Client Bundles (main, webpack, commons)

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-23d7afb..be6f.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ccae7c3..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	994 B	994 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
buildDuration	12.3s	12.3s	⚠️ +10ms
nodeModulesSize	91.2 MB	91.2 MB	⚠️ +9 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-23d7afb..be6f.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ccae7c3..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	tywmick/next.js noscript-in-head	Change
_error.js	1.06 MB	1.06 MB	-3 B
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	-3 B
link.js	1.1 MB	1.1 MB	-3 B
routerDirect.js	1.1 MB	1.1 MB	-3 B
withRouter.js	1.1 MB	1.1 MB	-3 B
Overall change	5.42 MB	5.42 MB	-15 B

Commit: f4d8ebf

ijjk · 2020-10-21T22:06:54Z

Failing test suites

Commit: 64a0cc2

test/integration/font-optimization/test/index.test.js

Font optimization for SSR apps > should minify the css
Font optimization for emulated serverless apps > should minify the css
Font optimization for serverless apps > should minify the css

Expand output

● Font optimization for SSR apps › should minify the css

expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Object {
    "https://fonts.googleapis.com/css2?family=Modak": "@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEsnME.woff) format('woff')}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMB-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF6,U+1CF8-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FB}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMO-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMA-hR77LKV.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
    "https://fonts.googleapis.com/css2?family=Roboto:wght@700": "@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
-   "https://fonts.googleapis.com/css?family=Voces": "@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
+   "https://fonts.googleapis.com/css?family=Voces": "@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff?ce=43710006) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
  }

  101 |     })
  102 | 
> 103 |     expect(testCss).toStrictEqual(snapshotCss)
      |                     ^
  104 |   })
  105 | }
  106 | 

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:103:21)

● Font optimization for serverless apps › should minify the css

expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Object {
    "https://fonts.googleapis.com/css2?family=Modak": "@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEsnME.woff) format('woff')}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMB-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF6,U+1CF8-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FB}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMO-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMA-hR77LKV.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
    "https://fonts.googleapis.com/css2?family=Roboto:wght@700": "@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
-   "https://fonts.googleapis.com/css?family=Voces": "@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
+   "https://fonts.googleapis.com/css?family=Voces": "@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff?ce=43710006) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
  }

  101 |     })
  102 | 
> 103 |     expect(testCss).toStrictEqual(snapshotCss)
      |                     ^
  104 |   })
  105 | }
  106 | 

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:103:21)

● Font optimization for emulated serverless apps › should minify the css

expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Object {
    "https://fonts.googleapis.com/css2?family=Modak": "@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEsnME.woff) format('woff')}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMB-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF6,U+1CF8-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FB}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMO-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMA-hR77LKV.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
    "https://fonts.googleapis.com/css2?family=Roboto:wght@700": "@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
-   "https://fonts.googleapis.com/css?family=Voces": "@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
+   "https://fonts.googleapis.com/css?family=Voces": "@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff?ce=43710006) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}",
  }

  101 |     })
  102 | 
> 103 |     expect(testCss).toStrictEqual(snapshotCss)
      |                     ^
  104 |   })
  105 | }
  106 | 

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:103:21)

TyMick · 2020-10-21T23:10:58Z

Not sure what's going on with the font optimization test suite. On my end it's saying that all 15 tests are passing, but it's also getting stuck after it says the tests have passed. Here's my output when I run yarn testheadless --testPathPattern "font-optimization":

yarn run v1.22.10
$ cross-env HEADLESS=true yarn testonly --testPathPattern font-optimization
$ jest --runInBand --testPathPattern font-optimization
  console.log test/lib/next-test-utils.js:101
    Running command "next build /Users/tymick/dev/vercel/next.js/test/integration/font-optimization/"

warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

ready - started server on http://localhost:60249
  console.log test/lib/next-test-utils.js:101
    Running command "next build /Users/tymick/dev/vercel/next.js/test/integration/font-optimization/"

warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

ready - started server on http://localhost:60269
  console.log test/lib/next-test-utils.js:101
    Running command "next build /Users/tymick/dev/vercel/next.js/test/integration/font-optimization/"

ready on 60285
serving /index
serving /static-head
serving /stars
warn  - Your custom Document (pages/_document) did not render all the required subcomponent.
Missing component: <Html />
Read how to fix here: https://err.sh/next.js/missing-document-component
 PASS  test/integration/font-optimization/test/index.test.js (26.24s)
  Font optimization for SSR apps
    ✓ should inline the google fonts for static pages (53ms)
    ✓ should inline the google fonts for static pages with Next/Head (5ms)
    ✓ should inline the google fonts for SSR pages (19ms)
    ✓ should skip this optimization for AMP pages (6ms)
    ✓ should minify the css (4ms)
  Font optimization for serverless apps
    ✓ should inline the google fonts for static pages (15ms)
    ✓ should inline the google fonts for static pages with Next/Head (3ms)
    ✓ should inline the google fonts for SSR pages (60ms)
    ✓ should skip this optimization for AMP pages (4ms)
    ✓ should minify the css (1ms)
  Font optimization for emulated serverless apps
    ✓ should inline the google fonts for static pages (8ms)
    ✓ should inline the google fonts for static pages with Next/Head (3ms)
    ✓ should inline the google fonts for SSR pages (100ms)
    ✓ should skip this optimization for AMP pages (2ms)
    ✓ should minify the css (1ms)

Test Suites: 1 passed, 1 total
Tests:       15 passed, 15 total
Snapshots:   0 total
Time:        26.553s, estimated 28s
Ran all test suites matching /font-optimization/i.
serving /amp
Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

It stalls at the end of this, so that I have to ^C to get back to a shell prompt.

timneutkens · 2021-01-24T13:41:50Z

Going to close this as it's stale and has merge conflicts. Could you open a new PR including integration tests? Thanks!

Clarify condition for joining array elements

f4d8ebf

TyMick requested review from Timer, ijjk, lfades and timneutkens as code owners October 21, 2020 21:48

ijjk added the type: next label Oct 21, 2020

Merge branch 'canary' into noscript-in-head

64a0cc2

timneutkens closed this Jan 24, 2021

vercel locked as resolved and limited conversation to collaborators Jan 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix <noscript> children in next/head #18108

Fix <noscript> children in next/head #18108

Uh oh!

TyMick commented Oct 21, 2020

Uh oh!

ijjk commented Oct 21, 2020

Uh oh!

ijjk commented Oct 21, 2020

Uh oh!

TyMick commented Oct 21, 2020

Uh oh!

timneutkens commented Jan 24, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	head: React.Children.toArray(docProps.head \|\| [])
	.map((elem) => {
	const { children } = elem?.props
	return [
	elem?.type,
	{
	...elem?.props,
	children: children
	? typeof children === 'string'
	? children
	: children.join('')
	: undefined,
	},
	]
	})
	.filter(Boolean) as any,

Fix <noscript> children in next/head #18108

Fix <noscript> children in next/head #18108

Uh oh!

Conversation

TyMick commented Oct 21, 2020

Uh oh!

ijjk commented Oct 21, 2020

Stats from current PR

Uh oh!

ijjk commented Oct 21, 2020

Failing test suites

Uh oh!

TyMick commented Oct 21, 2020

Uh oh!

timneutkens commented Jan 24, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants