Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix String coercion syntax failing (variable += "") [2 comments, 3 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#85789•Fetched 2026-04-08 02:13:53
View on GitHub
Comments
2
Participants
3
Timeline
6
Reactions
0
Author
bkingerybkingery
Participants
bkingerybkingerygithub-actions[bot]github-actions[bot]mischnicmischnic
Timeline (top)
commented ×2closed ×1issue_type_added ×1labeled ×1

Code Example

nodeId += "" -> fails
nodeId = `${nodeId}` -> succeeds

---

const data = [
    { id: "root", parentId: "", size: null },
    { id: "a", parentId: "root", size: 10 },
    { id: "b", parentId: "root", size: 20 },
  ];

  var nodes = Array.from(data),
    currentId = (d) => d.id,
    currentParentId = (d) => d.parentId,
    n,
    i,
    nodeId;

  for (i = 0, n = nodes.length; i < n; ++i) {
    if ((nodeId = currentId(data[i])) != null && (nodeId += "")) {
      console.log("passed 1");
    }
    if ((nodeId = currentParentId(data[i])) != null && (nodeId += "")) {
      console.log("passed 2");
    }
  }

  for (i = 0, n = nodes.length; i < n; ++i) {
    if ((nodeId = currentId(data[i])) != null && (nodeId = `${nodeId}`)) {
      console.log("passed 3");
    }
    if ((nodeId = currentParentId(data[i])) != null && (nodeId = `${nodeId}`)) {
      console.log("passed 4");
    }
  }

---

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.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: 15.2.0
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.8.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/jvhqgh

To Reproduce

d3-hierarcy uses string coercion syntax that fails in Next v16 + React v19. The bug was originally reported here https://github.com/d3/d3/discussions/4064.

The nodeId += "" syntax is used here: https://github.com/d3/d3-hierarchy/blob/c4ae7066d5a52e8aeaab24b3f7113e25c38183f2/src/stratify.js#L53

For some reason using this syntax fails the check where as using string template syntax succeeds.

nodeId += "" -> fails
nodeId = `${nodeId}` -> succeeds

Example code:

 const data = [
    { id: "root", parentId: "", size: null },
    { id: "a", parentId: "root", size: 10 },
    { id: "b", parentId: "root", size: 20 },
  ];

  var nodes = Array.from(data),
    currentId = (d) => d.id,
    currentParentId = (d) => d.parentId,
    n,
    i,
    nodeId;

  for (i = 0, n = nodes.length; i < n; ++i) {
    if ((nodeId = currentId(data[i])) != null && (nodeId += "")) {
      console.log("passed 1");
    }
    if ((nodeId = currentParentId(data[i])) != null && (nodeId += "")) {
      console.log("passed 2");
    }
  }

  for (i = 0, n = nodes.length; i < n; ++i) {
    if ((nodeId = currentId(data[i])) != null && (nodeId = `${nodeId}`)) {
      console.log("passed 3");
    }
    if ((nodeId = currentParentId(data[i])) != null && (nodeId = `${nodeId}`)) {
      console.log("passed 4");
    }
  }

Current vs. Expected behavior

Running the example code, I expect all 4 conditions to log to the console.

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.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: 15.2.0
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

No response

extent analysis

TL;DR

Replace the string coercion syntax nodeId += "" with template literal syntax nodeId = ${nodeId}`` to resolve the issue.

Guidance

  • Identify all occurrences of nodeId += "" in the codebase and replace them with nodeId = ${nodeId}`` to ensure consistent string coercion.
  • Verify that the replacement resolves the issue by running the example code and checking the console output.
  • If issues persist, investigate other potential causes of string coercion failures in the codebase.
  • Consider updating the d3-hierarchy library to a version that uses template literal syntax, if available.

Example

// Before
if ((nodeId = currentId(data[i])) != null && (nodeId += "")) {
  console.log("passed 1");
}

// After
if ((nodeId = currentId(data[i])) != null && (nodeId = `${nodeId}`)) {
  console.log("passed 1");
}

Notes

The issue appears to be specific to the combination of Next.js v16 and React v19, and may not affect other versions or configurations.

Recommendation

Apply the workaround by replacing nodeId += "" with nodeId = ${nodeId}`` to resolve the issue, as the root cause is related to the string coercion syntax used in the d3-hierarchy library.

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…
#dependency error#configuration error#environment variable#network issue#logging issue

Still need to ship something?

×6

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

Back to top recommendations

TRENDING