Fix: css in next/dynamic component in edge runtime

[huozhi]

What

Wrap async local storage for all edge runtime routes in adapter

Basically fixed the case reported in this tweet

Why

We're relying on the ALS for dynamic css preloading but we didn't wrap the ALS for request handlers for edge. So if you have CSS imports in next/dynamic in edge runtime it would break.

Closes NEXT-3085

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/dynamic-css-edge	Change
buildDuration	17.1s	17.1s	N/A
buildDurationCached	10.5s	8s	N/A
nodeModulesSize	199 MB	199 MB	⚠️ +922 B
nextStartRea..uration (ms)	445ms	456ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js fix/dynamic-css-edge	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	241 B	243 B	N/A
main-HASH.js gzip	32.2 kB	32.2 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/dynamic-css-edge	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/dynamic-css-edge	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/dynamic-css-edge	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/dynamic-css-edge	Change
index.html gzip	529 B	529 B	✓
link.html gzip	541 B	541 B	✓
withRouter.html gzip	525 B	524 B	N/A
Overall change	1.07 kB	1.07 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js fix/dynamic-css-edge	Change
edge-ssr.js gzip	95.6 kB	95.6 kB	N/A
page.js gzip	3.06 kB	3.06 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js fix/dynamic-css-edge	Change
middleware-b..fest.js gzip	624 B	625 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/dynamic-css-edge	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	97.4 kB	97.4 kB	✓
app-page-tur..prod.js gzip	99.2 kB	99.2 kB	✓
app-page-tur..prod.js gzip	93.4 kB	93.4 kB	✓
app-page.run...dev.js gzip	144 kB	144 kB	✓
app-page.run..prod.js gzip	91.9 kB	91.9 kB	✓
app-route-ex...dev.js gzip	21.4 kB	21.4 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.3 kB	51.3 kB	✓
Overall change	948 kB	948 kB	✓

build cache

	vercel/next.js canary	vercel/next.js fix/dynamic-css-edge	Change
0.pack gzip	1.59 MB	1.58 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

Diff for edge-ssr.js

Diff too large to display

Commit: b2f9e6f

[ryanburns23]

@huozhi Thanks for this fix, I notice when running 14.2.1-canary.2 and next dev --turbo I still receive an error with reference to next/dynamic css: ⨯ Error: 'next/dynamic css' was called outside a request scope. When running next dev without turbo there are no errors.

[huozhi]

@ryanburns23 Thanks for reporting we also noticed that this is still not fully working properly in other case, I'll revert this in #64442 and get another fix for it