Fix: css in next/dynamic component in edge runtime (#64382)

[MitchLewis930]

PR_031

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed CSS preloading issue for next/dynamic components in edge runtime by wrapping edge route handlers with RequestAsyncStorageWrapper.

Key Changes:

• Wrapped edge runtime route handlers in adapter.ts with RequestAsyncStorageWrapper to provide request context via AsyncLocalStorage
• Updated getExpectedRequestStore call in preload-css.tsx to include descriptive error context ('next/dynamic css')
• Added comprehensive edge runtime test to verify dynamic CSS preloading functionality

Impact:
Previously, CSS imports in next/dynamic components would fail in edge runtime because the async local storage context wasn't available. This fix ensures consistent behavior between Node.js and edge runtimes.

Confidence Score: 5/5

• Safe to merge - well-tested fix that aligns edge runtime with existing Node.js behavior
• The changes are minimal, well-structured, and follow established patterns used elsewhere in the codebase (middleware already uses the same wrapping pattern). Comprehensive test coverage validates the fix works correctly.
• No files require special attention

Important Files Changed

Filename	Overview
packages/next/src/server/web/adapter.ts	Wrapped edge runtime handler with RequestAsyncStorageWrapper to enable request context access
packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx	Updated getExpectedRequestStore call to include descriptive error context parameter

Sequence Diagram

sequenceDiagram
    participant Client
    participant Adapter as Edge Runtime Adapter
    participant ALS as RequestAsyncStorage
    participant Handler as Route Handler
    participant PreloadCSS as PreloadCss Component
    participant Manifest as ReactLoadableManifest

    Client->>Adapter: Request to edge route
    Adapter->>Adapter: Create NextRequest
    Adapter->>ALS: RequestAsyncStorageWrapper.wrap()
    activate ALS
    Note over ALS: Initialize RequestStore with<br/>req, reactLoadableManifest, assetPrefix
    ALS->>Handler: Execute params.handler(request, event)
    Handler->>PreloadCSS: Render component with next/dynamic
    PreloadCSS->>PreloadCSS: Check typeof window !== 'undefined'
    PreloadCSS->>ALS: getExpectedRequestStore('next/dynamic css')
    ALS-->>PreloadCSS: Return requestStore
    PreloadCSS->>Manifest: Access requestStore.reactLoadableManifest
    Manifest-->>PreloadCSS: CSS files for moduleIds
    PreloadCSS-->>Handler: Render link tags for CSS preloading
    Handler-->>ALS: Response
    deactivate ALS
    ALS-->>Adapter: Response
    Adapter-->>Client: Response with CSS preload links

Loading

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}