Fix client component hydration #37134

shuding · 2022-05-23T19:11:22Z

This PR makes sure that chunks of client components can be loaded via __webpack_chunk_load__, and hydrated correctly inside viewsDir.

Side note: we have to get rid of [contenthash] from the chunk filename because of a conflict currently which can be resolved later.

Bug

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

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

ijjk · 2022-05-23T19:23:56Z

Failing test suites

Commit: 840a43a

yarn testheadless test/e2e/views-dir/index.test.ts

views dir > server components > should include client component layout with server component route > should include it client-side
views dir > server components > should serve client component > should serve client-side

Expand output

● views dir › server components › should serve client component › should serve client-side

page.waitForFunction: Evaluation failed: TypeError: Cannot read properties of null (reading 'textContent')

  at eval (eval at predicate (eval at evaluate (:3:1339))../, <anonymous>:1:28)
      at eval (<anonymous>)
  at predicate (eval at evaluate (:3:1339)../, <anonymous>:8:27)
  at eval (eval at evaluate (:3:1339)../, <anonymous>:22:101)
  at i (../<anonymous>:3:37685)
  at Object.run (../<anonymous>:3:38253)
  at eval (eval at evaluate (:3:1339)../, <anonymous>:1:14)
  at t.default.evaluate (../<anonymous>:3:1362)
  at t.default.<anonymous> (../<anonymous>:1:44)
  =========================== logs ===========================
    Cannot read properties of null (reading 'textContent')
  ============================================================
  at lib/browsers/playwright.ts:318:19

● views dir › server components › should include client component layout with server component route › should include it client-side

page.waitForFunction: Evaluation failed: TypeError: Cannot read properties of null (reading 'textContent')

  at eval (eval at predicate (eval at evaluate (:3:1339))../, <anonymous>:1:29)
      at eval (<anonymous>)
  at predicate (eval at evaluate (:3:1339)../, <anonymous>:8:27)
  at eval (eval at evaluate (:3:1339)../, <anonymous>:22:101)
  at i (../<anonymous>:3:37685)
  at Object.run (../<anonymous>:3:38253)
  at eval (eval at evaluate (:3:1339)../, <anonymous>:1:14)
  at t.default.evaluate (../<anonymous>:3:1362)
  at t.default.<anonymous> (../<anonymous>:1:44)
  =========================== logs ===========================
    Cannot read properties of null (reading 'textContent')
  ============================================================
  at lib/browsers/playwright.ts:318:19

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

ijjk · 2022-05-23T19:57:53Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/87a3	Change
buildDuration	15.6s	15.2s	-327ms
buildDurationCached	6.3s	6.2s	-25ms
nodeModulesSize	494 MB	494 MB	⚠️ +3.32 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	shuding/next.js shu/87a3	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.722	3.759	⚠️ +0.04
/ avg req/sec	671.65	665.07	⚠️ -6.58
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.171	1.151	-0.02
/error-in-render avg req/sec	2134.34	2172.37	+38.03

Client Bundles (main, webpack)

	vercel/next.js canary	shuding/next.js shu/87a3	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	29.2 kB	29.2 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	73 kB	73 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js shu/87a3	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js shu/87a3	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.73 kB	5.73 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js shu/87a3	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js shu/87a3	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/87a3	Change
buildDuration	17.7s	17.9s	⚠️ +169ms
buildDurationCached	6.2s	6.3s	⚠️ +34ms
nodeModulesSize	494 MB	494 MB	⚠️ +3.32 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js shu/87a3	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.756	3.719	-0.04
/ avg req/sec	665.59	672.3	+6.71
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.161	1.165	0
/error-in-render avg req/sec	2153.99	2146.81	⚠️ -7.18

Client Bundles (main, webpack)

	vercel/next.js canary	shuding/next.js shu/87a3	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.7 kB	29.7 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	74 kB	74 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js shu/87a3	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js shu/87a3	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.89 kB	2.89 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.82 kB	5.82 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js shu/87a3	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js shu/87a3	Change
index.html gzip	532 B	532 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: 2915a1d

Follow-up PR for #37134, this PR adds back the hash in each chunk's filename. This `chunks` in the flight manifest will now be `chunkId:chunkFilename` with this PR, and `globalThis.__next_chunk_load__` then handles the chunk registration (uses chunkId) and chunk loading (uses chunkFilename). (Q: how can we port this to React?) We can't use `[contenthash]` but only `[chunkhash]` because at the stage of generating the flight manifest, the content isn't finalized and the hash changes after that. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`

Follow-up PR for vercel#37134, this PR adds back the hash in each chunk's filename. This `chunks` in the flight manifest will now be `chunkId:chunkFilename` with this PR, and `globalThis.__next_chunk_load__` then handles the chunk registration (uses chunkId) and chunk loading (uses chunkFilename). (Q: how can we port this to React?) We can't use `[contenthash]` but only `[chunkhash]` because at the stage of generating the flight manifest, the content isn't finalized and the hash changes after that. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`

shuding added 2 commits May 23, 2022 21:07

dynamically load chunks

32ffff8

enable test

102ac43

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

fix params

37267fc

fix

8a70749

shuding added 7 commits May 24, 2022 00:37

add hydrated check

2409a05

Merge branch 'canary' into shu/87a3

a9a0b81

tweak tests

840a43a

change back tests

3bbdb7e

bug fix

d29dca6

add missing __webpack_chunk_load__

f7f7d30

only include chunks for viewsDir

56afc19

huozhi approved these changes May 24, 2022

View reviewed changes

shuding marked this pull request as ready for review May 24, 2022 14:01

shuding requested review from timneutkens, ijjk and padmaia as code owners May 24, 2022 14:01

Merge branch 'canary' into shu/87a3

682236d

shuding changed the title ~~Fix problem in hydration~~ Fix client component hydration May 24, 2022

ijjk approved these changes May 24, 2022

View reviewed changes

Merge branch 'canary' into shu/87a3

2915a1d

timneutkens approved these changes May 24, 2022

View reviewed changes

kodiakhq bot merged commit 2a89c19 into vercel:canary May 24, 2022

shuding deleted the shu/87a3 branch May 24, 2022 14:54

shuding mentioned this pull request May 24, 2022

Use customized chunk loading implementation #37163

Merged

10 tasks

github-actions bot locked as resolved and limited conversation to collaborators Jun 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix client component hydration #37134

Fix client component hydration #37134

shuding commented May 23, 2022 •

edited

Loading

ijjk commented May 23, 2022 •

edited

Loading

ijjk commented May 23, 2022 •

edited

Loading

Fix client component hydration #37134

Fix client component hydration #37134

Conversation

shuding commented May 23, 2022 • edited Loading

Bug

Feature

Documentation / Examples

ijjk commented May 23, 2022 • edited Loading

Failing test suites

ijjk commented May 23, 2022 • edited Loading

Stats from current PR

shuding commented May 23, 2022 •

edited

Loading

ijjk commented May 23, 2022 •

edited

Loading

ijjk commented May 23, 2022 •

edited

Loading