Fallback to functional document when no custom document with react 18 #36348

huozhi · 2022-04-21T11:47:07Z

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

…ing react 18

ijjk · 2022-04-21T11:53:03Z

Failing test suites

Commit: 19ed5d0

yarn testheadless test/integration/app-document-style-fragment/test/index.test.js

Custom Document Fragment Styles > correctly adds styles from fragment styles key

Expand output

● Custom Document Fragment Styles › correctly adds styles from fragment styles key

expect(received).toMatch(expected)

Expected pattern: /background:(.*|)hotpink/
Received string:  "p.jsx-70383f31d13fa810{font-size:16.4px}"

  35 |
  36 |     const styles = $('style').text()
> 37 |     expect(styles).toMatch(/background:(.*|)hotpink/)
     |                    ^
  38 |     expect(styles).toMatch(/font-size:(.*|)16\.4px/)
  39 |   })
  40 | })

  at Object.<anonymous> (integration/app-document-style-fragment/test/index.test.js:37:20)

Read more about building and testing Next.js in contributing.md.

yarn testheadless test/integration/app-document-remove-hmr/test/index.test.js

_app removal HMR > should HMR when _document is removed

Expand output

● _app removal HMR › should HMR when _document is removed

expect(received).toContain(expected) // indexOf

Expected substring: "custom _document"
Received string:    "<head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><meta name=\"next-head-count\" content=\"2\"><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1650541976371\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1650541976371\" defer=\"\"></script><script src=\"/_next/static/chunks/main.js?ts=1650541976371\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1650541976371\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/index.js?ts=1650541976371\" defer=\"\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1650541976371\" defer=\"\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1650541976371\" defer=\"\"></script><script src=\"/_next/static/development/_middlewareManifest.js?ts=1650541976371\" defer=\"\"></script><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><div id=\"__next\"><p>custom _app</p><p>index page</p></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1650541976371\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/\",\"query\":{},\"buildId\":\"development\",\"nextExport\":true,\"autoExport\":true,\"isFallback\":false,\"scriptLoader\":[]}</script><div id=\"__next-build-watcher\" style=\"position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;\"></div><next-route-announcer><p aria-live=\"assertive\" id=\"__next-route-announcer__\" role=\"alert\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;\"></p></next-route-announcer></body>"

  79 |
  80 |       const html = await browser.eval('document.documentElement.innerHTML')
> 81 |       expect(html).toContain('custom _document')
     |                    ^
  82 |
  83 |       await fs.rename(documentPage, documentPage + '.bak')
  84 |

  at Object.<anonymous> (integration/app-document-remove-hmr/test/index.test.js:81:20)

Read more about building and testing Next.js in contributing.md.

yarn testheadless test/integration/app-document-add-hmr/test/index.test.js

_app/_document add HMR > should HMR when _document is added

Expand output

● _app/_document add HMR › should HMR when _document is added

TIMED OUT: success

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="next-head-count" content="2"><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1650541994940"></script><script src="/_next/static/chunks/webpack.js?ts=1650541994940" defer=""></script><script src="/_next/static/chunks/main.js?ts=1650541994940" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1650541994940" defer=""></script><script src="/_next/static/chunks/pages/index.js?ts=1650541994940" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1650541994940" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1650541994940" defer=""></script><script src="/_next/static/development/_middlewareManifest.js?ts=1650541994940" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><div id="__next"><p>index page</p></div><script src="/_next/static/chunks/react-refresh.js?ts=1650541994940"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script><div id="__next-build-watcher" style="position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;"></div><next-route-announcer><p aria-live="assertive" id="__next-route-announcer__" role="alert" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;"></p></next-route-announcer></body>

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at Object.<anonymous> (integration/app-document-add-hmr/test/index.test.js:97:7)

Read more about building and testing Next.js in contributing.md.

yarn testheadless test/development/basic/styled-components.test.ts

styled-components SWC transform > should contain styles in initial HTML

Expand output

● styled-components SWC transform › should contain styles in initial HTML

expect(received).toContain(expected) // indexOf

Expected substring: "background:transparent"
Received string:    "<!DOCTYPE html><html><head><style data-next-hide-fouc=\"true\">body{display:none}</style><noscript data-next-hide-fouc=\"true\"><style>body{display:block}</style></noscript><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1650542363665\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1650542363665\" defer=\"\"></script><script src=\"/_next/static/chunks/main.js?ts=1650542363665\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1650542363665\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/index.js?ts=1650542363665\" defer=\"\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1650542363665\" defer=\"\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1650542363665\" defer=\"\"></script><script src=\"/_next/static/development/_middlewareManifest.js?ts=1650542363665\" defer=\"\"></script><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><div id=\"__next\"><div><a href=\"https://github.com/styled-components/styled-components\" target=\"_blank\" rel=\"noopener\" class=\"pages__Button-sc-4ba1e4ce-0 bQHKBf\">GitHub</a><a id=\"btn\" href=\"/docs\" class=\"pages__Button-sc-4ba1e4ce-0 bzzkhS\">Documentation</a></div></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1650542363665\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/\",\"query\":{},\"buildId\":\"development\",\"nextExport\":true,\"autoExport\":true,\"isFallback\":false,\"scriptLoader\":[]}</script></body></html>"

  71 |   it('should contain styles in initial HTML', async () => {
  72 |     const html = await renderViaHTTP(next.url, '/')
> 73 |     expect(html).toContain('background:transparent')
     |                  ^
  74 |     expect(html).toContain('color:white')
  75 |   })
  76 | })

  at Object.<anonymous> (development/basic/styled-components.test.ts:73:18)

Read more about building and testing Next.js in contributing.md.

yarn testheadless test/integration/serverless-runtime-configs/test/index.test.js

Serverless runtime configs > experimental-serverless-trace mode > should support runtime configs in serverless mode (dev)
Serverless runtime configs > legacy serverless mode > should support runtime configs in serverless mode (dev)

Expand output

● Serverless runtime configs › legacy serverless mode › should support runtime configs in serverless mode (dev)

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)

  121 |
  122 |     // _document doesn't update on client so should be the same
> 123 |     expect(JSON.parse(docSsrConfig)).toEqual(expectedSsrConfig)
      |                 ^
  124 |     expect(JSON.parse(docClientConfig)).toEqual(expectedSsrConfig)
  125 |
  126 |     expect(JSON.parse(apiJson)).toEqual(expectedSsrConfig)

  at testRuntimeConfig (integration/serverless-runtime-configs/test/index.test.js:123:17)
  at Object.<anonymous> (integration/serverless-runtime-configs/test/index.test.js:165:5)

● Serverless runtime configs › experimental-serverless-trace mode › should support runtime configs in serverless mode (dev)

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)

  121 |
  122 |     // _document doesn't update on client so should be the same
> 123 |     expect(JSON.parse(docSsrConfig)).toEqual(expectedSsrConfig)
      |                 ^
  124 |     expect(JSON.parse(docClientConfig)).toEqual(expectedSsrConfig)
  125 |
  126 |     expect(JSON.parse(apiJson)).toEqual(expectedSsrConfig)

  at testRuntimeConfig (integration/serverless-runtime-configs/test/index.test.js:123:17)
  at Object.<anonymous> (integration/serverless-runtime-configs/test/index.test.js:165:5)

Read more about building and testing Next.js in contributing.md.

yarn testheadless test/integration/script-loader/test/index.test.js

Next.js Script - Primary Strategies > onload fires correctly
Next.js Script - Primary Strategies > Does not duplicate inline scripts

Expand output

● Next.js Script - Primary Strategies › onload fires correctly

page.waitForSelector: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "#text"
============================================================

  304 |     return this.chain(() => {
  305 |       return page
> 306 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  307 |         .then(async (el) => {
  308 |           // it seems selenium waits longer and tests rely on this behavior
  309 |           // so we wait for the load event fire before returning

  at lib/browsers/playwright.ts:306:10

● Next.js Script - Primary Strategies › Does not duplicate inline scripts

page.waitForSelector: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "#text"
============================================================

  304 |     return this.chain(() => {
  305 |       return page
> 306 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  307 |         .then(async (el) => {
  308 |           // it seems selenium waits longer and tests rely on this behavior
  309 |           // so we wait for the load event fire before returning

  at lib/browsers/playwright.ts:306:10

Read more about building and testing Next.js in contributing.md.

yarn testheadless test/integration/missing-document-component-error/test/index.test.js

Missing _document components error > should detect missing Html component
Missing _document components error > should detect missing Head component
Missing _document components error > should detect missing Main component
Missing _document components error > should detect missing NextScript component
Missing _document components error > should detect multiple missing document components

Expand output

● Missing _document components error › should detect missing Html component

TIMED OUT: /missing-document-component/

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at checkMissing (integration/missing-document-component-error/test/index.test.js:31:3)
  at Object.<anonymous> (integration/missing-document-component-error/test/index.test.js:40:5)

● Missing _document components error › should detect missing Head component

TIMED OUT: /missing-document-component/

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at checkMissing (integration/missing-document-component-error/test/index.test.js:31:3)
  at Object.<anonymous> (integration/missing-document-component-error/test/index.test.js:65:5)

● Missing _document components error › should detect missing Main component

TIMED OUT: /missing-document-component/

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at checkMissing (integration/missing-document-component-error/test/index.test.js:31:3)
  at Object.<anonymous> (integration/missing-document-component-error/test/index.test.js:89:5)

● Missing _document components error › should detect missing NextScript component

TIMED OUT: /missing-document-component/

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at checkMissing (integration/missing-document-component-error/test/index.test.js:31:3)
  at Object.<anonymous> (integration/missing-document-component-error/test/index.test.js:113:5)

● Missing _document components error › should detect multiple missing document components

TIMED OUT: /missing-document-component/

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at checkMissing (integration/missing-document-component-error/test/index.test.js:31:3)
  at Object.<anonymous> (integration/missing-document-component-error/test/index.test.js:136:5)

Read more about building and testing Next.js in contributing.md.

ijjk · 2022-04-21T12:15:31Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js render-once	Change
buildDuration	21.7s	21.6s	-50ms
buildDurationCached	8.3s	7.4s	-836ms
nodeModulesSize	481 MB	481 MB	⚠️ +271 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js render-once	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.687	4.741	⚠️ +0.05
/ avg req/sec	533.42	527.3	⚠️ -6.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.173	2.24	⚠️ +0.07
/error-in-render avg req/sec	1150.5	1116.3	⚠️ -34.2

Client Bundles (main, webpack)

	vercel/next.js canary	huozhi/next.js render-once	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.5 kB	28.5 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js render-once	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js render-once	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.04 kB	3.04 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.74 kB	5.74 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.36 kB	2.36 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js render-once	Change
_buildManifest.js gzip	461 B	461 B	✓
Overall change	461 B	461 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js render-once	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js render-once	Change
buildDuration	24s	24.5s	⚠️ +538ms
buildDurationCached	8.2s	8.2s	-27ms
nodeModulesSize	481 MB	481 MB	⚠️ +271 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	huozhi/next.js render-once	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.75	4.759	⚠️ +0.01
/ avg req/sec	526.28	525.32	⚠️ -0.96
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.233	2.215	-0.02
/error-in-render avg req/sec	1119.63	1128.85	+9.22

Client Bundles (main, webpack)

	vercel/next.js canary	huozhi/next.js render-once	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.9 kB	28.9 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.8 kB	72.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js render-once	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js render-once	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	325 B	325 B	✓
dynamic-HASH.js gzip	3.02 kB	3.02 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.79 kB	5.79 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.44 kB	2.44 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.1 kB	16.1 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js render-once	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js render-once	Change
index.html gzip	530 B	530 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Commit: 19ed5d0

huozhi · 2022-04-21T15:43:57Z

We'll use the solution in #36352

Should fallback to functional document when no custom document and us…

19ed5d0

…ing react 18

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Apr 21, 2022

huozhi closed this Apr 21, 2022

huozhi deleted the render-once branch April 21, 2022 15:44

github-actions bot locked as resolved and limited conversation to collaborators May 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fallback to functional document when no custom document with react 18 #36348

Fallback to functional document when no custom document with react 18 #36348

huozhi commented Apr 21, 2022 •

edited

ijjk commented Apr 21, 2022 •

edited

ijjk commented Apr 21, 2022

huozhi commented Apr 21, 2022

Fallback to functional document when no custom document with react 18 #36348

Fallback to functional document when no custom document with react 18 #36348

Conversation

huozhi commented Apr 21, 2022 • edited

Bug

ijjk commented Apr 21, 2022 • edited

Failing test suites

ijjk commented Apr 21, 2022

Stats from current PR

huozhi commented Apr 21, 2022

huozhi commented Apr 21, 2022 •

edited

ijjk commented Apr 21, 2022 •

edited