Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Javascript heap out of memory error when upgrading to Next.js 16+ [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#88614•Fetched 2026-04-08 02:04:17
View on GitHub
Comments
1
Participants
2
Timeline
6
Reactions
0
Author
salehkaddoura-foliosalehkaddoura-folio
Participants
github-actions[bot]github-actions[bot]salehkaddoura-foliosalehkaddoura-folio
Timeline (top)
labeled ×2closed ×1commented ×1issue_type_added ×1

Error Message

On one of my SSR pages, I have a component that is built like this. The SSR page would crash and next.js would throw a Javascript heap out of memory error.

Root Cause

Trying to reproduce this issue would be a bit difficult because it is happening within a custom components inside our codebase, that would take a lot of time to export and reproduce. So I am just going to paste the code and explain what is happening below.

Code Example

Operating System:
  Platform: linux
  Arch: arm64
  Version: #1 SMP Sat May 17 08:28:57 UTC 2025
  Available memory (MB): 17961
  Available CPU cores: 12
Binaries:
  Node: 24.13.0
  npm: 11.6.2
  Yarn: 4.12.0
  pnpm: N/A
Relevant Packages:
  next: 16.1.2
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.7.3
Next.js Config:
  output: standalone
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/salehkaddoura-folio/nextjs-starter

To Reproduce

Trying to reproduce this issue would be a bit difficult because it is happening within a custom components inside our codebase, that would take a lot of time to export and reproduce. So I am just going to paste the code and explain what is happening below.

Current vs. Expected behavior

On one of my SSR pages, I have a component that is built like this. The SSR page would crash and next.js would throw a Javascript heap out of memory error.

description={ <div className="flex flex-row gap-1 items-center"> <UIHiOutlineMapPin className="shrink-0" />{" "} <span className="truncate hover:overflow-visible"> {job.organization_obj.geocode_obj ? getLocationString(job.organization_obj.geocode_obj) : null} </span> </div> }

But when I updated the component to work like this

const locationString = job.organization_obj.geocode_obj ? getLocationString(job.organization_obj.geocode_obj) : "";

return ( <UIUserInfo description={locationString} />);

the page stopped crashing and would load normally. Why is passes a ReactNode as a prop to this component causing the page to crash?

If i pass a string to the description prop everything works fine, but once I pass in any type of HTML elements the page crashes.

I am extremely confused on why this would be happening.

Provide environment information

Operating System:
  Platform: linux
  Arch: arm64
  Version: #1 SMP Sat May 17 08:28:57 UTC 2025
  Available memory (MB): 17961
  Available CPU cores: 12
Binaries:
  Node: 24.13.0
  npm: 11.6.2
  Yarn: 4.12.0
  pnpm: N/A
Relevant Packages:
  next: 16.1.2
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.7.3
Next.js Config:
  output: standalone

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

React

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

next dev (local)

Additional context

No response

extent analysis

TL;DR

Passing a ReactNode as a prop to the UIUserInfo component causes a crash due to potential issues with server-side rendering (SSR) or infinite recursion.

Guidance

  • Verify if the getLocationString function is causing an infinite recursion or an issue with SSR by checking its implementation and ensuring it doesn't rely on any client-side only APIs.
  • Check the UIUserInfo component to see if it's designed to handle ReactNode props correctly, especially during SSR.
  • Consider adding a check to ensure that the description prop is a string before passing it to the UIUserInfo component to prevent potential crashes.
  • Review the Next.js documentation on SSR and ReactNode props to ensure that the implementation is correct.

Example

const locationString = job.organization_obj.geocode_obj
  ? getLocationString(job.organization_obj.geocode_obj)
  : "";

// Add a check to ensure description is a string
if (typeof locationString !== 'string') {
  locationString = '';
}

return (
  <UIUserInfo
    description={locationString}
  />);

Notes

The issue might be related to the specific implementation of the getLocationString function or the UIUserInfo component, which is not provided in the issue. Further investigation is needed to determine the root cause.

Recommendation

Apply workaround: Add a check to ensure that the description prop is a string before passing it to the UIUserInfo component to prevent potential crashes. This will help prevent the crash, but the underlying issue with the getLocationString function or the UIUserInfo component still needs to be addressed.

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…
#api#ssr#installation#tensor shape#autograd 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