fix issues loading CSS in default slots

[ztanner]

What

When using a default slot that re-exports another page, the CSS entries (and presumably other client reference modules, like JS entries) that correspond with the re-exported page won't be loaded, resulting in CSS styles not being applied.

Why

next-app-loader constructs the path to the default segment but special cases the children slot (which is used as the page), to mark the segment as an empty string. This is so that the parallel default file can be loaded. However the way that defaultPath is constructed, it assumes that actualSegment won't be an empty string, and constructs an invalid path like so:

app/example//default.tsx

When we go to look up the JS/CSS entries from the client reference manifest, the key will be incorrect and so it won't find the files for it, resulting in this bug.

How

This moves the / delimiting to be part of the creation of the actualSegment variable so that we only append it when we know we aren't setting it to be an empty string.

Fixes #52245
Fixes #49871
Closes NEXT-2309
Closes NEXT-2310

[ztanner]

• canary
  • fix issues loading CSS in default slots #61428 👈

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ztanner and the rest of your teammates on Graphite

[ijjk]

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-30-ensure_default_slots_have_valid_file_paths	Change
buildDuration	11.7s	11.7s	N/A
buildDurationCached	6.3s	4.9s	N/A
nodeModulesSize	200 MB	200 MB	⚠️ +112 B
nextStartRea..uration (ms)	421ms	433ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-30-ensure_default_slots_have_valid_file_paths	Change
3f784ff6-HASH.js gzip	53.4 kB	53.4 kB	✓
423.HASH.js gzip	185 B	181 B	N/A
68-HASH.js gzip	29.9 kB	29.9 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	238 B	240 B	N/A
main-HASH.js gzip	31.8 kB	31.8 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	100 kB	100 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-30-ensure_default_slots_have_valid_file_paths	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 01-30-ensure_default_slots_have_valid_file_paths	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	182 B	181 B	N/A
amp-HASH.js gzip	502 B	502 B	✓
css-HASH.js gzip	320 B	322 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	256 B	N/A
head-HASH.js gzip	350 B	349 B	N/A
hooks-HASH.js gzip	368 B	369 B	N/A
image-HASH.js gzip	4.18 kB	4.18 kB	N/A
index-HASH.js gzip	257 B	256 B	N/A
link-HASH.js gzip	2.61 kB	2.61 kB	N/A
routerDirect..HASH.js gzip	310 B	311 B	N/A
script-HASH.js gzip	384 B	383 B	N/A
withRouter-HASH.js gzip	306 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	608 B	608 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 01-30-ensure_default_slots_have_valid_file_paths	Change
_buildManifest.js gzip	484 B	484 B	✓
Overall change	484 B	484 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-30-ensure_default_slots_have_valid_file_paths	Change
index.html gzip	529 B	527 B	N/A
link.html gzip	542 B	541 B	N/A
withRouter.html gzip	523 B	523 B	✓
Overall change	523 B	523 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-30-ensure_default_slots_have_valid_file_paths	Change
edge-ssr.js gzip	94 kB	94.1 kB	N/A
page.js gzip	150 kB	150 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-30-ensure_default_slots_have_valid_file_paths	Change
middleware-b..fest.js gzip	624 B	622 B	N/A
middleware-r..fest.js gzip	151 B	149 B	N/A
middleware.js gzip	37.6 kB	37.6 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 01-30-ensure_default_slots_have_valid_file_paths	Change
app-page-exp...dev.js gzip	170 kB	170 kB	✓
app-page-exp..prod.js gzip	95.8 kB	95.8 kB	✓
app-page-tur..prod.js gzip	96.4 kB	96.4 kB	✓
app-page-tur..prod.js gzip	91 kB	91 kB	✓
app-page.run...dev.js gzip	142 kB	142 kB	✓
app-page.run..prod.js gzip	90.3 kB	90.3 kB	✓
app-route-ex...dev.js gzip	22.2 kB	22.2 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.5 kB	14.5 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.5 kB	14.5 kB	✓
pages-api-tu..prod.js gzip	9.43 kB	9.43 kB	✓
pages-api.ru...dev.js gzip	9.7 kB	9.7 kB	✓
pages-api.ru..prod.js gzip	9.43 kB	9.43 kB	✓
pages-turbo...prod.js gzip	22 kB	22 kB	✓
pages.runtim...dev.js gzip	22.7 kB	22.7 kB	✓
pages.runtim..prod.js gzip	22 kB	22 kB	✓
server.runti..prod.js gzip	49.7 kB	49.7 kB	✓
Overall change	933 kB	933 kB	✓

Commit: 9229e95