Edge labels not visible in Next.js builds

[wasimsandhu]

Describe the bug

I am unable to render edge labels for my graph's edges in a Next.js app.

This is a technically a duplicate of #93, which was fixed and closed sometime a year ago. The same bug is once again reproducible in both the development and production server.

Steps to Reproduce the Bug or Issue

Code (same as in #93):

import dynamic from "next/dynamic";

const GraphCanvas = dynamic(
  import("reagraph").then((mod) => mod.GraphCanvas),
  { ssr: false }
);

export default function Test() {
  return (
    <GraphCanvas
      labelType="all"
      nodes={[
        {
          id: "n-1",
          label: "1",
        },
        {
          id: "n-2",
          label: "2",
        },
      ]}
      edges={[
        {
          id: "1->2",
          source: "n-1",
          target: "n-2",
          label: "Edge 1-2",
        },
      ]}
    />
  );
}

Strangely, if I use labelType="all" or labelType="auto", then all of the edge labels appear in the center of the graph.

Expected behavior

The edge labels should be rendered appropriately.

Screenshots or Videos

Platform

• Reagraph Version: 4.21.0
• Next.js Version: 14.2.16
• OS: macOS
• Browser: Chrome
• NodeJS version: 20.18

Your Example Website or App

No response

Additional context

For anyone who comes across this, I ended up switching to react-flow because of this issue.