AI & Agent Dev Bug Sandbox Back to Radar

Turbopack Build Omits __NEXT_DATA__.DynamicIds For Next/Dynamic({ Ssr: True }) Declared In Pages/_App — Server HTML Discarded On Hydration

Next.js 16 Turbopack builds fail to include module IDs for ssr:true dynamic components declared in pages/_app.tsx in the __NEXT_DATA__.dynamicIds array. This causes client-side hydration mismatches, discarding server-rendered markup for persistent site chrome (header/footer/cookie banner) and breaking SSR/SEO for those sections.

criticalConfidence 85%Next.js Affected V16.3.3 Affected V16.3.4

Origin Analysis

Turbopack's loadable manifest collection logic does not traverse or merge dynamic import IDs from the pages/_app module during the build, unlike Webpack. The _app module's loadable components are server-rendered but their module IDs are omitted from the dynamicIds serialized into the HTML, causing React to treat them as not yet loaded during hydration and fall back to the loading state, triggering a hydration mismatch.

1. Clone https://github.com/milosz-gustawski/next16-turbopack-app-dynamicids-repro 2. Run `npm install` 3. Run `npm run build` (default Turbopack) and inspect `.next/server/pages/index.html` for `__NEXT_DATA__.dynamicIds` — observe only page-level dynamic ID present, _app-level missing. 4. Run `npm run build:webpack` and repeat inspection — both IDs present. 5. Start the Turbopack build and open browser console: hydration mismatch error and server HTML replaced.

Fixing Code Block

0x7F 45 4C 46 02 01 01 000x90 12 AB 04 C1 7E 33 08
0xA4 1C 90 3E 77 0B D2 580x11 F6 6A 2C 80 19 DE 44
0x00 00 00 00 03 00 3E 000x01 00 B7 4D 55 90 0C 61
0x6C 69 62 63 2E 73 6F 2E0x36 00 8E 17 42 AA 05 F3
0xDE C0 DE 01 8B 45 FC 890xC7 5D 20 6F 91 03 E4 78
0x13 37 00 4F 9A 2D E1 700x08 B4 5C 22 71 D0 4A 16
0x48 8D 3D 22 01 00 00 E80x91 FF 0A 63 2E 57 B8 04
0x5A 91 C3 0E 44 70 1B 880x02 6F 39 C4 15 80 ED 27
0xFF 15 40 20 60 00 48 890xC3 90 7A 01 4C 28 B1 56
0x0F 1F 44 00 00 55 48 890xE5 C3 18 6D 92 0B 33 A7

Edge Case Audit

Disabling Turbopack removes its performance benefits (faster builds, faster refresh). It may also limit access to Turbopack-specific features. If Next.js removes Webpack support in a future major version, this workaround will break. Rollback: once the official fix is released, remove the `experimental.turbopack: false` line and retest the application to ensure dynamicIds are restored under Turbopack. For applications already in production with Turbopack, consider deploying the Webpack build until the fix is available.