-
Notifications
You must be signed in to change notification settings - Fork 26.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Turbopack: Allow client components to be imported in app routes (#64520)
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
- Loading branch information
1 parent
24575b3
commit f794402
Showing
6 changed files
with
75 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
test/e2e/app-dir/app-routes-client-component/ClientComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
'use client' | ||
|
||
export function ClientComponent() { | ||
return <div>ClientComponent</div> | ||
} |
19 changes: 19 additions & 0 deletions
19
test/e2e/app-dir/app-routes-client-component/app-routes-client-component.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { FileRef, nextTestSetup } from 'e2e-utils' | ||
import path from 'path' | ||
|
||
describe('referencing a client component in an app route', () => { | ||
const { next } = nextTestSetup({ | ||
files: new FileRef(path.join(__dirname)), | ||
dependencies: { | ||
react: 'latest', | ||
'react-dom': 'latest', | ||
}, | ||
}) | ||
|
||
it('responds without error', async () => { | ||
expect(JSON.parse(await next.render('/runtime'))).toEqual({ | ||
// Turbopack's proxy components are functions | ||
clientComponent: process.env.TURBOPACK ? 'function' : 'object', | ||
}) | ||
}) | ||
}) |
8 changes: 8 additions & 0 deletions
8
test/e2e/app-dir/app-routes-client-component/app/runtime/route.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { NextResponse } from 'next/server' | ||
import { ClientComponent } from '../../ClientComponent' | ||
|
||
export function GET() { | ||
return NextResponse.json({ | ||
clientComponent: typeof ClientComponent, | ||
}) | ||
} |
f794402
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Stats from current release
Default Build (Increase detected⚠️ )
General Overall increase⚠️
Client Bundles (main, webpack)
Legacy Client Bundles (polyfills)
Client Pages
Client Build Manifests
Rendered Page Sizes
Edge SSR bundle Size
Middleware size
Next Runtimes
build cache Overall increase⚠️
Diff details
Diff for page.js
Diff too large to display
Diff for middleware.js
Diff too large to display
Diff for edge-ssr.js
Diff too large to display
Diff for 2453-HASH.js
Diff too large to display
Diff for main-HASH.js
Diff too large to display
Diff for app-page-exp..ntime.dev.js
Diff for app-page-exp..time.prod.js
Diff too large to display
Diff for app-page-tur..time.prod.js
Diff too large to display
Diff for app-page-tur..time.prod.js
Diff too large to display
Diff for app-page.runtime.dev.js
Diff too large to display
Diff for app-page.runtime.prod.js
Diff too large to display
Diff for app-route-ex..ntime.dev.js
Diff too large to display
Diff for app-route-ex..time.prod.js
Diff too large to display
Diff for app-route-tu..time.prod.js
Diff too large to display
Diff for app-route-tu..time.prod.js
Diff too large to display
Diff for app-route.runtime.dev.js
Diff too large to display
Diff for app-route.ru..time.prod.js
Diff too large to display
Diff for pages-turbo...time.prod.js
Diff too large to display
Diff for pages.runtime.dev.js
Diff too large to display
Diff for pages.runtime.prod.js
Diff too large to display
Diff for server.runtime.prod.js
Diff too large to display