nextjs - ✅(Solved) Fix Infinite "Compiling" loop with `opengraph-image.tsx` and Turbopack (Next.js 16) [2 pull requests, 19 comments, 9 participants]

nextjs2025-12-18 18:59:38

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.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#87322•Fetched 2026-04-08 02:07:12

View on GitHub

Comments

Participants

Timeline

Reactions

Author

Participants

Timeline (top)

commented ×19subscribed ×13labeled ×7mentioned ×7

Error Message

When navigating to pages that have an opengraph-image.tsx implemented, if any kind of error occurs in the console, Next.js starts recompiling global-error.tsx infinitely. Additionally, this issue also happens when navigating away from the problematic page. In the example project, the issue was probably triggered because the favicon.ico file does not exist, resulting in: At first, this may not seem like a major problem, but it continuously consumes processing power, with CPU usage rising above 80%. I also noticed that the size of the Turbopack traceback log keeps growing indefinitely, which suggests that the recompilation loop is not only stuck but also accumulating output without limit. The following screenshots were taken from the local environment, showing the issue as seen in the Turbopack traceback: Error Handling, SWC, Turbopack, Performance, Linking and Navigating

Root Cause

Fix Action

Fixed

Fixed by PR: Turbopack: retain loader tree order for metadata (https://github.com/vercel/next.js/pull/88487)

PR fix notes

PR #88487: Turbopack: retain loader tree order for metadata

Repository: vercel/next.js
Author: mischnic
State: closed | merged: True
Link: https://github.com/vercel/next.js/pull/88487

Description (problem / solution / changelog)

This appears to basically be a regression from https://github.com/vercel/next.js/pull/83115

Closes https://github.com/vercel/next.js/issues/87322

The app-page template was looking like this, cause the METADATA imports to be hoisted before the other ones:

const __TURBOPACK__layout__$23$0__ = () => require("MODULE_0");
const __TURBOPACK__not$2d$found__$23$1__ = () => require("MODULE_1");
const __TURBOPACK__forbidden__$23$2__ = () => require("MODULE_2");
const __TURBOPACK__unauthorized__$23$3__ = () => require("MODULE_3");
const __TURBOPACK__global$2d$error__$23$4__ = () => require("MODULE_4");
import __TURBOPACK__openGraph__$23$5__ from "METADATA_5";
const __TURBOPACK__layout__$23$6__ = () => require("MODULE_6");
import __TURBOPACK__openGraph__$23$7__ from "METADATA_7";
const __TURBOPACK__page__$23$8__ = () => require("MODULE_8");
import { AppPageRouteModule } from "next/dist/esm/server/route-modules/app-page/module.compiled" with {
    'turbopack-transition': 'next-ssr'
};

Now, they all use require. This way, the way we detect the layout segments actually corresponds to the loader tree order (e.g. layout, not-found, layout, opengraph, page)

const __TURBOPACK__layout__$23$0__ = () => require("MODULE_0");
const __TURBOPACK__not$2d$found__$23$1__ = () => require("MODULE_1");
const __TURBOPACK__forbidden__$23$2__ = () => require("MODULE_2");
const __TURBOPACK__unauthorized__$23$3__ = () => require("MODULE_3");
const __TURBOPACK__global$2d$error__$23$4__ = () => require("MODULE_4");
const __TURBOPACK__openGraph__$23$5__ = require("METADATA_5");
const __TURBOPACK__layout__$23$6__ = () => require("MODULE_6");
const __TURBOPACK__openGraph__$23$7__ = require("METADATA_7");
const __TURBOPACK__page__$23$8__ = () => require("MODULE_8");
import { AppPageRouteModule } from "next/dist/esm/server/route-modules/app-page/module.compiled" with {
    'turbopack-transition': 'next-ssr'
};

This was causing problems where client reference chunking was using the wrong orders, causing chunk name collisions, e.g.

/a/page
1. node_modules/next/dist/client/components/builtin/global-error.js [app-rsc] (ecmascript, Next.js Server Component, client modules)

/b/page:
1. [project]/app/b/opengraph-image--metadata.js [app-rsc] (ecmascript, Next.js Server Component, client modules)
2. node_modules/next/dist/client/components/builtin/global-error.js [app-rsc] (ecmascript, Next.js Server Component, client modules)

Changed files

crates/next-api/src/app.rs (modified, +5/-0)
crates/next-core/src/app_page_loader_tree.rs (modified, +24/-9)
packages/next/src/build/templates/app-page.ts (modified, +6/-6)
packages/next/src/lib/metadata/resolve-metadata.ts (modified, +1/-1)
test/e2e/app-dir/client-reference-chunking/app/issue/layout.tsx (added, +7/-0)
test/e2e/app-dir/client-reference-chunking/app/issue/opengraph-image.tsx (added, +32/-0)
test/e2e/app-dir/client-reference-chunking/app/issue/page.tsx (added, +8/-0)
test/e2e/app-dir/client-reference-chunking/app/layout.tsx (added, +20/-0)
test/e2e/app-dir/client-reference-chunking/app/page.tsx (added, +10/-0)
test/e2e/app-dir/client-reference-chunking/client-reference-chunking.test.ts (added, +38/-0)
test/e2e/app-dir/client-reference-chunking/next.config.js (added, +6/-0)

Code Example

GET http://localhost:3000/favicon.ico 404 (Not Found)

---

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.1.0-canary.34 // Latest available version is detected (16.1.0-canary.34).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/infinite-compiling-issue-mds8jf

To Reproduce

To reproduce the problem, simply click the Issue link in the center of the page. On the loaded page, the Next.js icon will switch to "Compiling" and will never exit that state.

Current vs. Expected behavior

GET http://localhost:3000/favicon.ico 404 (Not Found)

When I re-add the file, the problem disappears

This behavior only began after upgrading from version 15.* to 16.* with Turbopack enabled. Without Turbopack, the problem does not occur.

At first, this may not seem like a major problem, but it continuously consumes processing power, with CPU usage rising above 80%. I also noticed that the size of the Turbopack traceback log keeps growing indefinitely, which suggests that the recompilation loop is not only stuck but also accumulating output without limit.

The following screenshots were taken from the local environment, showing the issue as seen in the Turbopack traceback:

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.1.0-canary.34 // Latest available version is detected (16.1.0-canary.34).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Error Handling, SWC, Turbopack, Performance, Linking and Navigating

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

next dev (local)

Additional context

No response

extent analysis

TL;DR

The infinite compiling issue in Next.js with Turbopack enabled can be worked around by ensuring that all required files, such as favicon.ico, exist and are properly referenced.

Guidance

Verify that all files referenced in the code, including favicon.ico, exist in the expected locations to prevent 404 errors that might trigger infinite recompilation.
Check the console for any error messages that could indicate the root cause of the recompilation loop, such as missing files or incorrect imports.
Consider temporarily disabling Turbopack to isolate if the issue is specifically related to its functionality.
Review the Next.js and Turbopack documentation for any known issues or configuration options that might help mitigate this problem.

Example

No specific code example is provided due to the nature of the issue, but ensuring that favicon.ico exists and is correctly referenced in the project is a crucial step. For instance, if favicon.ico is missing, adding it to the public directory of the Next.js project could resolve the issue.

Notes

The issue seems to be closely related to the upgrade from Next.js version 15 to 16 with Turbopack enabled, suggesting potential compatibility or configuration issues. The provided environment information and screenshots indicate a complex scenario that might require further investigation into Next.js and Turbopack's interaction.

Recommendation

Apply workaround: Ensure all required files exist and are correctly referenced, and consider temporarily disabling Turbopack to troubleshoot the issue further. This approach allows for immediate mitigation of the problem while awaiting a potential fix in future versions of Next.js or Turbopack.

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?

#database connection #vector store #embedding generation #cache error #pipeline error

Still need to ship something?

×6

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

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

nextjs - ✅(Solved) Fix Infinite "Compiling" loop with `opengraph-image.tsx` and Turbopack (Next.js 16) [2 pull requests, 19 comments, 9 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Root Cause

Fix Action

Fixed

PR fix notes

PR #88487: Turbopack: retain loader tree order for metadata

Description (problem / solution / changelog)

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

TRENDING

nextjs - ✅(Solved) Fix Infinite "Compiling" loop with `opengraph-image.tsx` and Turbopack (Next.js 16) [2 pull requests, 19 comments, 9 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Root Cause

Fix Action

Fixed

PR fix notes

PR #88487: Turbopack: retain loader tree order for metadata

Description (problem / solution / changelog)

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING