Fix flight loader for shared components #34692

shuding · 2022-02-22T18:31:04Z

Fixes #34594, closes #33544. This PR adds an extra query parameter to the flight loader to indicate the import context of a shared component. Now we have these cases:

.server.[ext]: server component
?__sc_server__: server component
?__sc_client__: client module reference
The rest: bundled client component

It also ensures that the same shared component is created as two instances in different import contexts.

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

huozhi · 2022-02-28T10:35:50Z

packages/next/build/webpack/loaders/next-flight-server-loader.ts

              isNextComponent(importSource) ||
              isImageImport(importSource)
            )
          ) {
-            continue
+            if (
+              ['react/jsx-runtime', 'react/jsx-dev-runtime'].includes(


This looks tricky, is there any other library having the similar reason that we need to skip?

Let's add a comment for it later

This is a special case to avoid the Duplicate React error. Since we already include React in the SSR runtime, here we can't create a new module with the ?__rsc_server__ query.

We might be able to change that with a webpack alias (react/jsx-runtime?__rsc_server__ -> react/jsx-runtime), but not sure if that's more readable than this.

packages/next/build/webpack/loaders/next-flight-server-loader.ts

ijjk · 2022-02-28T12:42:27Z

Failing test suites

Commit: a452d5f

yarn testheadless test/integration/async-modules/test/index.test.js

Async modules > production mode > can render async AMP pages

Expand output

● Async modules › production mode › can render async AMP pages

TIMED OUT: just now

10 seconds ago

  474 |
  475 |   if (hardError) {
> 476 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  477 |   }
  478 |   return false
  479 | }

  at Object.check (lib/next-test-utils.js:476:11)
  at Object.<anonymous> (integration/async-modules/test/index.test.js:85:7)

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

yarn testheadless test/integration/image-component/default/test/index.test.js

Image Component Tests > dev mode > should be valid W3C HTML
Image Component Tests > server mode > should be valid W3C HTML
Image Component Tests > serverless mode > should be valid W3C HTML

Expand output

● Image Component Tests › dev mode › should be valid W3C HTML

Validator returned unexpected statuscode: 503

  at Request._callback (../node_modules/html-validator/lib/w3c-validator.js:15:23)
  at Request.self.callback (../node_modules/request/request.js:185:22)
  at Request.<anonymous> (../node_modules/request/request.js:1154:10)
  at IncomingMessage.<anonymous> (../node_modules/request/request.js:1076:12)

● Image Component Tests › server mode › should be valid W3C HTML

Validator returned unexpected statuscode: 503

  at Request._callback (../node_modules/html-validator/lib/w3c-validator.js:15:23)
  at Request.self.callback (../node_modules/request/request.js:185:22)
  at Request.<anonymous> (../node_modules/request/request.js:1154:10)
  at IncomingMessage.<anonymous> (../node_modules/request/request.js:1076:12)

● Image Component Tests › serverless mode › should be valid W3C HTML

socket hang up

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

ijjk · 2022-02-28T12:50:54Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
buildDuration	18.5s	19s	⚠️ +492ms
buildDurationCached	7.3s	7.3s	-21ms
nodeModulesSize	368 MB	368 MB	⚠️ +1.71 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.528	3.682	⚠️ +0.15
/ avg req/sec	708.54	678.93	⚠️ -29.61
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.627	1.68	⚠️ +0.05
/error-in-render avg req/sec	1536.59	1488.48	⚠️ -48.11

Client Bundles (main, webpack)

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.8 kB	27.8 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.5 kB	71.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js shu/4a1c	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/4a1c	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	5.05 kB	5.05 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
buildDuration	22.4s	22.5s	⚠️ +40ms
buildDurationCached	7.3s	7.3s	⚠️ +5ms
nodeModulesSize	368 MB	368 MB	⚠️ +1.71 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.497	3.561	⚠️ +0.06
/ avg req/sec	715	702.1	⚠️ -12.9
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.624	1.609	-0.02
/error-in-render avg req/sec	1539.02	1553.92	+14.9

Client Bundles (main, webpack)

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.1 kB	42.1 kB	✓
main-HASH.js gzip	27.8 kB	27.8 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.6 kB	71.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js shu/4a1c	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/4a1c	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	5.08 kB	5.08 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.28 kB	2.28 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js shu/4a1c	Change
index.html gzip	533 B	533 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: a452d5f

fix flight loader for shared components

b491b4a

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

This comment has been minimized.

Sign in to view

add tests

21d9b0e

shuding added this to In Progress in React Server Components in Next.js (Alpha) Feb 22, 2022

This comment has been minimized.

Sign in to view

fix condition

e5a76f3

shuding marked this pull request as ready for review February 23, 2022 12:47

shuding requested review from timneutkens, ijjk, padmaia and huozhi as code owners February 23, 2022 12:47

This comment has been minimized.

Sign in to view

huozhi reviewed Feb 28, 2022

View reviewed changes

packages/next/build/webpack/loaders/next-flight-server-loader.ts Show resolved Hide resolved

Merge branch 'canary' into shu/4a1c

a452d5f

huozhi approved these changes Feb 28, 2022

View reviewed changes

React Server Components in Next.js (Alpha) automation moved this from In Progress to In review Feb 28, 2022

shuding merged commit 8ba2aec into vercel:canary Feb 28, 2022

React Server Components in Next.js (Alpha) automation moved this from In review to Done Feb 28, 2022

shuding deleted the shu/4a1c branch February 28, 2022 15:00

github-actions bot locked as resolved and limited conversation to collaborators Mar 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix flight loader for shared components #34692

Fix flight loader for shared components #34692

shuding commented Feb 22, 2022 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

huozhi Feb 28, 2022

huozhi Feb 28, 2022

shuding Feb 28, 2022 •

edited

shuding Feb 28, 2022

ijjk commented Feb 28, 2022 •

edited

ijjk commented Feb 28, 2022

Fix flight loader for shared components #34692

Fix flight loader for shared components #34692

Conversation

shuding commented Feb 22, 2022 • edited

Bug

Feature

Documentation / Examples

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

huozhi Feb 28, 2022

Choose a reason for hiding this comment

huozhi Feb 28, 2022

Choose a reason for hiding this comment

shuding Feb 28, 2022 • edited

Choose a reason for hiding this comment

shuding Feb 28, 2022

Choose a reason for hiding this comment

ijjk commented Feb 28, 2022 • edited

Failing test suites

ijjk commented Feb 28, 2022

Stats from current PR

shuding commented Feb 22, 2022 •

edited

shuding Feb 28, 2022 •

edited

ijjk commented Feb 28, 2022 •

edited