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

Fix cjs client components tree-shaking #64558

Merged
merged 2 commits into from Apr 16, 2024

Conversation

huozhi
Copy link
Member

@huozhi huozhi commented Apr 16, 2024

What

Determine if the client module is a CJS file and default export is imported, then we include the whole module instead of using webpack magic comments to only extract default export.

Why

Unlike ESM, The default export of CJS module is not just .default property, we need to include __esModule mark along with default export to make it function properly with React client module proxy

Fixes #64518
Closes NEXT-3119

@ijjk
Copy link
Member

ijjk commented Apr 16, 2024

Tests Passed

@ijjk
Copy link
Member

ijjk commented Apr 16, 2024

Stats from current PR

Default Build
General Overall increase ⚠️
vercel/next.js canary vercel/next.js fix/client-components-tree-shaking Change
buildDuration 16.2s 16.4s ⚠️ +175ms
buildDurationCached 10s 7.6s N/A
nodeModulesSize 199 MB 199 MB ⚠️ +4.62 kB
nextStartRea..uration (ms) 438ms 437ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js fix/client-components-tree-shaking 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 243 B 242 B N/A
main-HASH.js gzip 29.6 kB 29.7 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 fix/client-components-tree-shaking Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js fix/client-components-tree-shaking 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 fix/client-components-tree-shaking 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 fix/client-components-tree-shaking Change
index.html gzip 529 B 529 B
link.html gzip 542 B 542 B
withRouter.html gzip 524 B 524 B
Overall change 1.59 kB 1.59 kB
Edge SSR bundle Size
vercel/next.js canary vercel/next.js fix/client-components-tree-shaking Change
edge-ssr.js gzip 95.5 kB 95.5 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 fix/client-components-tree-shaking Change
middleware-b..fest.js gzip 623 B 626 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 fix/client-components-tree-shaking 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.5 kB 51.5 kB
Overall change 949 kB 949 kB
build cache
vercel/next.js canary vercel/next.js fix/client-components-tree-shaking Change
0.pack gzip 1.59 MB 1.59 MB N/A
index.pack gzip 107 kB 107 kB N/A
Overall change 0 B 0 B
Diff details
Diff for middleware.js

Diff too large to display

Commit: d63f633

@huozhi huozhi marked this pull request as ready for review April 16, 2024 12:32
@huozhi huozhi merged commit fa30290 into canary Apr 16, 2024
75 of 80 checks passed
@huozhi huozhi deleted the fix/client-components-tree-shaking branch April 16, 2024 13:06
ztanner pushed a commit that referenced this pull request Apr 17, 2024
## What

Determine if the client module is a CJS file and `default` export is
imported, then we include the whole module instead of using webpack
magic comments to only extract `default` export.

## Why

Unlike ESM, The `default` export of CJS module is not just `.default`
property, we need to include `__esModule` mark along with `default`
export to make it function properly with React client module proxy


Fixes #64518
Closes NEXT-3119
@github-actions github-actions bot added the locked label May 1, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

v14.2 causing build error for Material UI Icons
3 participants