Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Turbopack: `"use cache"` + `React.lazy` breaks server component HMR in dynamic routes [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#85538•Fetched 2026-04-08 02:15:10
View on GitHub
Comments
1
Participants
2
Timeline
7
Reactions
5
Author
RJWadleyRJWadley
Participants
BlvckParrotBlvckParrotRJWadleyRJWadley
Timeline (top)
labeled ×4commented ×1issue_type_added ×1subscribed ×1

Error Message

⨯ Error: Module [project]/app/dynamic.tsx [app-rsc] (client reference proxy) was instantiated because it was required from module [project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/esm/build/templates/app-page.js?page=/[[...slug]]/page { GLOBAL_ERROR_MODULE => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/global-error.js [app-rsc] (ecmascript, Next.js Server Component)", METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => "[project]/app/favicon.ico (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", METADATA_1 => "[project]/app/twitter-image.jpg.mjs { IMAGE => "[project]/app/twitter-image.jpg (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", METADATA_2 => "[project]/app/opengraph-image.jpg.mjs { IMAGE => "[project]/app/opengraph-image.jpg (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", MODULE_3 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js Server Component)", MODULE_4 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/not-found.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_5 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/forbidden.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_6 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/unauthorized.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_7 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/global-error.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_8 => "[project]/app/[[...slug]]/page.tsx [app-rsc] (ecmascript, Next.js Server Component)" } [app-rsc] (ecmascript) <locals>, but the module factory is not available. If I mark a layout file that uses React.lazy with "use cache" then edit a server component under that layout file, HMR will usually fail with an error along the lines of "Module ... was instantiated ... but the module factory is not available." This error does not occur on every HMR update, and there are lots of factors that make the error more or less frequent. Marking various files as client, removing social images, using catchall segments, that sort of thing. For example, if I remove opengraph-image.jpg and twitter-image.jpg the error becomes more rare but will still occur occasionally.

Root Cause

✓ Starting... ✓ Ready in 1617ms GET / 200 in 1312ms (compile: 1129ms, render: 183ms) GET / 200 in 92ms (compile: 33ms, render: 59ms) GET / 200 in 68ms (compile: 33ms, render: 35ms) ⨯ Error: Module [project]/app/dynamic.tsx [app-rsc] (client reference proxy) was instantiated because it was required from module [project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/esm/build/templates/app-page.js?page=/[[...slug]]/page { GLOBAL_ERROR_MODULE => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/global-error.js [app-rsc] (ecmascript, Next.js Server Component)", METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => "[project]/app/favicon.ico (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", METADATA_1 => "[project]/app/twitter-image.jpg.mjs { IMAGE => "[project]/app/twitter-image.jpg (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", METADATA_2 => "[project]/app/opengraph-image.jpg.mjs { IMAGE => "[project]/app/opengraph-image.jpg (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", MODULE_3 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js Server Component)", MODULE_4 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/not-found.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_5 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/forbidden.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_6 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/unauthorized.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_7 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/global-error.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_8 => "[project]/app/[[...slug]]/page.tsx [app-rsc] (ecmascript, Next.js Server Component)" } [app-rsc] (ecmascript) <locals>, but the module factory is not available. at ignore-listed frames { digest: '2530410352' }

</details>

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.11.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: 9.15.5
Relevant Packages:
  next: 16.0.2-canary.0 // Latest available version is detected (16.0.2-canary.0).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/RJWadley/dynamic-bug

To Reproduce

  1. Clone the issue reproduction and pnpm install
  2. Run the development server with pnpm dev and open the local preview
  3. Edit app/[[...slug]]/page.tsx and save it a few times
<details> <summary>View Log</summary> ⚡ pnpm dev

▲ Next.js 16.0.2-canary.0 (Turbopack, Cache Components)

✓ Starting... ✓ Ready in 1617ms GET / 200 in 1312ms (compile: 1129ms, render: 183ms) GET / 200 in 92ms (compile: 33ms, render: 59ms) GET / 200 in 68ms (compile: 33ms, render: 35ms) ⨯ Error: Module [project]/app/dynamic.tsx [app-rsc] (client reference proxy) was instantiated because it was required from module [project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/esm/build/templates/app-page.js?page=/[[...slug]]/page { GLOBAL_ERROR_MODULE => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/global-error.js [app-rsc] (ecmascript, Next.js Server Component)", METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => "[project]/app/favicon.ico (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", METADATA_1 => "[project]/app/twitter-image.jpg.mjs { IMAGE => "[project]/app/twitter-image.jpg (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", METADATA_2 => "[project]/app/opengraph-image.jpg.mjs { IMAGE => "[project]/app/opengraph-image.jpg (static in ecmascript, tag client)" } [app-rsc] (structured image object, ecmascript, Next.js Server Component)", MODULE_3 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js Server Component)", MODULE_4 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/not-found.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_5 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/forbidden.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_6 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/unauthorized.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_7 => "[project]/node_modules/.pnpm/next@[email protected]_react@[email protected]/node_modules/next/dist/client/components/builtin/global-error.js [app-rsc] (ecmascript, Next.js Server Component)", MODULE_8 => "[project]/app/[[...slug]]/page.tsx [app-rsc] (ecmascript, Next.js Server Component)" } [app-rsc] (ecmascript) <locals>, but the module factory is not available. at ignore-listed frames { digest: '2530410352' }

</details>

Current vs. Expected behavior

If I mark a layout file that uses React.lazy with "use cache" then edit a server component under that layout file, HMR will usually fail with an error along the lines of "Module ... was instantiated ... but the module factory is not available."

This error does not occur on every HMR update, and there are lots of factors that make the error more or less frequent. Marking various files as client, removing social images, using catchall segments, that sort of thing. For example, if I remove opengraph-image.jpg and twitter-image.jpg the error becomes more rare but will still occur occasionally.

If I remove "use cache", HMR works as expected. If I use webpack instead of turbopack, HMR works as expected. If I remove components that use React.lazy, HMR works as expected. Swapping React.lazy for next/dynamic has no effect.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.11.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: 9.15.5
Relevant Packages:
  next: 16.0.2-canary.0 // Latest available version is detected (16.0.2-canary.0).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

cacheComponents, Use Cache, Turbopack, Dynamic Routes, Lazy Loading

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

extent analysis

TL;DR

The most likely fix is to remove "use cache" from the layout file or switch from Turbopack to Webpack.

Guidance

  • Try removing "use cache" from the layout file to see if HMR works as expected.
  • If removing "use cache" is not feasible, consider switching from Turbopack to Webpack, as HMR works with Webpack.
  • Verify that the issue is resolved by editing a server component under the layout file and checking if HMR updates correctly.
  • If the issue persists, try removing components that use React.lazy to see if it's related to lazy loading.

Example

No code snippet is provided as the issue is more related to configuration and setup.

Notes

The issue seems to be related to the combination of "use cache", Turbopack, and React.lazy. Removing any of these factors seems to resolve the issue. However, the exact cause is unclear, and further investigation may be needed.

Recommendation

Apply workaround: Remove "use cache" from the layout file, as it's the simplest solution and has been reported to work. If this is not feasible, switching to Webpack is also a viable option.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#tool integration#LLM response#prompt template#agent execution#callback error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING