Fix barrel optimization to ignore layers #59254

shuding · 2023-12-04T16:21:25Z

Fixes #57624. The recent issue was an unexpected side effect caused by 305bb01, which only affects specific packages like @mui/material.

The problem was that the entry file of @mui/material has "use client" at top, which affects the compilation result to output reference info only (when on the RSC layer), instead of keeping the original export statements. And the fix here is to ignore all layer info and React specific transforms here, as barrel optimization isn't related to all these framework features at all. To keep all directives unchanged, the SWC transform needs to parse and pass that info to the Webpack loader.

This PR adds a test to ensure that @mui/material is working as expected (less than 1500 modules compiled). Without this feature it'll be ~2400 modules.

Closes NEXT-1793, closes NEXT-1762.

ijjk · 2023-12-04T16:25:23Z

Tests Passed

ijjk · 2023-12-04T16:27:19Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js shu/14f6	Change
buildDuration	10.3s	10.4s	⚠️ +145ms
buildDurationCached	6s	5.9s	N/A
nodeModulesSize	199 MB	199 MB	⚠️ +3.95 kB
nextStartRea..uration (ms)	420ms	424ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js shu/14f6	Change
199-HASH.js gzip	30.6 kB	30.6 kB	✓
3f784ff6-HASH.js gzip	53.3 kB	53.3 kB	✓
494.HASH.js gzip	180 B	185 B	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	241 B	✓
main-HASH.js gzip	31.7 kB	31.7 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	129 kB	129 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js shu/14f6	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js shu/14f6	Change
_app-HASH.js gzip	194 B	194 B	✓
_error-HASH.js gzip	182 B	182 B	✓
amp-HASH.js gzip	501 B	501 B	✓
css-HASH.js gzip	322 B	321 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	253 B	255 B	N/A
head-HASH.js gzip	348 B	350 B	N/A
hooks-HASH.js gzip	369 B	369 B	✓
image-HASH.js gzip	4.27 kB	4.27 kB	N/A
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.61 kB	2.6 kB	N/A
routerDirect..HASH.js gzip	311 B	309 B	N/A
script-HASH.js gzip	384 B	384 B	✓
withRouter-HASH.js gzip	307 B	306 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.99 kB	1.99 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js shu/14f6	Change
_buildManifest.js gzip	484 B	483 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js shu/14f6	Change
index.html gzip	528 B	529 B	N/A
link.html gzip	539 B	541 B	N/A
withRouter.html gzip	524 B	524 B	✓
Overall change	524 B	524 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js shu/14f6	Change
edge-ssr.js gzip	93.7 kB	93.7 kB	N/A
page.js gzip	146 kB	146 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js shu/14f6	Change
middleware-b..fest.js gzip	627 B	624 B	N/A
middleware-r..fest.js gzip	150 B	151 B	N/A
middleware.js gzip	37.5 kB	37.5 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	1.92 kB	1.92 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js shu/14f6	Change
app-page-exp...dev.js gzip	168 kB	168 kB	✓
app-page-exp..prod.js gzip	93.8 kB	93.8 kB	✓
app-page-tur..prod.js gzip	94.5 kB	94.5 kB	✓
app-page-tur..prod.js gzip	89.1 kB	89.1 kB	✓
app-page.run...dev.js gzip	138 kB	138 kB	✓
app-page.run..prod.js gzip	88.4 kB	88.4 kB	✓
app-route-ex...dev.js gzip	24.2 kB	24.2 kB	✓
app-route-ex..prod.js gzip	16.8 kB	16.8 kB	✓
app-route-tu..prod.js gzip	16.9 kB	16.9 kB	✓
app-route-tu..prod.js gzip	16.4 kB	16.4 kB	✓
app-route.ru...dev.js gzip	23.6 kB	23.6 kB	✓
app-route.ru..prod.js gzip	16.4 kB	16.4 kB	✓
pages-api-tu..prod.js gzip	9.37 kB	9.37 kB	✓
pages-api.ru...dev.js gzip	9.64 kB	9.64 kB	✓
pages-api.ru..prod.js gzip	9.37 kB	9.37 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	22.6 kB	22.6 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	49.4 kB	49.4 kB	✓
Overall change	930 kB	930 kB	✓

Commit: c53e21e

shuding · 2023-12-04T21:24:33Z

This change is more tricky than I thought — will probably a bit take more time.

huozhi

Nice PR!

Most of them can now be handled by `optimizePackageImports` as I manually tested them locally. The main benefit is that structural updates from these libs won't affect our internal configurations anymore, as they're automatic with the new approach. The little downside is that the automatic way is a bit slower than the `modularizeImports` config as it needs to do extra analyzation. But overall, this is a good direction. Depends on #59254.

mwskwong · 2023-12-06T11:14:46Z

@shuding FYR, this PR seems to introduce a new issue. Under certain condition, the following error is thrown when using optimizePackageImports. I'm unable to find a reliable way to reproduce it just yet, but I will create an issue once I'm able to do so.

Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Talent30 · 2023-12-07T23:04:09Z

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
    at nP (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:59156)
    at nP (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:59120)
    at n$ (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61978)
    at nj (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64628)
    at nP (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:56390)
    at n$ (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:61978)
    at nj (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64628)
    at nO (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64035)
    at n$ (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62224)
    at nj (/home/ubuntu/dt-frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64628)

I have encountered the same issue, can't find a way to reproduce it...

infodusha · 2023-12-08T17:54:02Z

I also faced with same issue as above but can't find what causes it

HristoHentov · 2023-12-10T01:46:57Z

+1, also facing the Element type is invalid issue

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
    at nP (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:59156)
    at nP (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:59120)
    at n$ (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:61978)
    at nj (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64628)
    at nO (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64035)
    at n$ (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:62224)
    at nj (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64628)
    at nO (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:64035)
    at n$ (E:\Projects\PillarPerch\client\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:62224)

cysp · 2023-12-13T00:27:19Z

Adding to the chorus, I just finished bisecting this same error in a project I'm working on to https://github.com/vercel/next.js/releases/tag/v14.0.4-canary.42, and this change is the most likely candidate in my mind. 🙂

My project does use @mui/material.
I've tried to find if any specific component or import triggers reproduction but I have not been able to consistently reduce the reproduction to anything in particular.

[edit:]
Interestingly, I appear to be able to squash the error with judicious placement of 'use client' in my components that themselves use @mui/material components.

mwskwong · 2023-12-13T01:22:18Z

[edit:] Interestingly, I appear to be able to squash the error with judicious placement of 'use client' in my components that themselves use @mui/material components.

Because when using client components, this config doesn't take effect and the Webpack tree shaking takes over

infodusha · 2023-12-14T20:12:28Z

Thank comments above I did manage to solve the issue.

In my case it was <App /> import from antd in root layout that is a server component

fix #57624

64c2f1d

shuding requested review from timneutkens, ijjk, huozhi, ztanner, feedthejim, a team and wyattjoh as code owners December 4, 2023 16:21

ijjk added area: tests created-by: Next.js team PRs by the Next.js team. type: next labels Dec 4, 2023

timneutkens approved these changes Dec 4, 2023

View reviewed changes

shuding added 2 commits December 5, 2023 01:52

fix tests

ae61cc0

remove .only

05fffbf

huozhi approved these changes Dec 4, 2023

View reviewed changes

Merge branch 'canary' into shu/14f6

ebcf6f1

shuding added 4 commits December 6, 2023 00:01

fix client entry cases

c83cb7c

fix lint errors

ad669aa

Merge branch 'canary' into shu/14f6

043c0b3

exclude turbopack test

c53e21e

huozhi approved these changes Dec 5, 2023

View reviewed changes

shuding mentioned this pull request Dec 5, 2023

NextJS 13 unused client component increases First Load JS size (tree shaking not working for client component) #49742

Open

1 task

shuding merged commit 6790004 into canary Dec 5, 2023
67 of 69 checks passed

shuding deleted the shu/14f6 branch December 5, 2023 16:17

shuding mentioned this pull request Dec 5, 2023

Clean up builtin modularizeImports configs #59294

Merged

OlegLustenko mentioned this pull request Dec 20, 2023

Next 14.0.4 breaks Mui integration that worked with 14.0.3 and older versions #59804

Closed

1 task

github-actions bot added the locked label Dec 29, 2023

github-actions bot locked as resolved and limited conversation to collaborators Dec 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix barrel optimization to ignore layers #59254

Fix barrel optimization to ignore layers #59254

shuding commented Dec 4, 2023 •

edited

Loading

ijjk commented Dec 4, 2023 •

edited

Loading

ijjk commented Dec 4, 2023 •

edited

Loading

shuding commented Dec 4, 2023

huozhi left a comment

mwskwong commented Dec 6, 2023

Talent30 commented Dec 7, 2023 •

edited

Loading

infodusha commented Dec 8, 2023

HristoHentov commented Dec 10, 2023

cysp commented Dec 13, 2023 •

edited

Loading

mwskwong commented Dec 13, 2023

infodusha commented Dec 14, 2023

Fix barrel optimization to ignore layers #59254

Fix barrel optimization to ignore layers #59254

Conversation

shuding commented Dec 4, 2023 • edited Loading

ijjk commented Dec 4, 2023 • edited Loading

Tests Passed

ijjk commented Dec 4, 2023 • edited Loading

Stats from current PR

shuding commented Dec 4, 2023

huozhi left a comment

Choose a reason for hiding this comment

mwskwong commented Dec 6, 2023

Talent30 commented Dec 7, 2023 • edited Loading

infodusha commented Dec 8, 2023

HristoHentov commented Dec 10, 2023

cysp commented Dec 13, 2023 • edited Loading

mwskwong commented Dec 13, 2023

infodusha commented Dec 14, 2023

shuding commented Dec 4, 2023 •

edited

Loading

ijjk commented Dec 4, 2023 •

edited

Loading

ijjk commented Dec 4, 2023 •

edited

Loading

Talent30 commented Dec 7, 2023 •

edited

Loading

cysp commented Dec 13, 2023 •

edited

Loading