Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Flight] Respect async flag in client manifest #30959

Conversation

unstubbable
Copy link
Contributor

In #26624, the ability to mark a client reference module as async in the React client manifest was removed because it was not utilized by Webpack, neither in ReactFlightWebpackPlugin nor in Next.js. However, some bundlers and frameworks are sophisticated enough to properly handle and identify async ESM modules (e.g., client component modules with top-level await), most notably Turbopack in Next.js. Therefore, we need to consider the async flag in the client manifest when resolving the client reference metadata on the server. The SSR manifest cannot override this flag, meaning that if a module is async, it must remain async in all client environments.

x-ref: vercel/next.js#70022

Copy link

vercel bot commented Sep 13, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 13, 2024 7:44pm

@react-sizebot
Copy link

react-sizebot commented Sep 13, 2024

Comparing: 633a0fe...2693598

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB +0.11% 1.82 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 508.72 kB 508.72 kB = 90.98 kB 90.98 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.16% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 513.65 kB 513.65 kB = 91.70 kB 91.71 kB
facebook-www/ReactDOM-prod.classic.js = 602.81 kB 602.81 kB = 106.63 kB 106.63 kB
facebook-www/ReactDOM-prod.modern.js = 579.08 kB 579.08 kB = 102.76 kB 102.76 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.36% 91.88 kB 92.21 kB +0.39% 18.80 kB 18.88 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.36% 91.88 kB 92.21 kB +0.39% 18.80 kB 18.88 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.36% 91.88 kB 92.21 kB +0.39% 18.80 kB 18.88 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.35% 92.20 kB 92.53 kB +0.40% 18.90 kB 18.97 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.35% 92.20 kB 92.53 kB +0.40% 18.90 kB 18.97 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.35% 92.20 kB 92.53 kB +0.40% 18.90 kB 18.97 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.35% 92.37 kB 92.70 kB +0.35% 18.92 kB 18.98 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.35% 92.37 kB 92.70 kB +0.35% 18.92 kB 18.98 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.35% 92.37 kB 92.70 kB +0.35% 18.92 kB 18.98 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.35% 92.40 kB 92.72 kB +0.35% 18.91 kB 18.98 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.35% 92.40 kB 92.72 kB +0.35% 18.91 kB 18.98 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.35% 92.40 kB 92.72 kB +0.35% 18.91 kB 18.98 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.35% 94.41 kB 94.74 kB +0.37% 19.27 kB 19.34 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.35% 94.41 kB 94.74 kB +0.37% 19.27 kB 19.34 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.35% 94.41 kB 94.74 kB +0.37% 19.27 kB 19.34 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.34% 95.36 kB 95.69 kB +0.36% 19.48 kB 19.55 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.34% 95.36 kB 95.69 kB +0.36% 19.48 kB 19.55 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.34% 95.36 kB 95.69 kB +0.36% 19.48 kB 19.55 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.34% 95.39 kB 95.72 kB +0.36% 19.47 kB 19.55 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.34% 95.39 kB 95.72 kB +0.36% 19.47 kB 19.55 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.34% 95.39 kB 95.72 kB +0.36% 19.47 kB 19.55 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +0.33% 99.02 kB 99.35 kB +0.40% 19.83 kB 19.91 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +0.33% 99.34 kB 99.67 kB +0.40% 19.93 kB 20.01 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.js +0.33% 99.59 kB 99.92 kB +0.40% 19.95 kB 20.03 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.production.js +0.33% 99.62 kB 99.95 kB +0.40% 19.95 kB 20.03 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.js +0.32% 101.53 kB 101.85 kB +0.42% 20.35 kB 20.43 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.js +0.32% 102.48 kB 102.81 kB +0.41% 20.62 kB 20.71 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.production.js +0.32% 102.52 kB 102.84 kB +0.41% 20.62 kB 20.70 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.26% 135.65 kB 136.00 kB +0.25% 25.21 kB 25.28 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.26% 135.65 kB 136.00 kB +0.25% 25.21 kB 25.28 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.26% 135.65 kB 136.00 kB +0.25% 25.21 kB 25.28 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.26% 136.09 kB 136.44 kB +0.25% 25.32 kB 25.39 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.26% 136.09 kB 136.44 kB +0.25% 25.32 kB 25.39 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.26% 136.09 kB 136.44 kB +0.25% 25.32 kB 25.39 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.26% 136.95 kB 137.30 kB +0.26% 25.42 kB 25.49 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.26% 136.95 kB 137.30 kB +0.26% 25.42 kB 25.49 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.26% 136.95 kB 137.30 kB +0.26% 25.42 kB 25.49 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.26% 136.98 kB 137.33 kB +0.26% 25.43 kB 25.49 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.26% 136.98 kB 137.33 kB +0.26% 25.43 kB 25.49 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.26% 136.98 kB 137.33 kB +0.26% 25.43 kB 25.49 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.25% 138.22 kB 138.57 kB +0.25% 25.53 kB 25.60 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.25% 138.22 kB 138.57 kB +0.25% 25.53 kB 25.60 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.25% 138.22 kB 138.57 kB +0.25% 25.53 kB 25.60 kB
oss-stable-rc/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.25% 139.32 kB 139.67 kB +0.24% 25.82 kB 25.88 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.25% 139.32 kB 139.67 kB +0.24% 25.82 kB 25.88 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.25% 139.32 kB 139.67 kB +0.24% 25.82 kB 25.88 kB
oss-stable-rc/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.25% 139.35 kB 139.70 kB +0.24% 25.82 kB 25.88 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.25% 139.35 kB 139.70 kB +0.24% 25.82 kB 25.88 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.25% 139.35 kB 139.70 kB +0.24% 25.82 kB 25.88 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.23% 151.39 kB 151.74 kB +0.27% 27.48 kB 27.56 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.23% 151.83 kB 152.18 kB +0.27% 27.59 kB 27.66 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.23% 154.37 kB 154.72 kB +0.24% 27.90 kB 27.96 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.23% 154.40 kB 154.75 kB +0.24% 27.90 kB 27.97 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.23% 154.84 kB 155.19 kB +0.23% 28.09 kB 28.15 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.23% 155.94 kB 156.29 kB +0.27% 28.39 kB 28.46 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.23% 155.98 kB 156.33 kB +0.27% 28.39 kB 28.47 kB

Generated by 🚫 dangerJS against c1b4272

@unstubbable unstubbable marked this pull request as ready for review September 13, 2024 19:50
@sebmarkbage sebmarkbage merged commit 5deb782 into facebook:main Sep 13, 2024
184 checks passed
@unstubbable unstubbable deleted the resolve-client-reference-metadata-async-manifest branch September 13, 2024 20:33
github-actions bot pushed a commit that referenced this pull request Sep 13, 2024
In #26624, the ability to mark a client reference module as `async` in
the React client manifest was removed because it was not utilized by
Webpack, neither in `ReactFlightWebpackPlugin` nor in Next.js. However,
some bundlers and frameworks are sophisticated enough to properly handle
and identify async ESM modules (e.g., client component modules with
top-level `await`), most notably Turbopack in Next.js. Therefore, we
need to consider the `async` flag in the client manifest when resolving
the client reference metadata on the server. The SSR manifest cannot
override this flag, meaning that if a module is async, it must remain
async in all client environments.

x-ref: vercel/next.js#70022

DiffTrain build for [5deb782](5deb782)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants