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.

Sign up for GitHub

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

Jump to bottom

Turbopack: Allow client components to be imported in app routes #64520

Merged
merged 3 commits into from Apr 15, 2024
Merged

Turbopack: Allow client components to be imported in app routes #64520

merged 3 commits into from Apr 15, 2024

Conversation

wbinnssmith
Copy link
Member

@wbinnssmith wbinnssmith commented Apr 15, 2024 •
edited by padmaia

Resolves #64412

This adds a client transition to the app route ModuleAssetContext and the corresponding transforms so that client components can be safely imported and referenced (as their proxies) in app routes.

Test Plan: Added an integration test

Closes PACK-2964

@wbinnssmith
Turbopack: Allow client components to be imported in app routes
ad25e9b 
Resolves #64412

This adds a client transition to the app route `ModuleAssetContext` and the corresponding transforms so that client components can be safely imported and referenced (as their proxies) in app routes.

Test Plan: Added an integration test
@ijjk ijjk added area: tests Turbopack Related to Turbopack with Next.js. created-by: Turbopack team PRs by the turbopack team type: next labels Apr 15, 2024
@ijjk
Copy link
Member

ijjk commented Apr 15, 2024 •
edited

Tests Passed

@ijjk
Copy link
Member

ijjk commented Apr 15, 2024 •
edited

Stats from current PR

Default Build (Increase detected ⚠️)
General
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
buildDuration 14.3s 14.4s ⚠️ +104ms
buildDurationCached 8.7s 6.6s N/A
nodeModulesSize 199 MB 199 MB ✓
nextStartRea..uration (ms) 383ms 384ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
2453-HASH.js gzip 31.4 kB 31.4 kB N/A
3304.HASH.js gzip 181 B 181 B ✓
3f784ff6-HASH.js gzip 53.7 kB 53.7 kB ✓
8299-HASH.js gzip 5.1 kB 5.1 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB ✓
main-app-HASH.js gzip 242 B 241 B N/A
main-HASH.js gzip 29.6 kB 29.6 kB N/A
webpack-HASH.js gzip 1.68 kB 1.68 kB N/A
Overall change 99 kB 99 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
_app-HASH.js gzip 196 B 197 B N/A
_error-HASH.js gzip 184 B 184 B ✓
amp-HASH.js gzip 505 B 505 B ✓
css-HASH.js gzip 324 B 325 B N/A
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 258 B 258 B ✓
head-HASH.js gzip 352 B 352 B ✓
hooks-HASH.js gzip 370 B 371 B N/A
image-HASH.js gzip 4.27 kB 4.27 kB ✓
index-HASH.js gzip 259 B 259 B ✓
link-HASH.js gzip 2.67 kB 2.67 kB N/A
routerDirect..HASH.js gzip 314 B 312 B N/A
script-HASH.js gzip 386 B 386 B ✓
withRouter-HASH.js gzip 309 B 309 B ✓
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 6.63 kB 6.63 kB ✓
Client Build Manifests
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
_buildManifest.js gzip 483 B 485 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
index.html gzip 528 B 529 B N/A
link.html gzip 541 B 542 B N/A
withRouter.html gzip 524 B 523 B N/A
Overall change 0 B 0 B ✓
Edge SSR bundle Size
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
edge-ssr.js gzip 95.6 kB 95.6 kB N/A
page.js gzip 3.05 kB 3.05 kB ✓
Overall change 3.05 kB 3.05 kB ✓
Middleware size
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
middleware-b..fest.js gzip 624 B 627 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 25.5 kB 25.5 kB N/A
edge-runtime..pack.js gzip 839 B 839 B ✓
Overall change 839 B 839 B ✓
Next Runtimes
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
app-page-exp...dev.js gzip 171 kB 171 kB ✓
app-page-exp..prod.js gzip 97.5 kB 97.5 kB ✓
app-page-tur..prod.js gzip 99.2 kB 99.2 kB ✓
app-page-tur..prod.js gzip 93.5 kB 93.5 kB ✓
app-page.run...dev.js gzip 145 kB 145 kB ✓
app-page.run..prod.js gzip 92 kB 92 kB ✓
app-route-ex...dev.js gzip 21.5 kB 21.5 kB ✓
app-route-ex..prod.js gzip 15.2 kB 15.2 kB ✓
app-route-tu..prod.js gzip 15.2 kB 15.2 kB ✓
app-route-tu..prod.js gzip 14.9 kB 14.9 kB ✓
app-route.ru...dev.js gzip 21.1 kB 21.1 kB ✓
app-route.ru..prod.js gzip 14.9 kB 14.9 kB ✓
pages-api-tu..prod.js gzip 9.55 kB 9.55 kB ✓
pages-api.ru...dev.js gzip 9.82 kB 9.82 kB ✓
pages-api.ru..prod.js gzip 9.55 kB 9.55 kB ✓
pages-turbo...prod.js gzip 22.5 kB 22.5 kB ✓
pages.runtim...dev.js gzip 23.1 kB 23.1 kB ✓
pages.runtim..prod.js gzip 22.5 kB 22.5 kB ✓
server.runti..prod.js gzip 51.4 kB 51.4 kB ✓
Overall change 948 kB 948 kB ✓
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js wbinnssmith/routes-client-component Change
0.pack gzip 1.59 MB 1.59 MB ⚠️ +835 B
index.pack gzip 107 kB 107 kB ⚠️ +779 B
Overall change 1.69 MB 1.69 MB ⚠️ +1.61 kB
Diff details
Diff for middleware.js

Diff too large to display

Commit: ffdc703

@wbinnssmith wbinnssmith merged commit f794402 into canary Apr 15, 2024
74 of 79 checks passed
@wbinnssmith wbinnssmith deleted the wbinnssmith/routes-client-component branch April 15, 2024 21:18
@jmikrut
Copy link
Contributor

jmikrut commented Apr 15, 2024

Magicians 👍

@timneutkens timneutkens mentioned this pull request Apr 17, 2024
Closed
ztanner pushed a commit that referenced this pull request Apr 17, 2024
@wbinnssmith @ztanner
Turbopack: Allow client components to be imported in app routes (#64520)
3709dd9 
Resolves #64412

This adds a client transition to the app route `ModuleAssetContext` and
the corresponding transforms so that client components can be safely
imported and referenced (as their proxies) in app routes.

Test Plan: Added an integration test


Closes PACK-2964
wbinnssmith added a commit that referenced this pull request Apr 18, 2024
@wbinnssmith
Turbopack: Allow client components from foreign code in app routes
8e99089 
This extends #64520 to cover cases where client components originate from node_modules (foreign code).

Test Plan: Extended the integration test to cover this
@wbinnssmith wbinnssmith mentioned this pull request Apr 18, 2024
Merged
wbinnssmith added a commit that referenced this pull request Apr 26, 2024
@wbinnssmith @kwonoj
Turbopack: Allow client components from foreign code in app routes (#…
9a3c9ed 
…64751)

This extends #64520 to cover cases where client components originate
from node_modules (foreign code).

Test Plan: Extended the integration test to cover this

Closes #64412
Fixes PACK-3014

---------

Co-authored-by: OJ Kwon <1210596+kwonoj@users.noreply.github.com>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 30, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@sokra sokra sokra approved these changes

@ForsakenHarmony ForsakenHarmony ForsakenHarmony approved these changes

@timneutkens timneutkens Awaiting requested review from timneutkens timneutkens is a code owner

@ijjk ijjk Awaiting requested review from ijjk ijjk is a code owner

@shuding shuding Awaiting requested review from shuding shuding is a code owner

@huozhi huozhi Awaiting requested review from huozhi huozhi is a code owner

@feedthejim feedthejim Awaiting requested review from feedthejim feedthejim is a code owner

@ztanner ztanner Awaiting requested review from ztanner ztanner is a code owner

@wyattjoh wyattjoh Awaiting requested review from wyattjoh wyattjoh is a code owner

@kwonoj kwonoj Awaiting requested review from kwonoj

@bgw bgw Awaiting requested review from bgw

Assignees
No one assigned
Labels
created-by: Turbopack team PRs by the turbopack team locked Turbopack Related to Turbopack with Next.js. type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

14.2.0 throws errors with Turbopack when importing client components in route handlers that use context
5 participants
@wbinnssmith @ijjk @jmikrut @sokra @ForsakenHarmony