Skip to content

Infinite "Compiling" loop with opengraph-image.tsx and Turbopack (Next.js 16) #87322

@carlosleandr

Description

@carlosleandr

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.

Image

Current vs. Expected behavior

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:

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.

Image

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

Image Image Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Error HandlingRelated to handling errors (e.g., error.tsx, global-error.tsx).PerformanceAnything with regards to Next.js performance.TurbopackRelated to Turbopack with Next.js.linear: turbopackConfirmed issue that is tracked by the Turbopack team.locked

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions