Skip to content

String coercion syntax failing (variable += "") #85789

@bkingery

Description

@bkingery

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 d3/d3#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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions