I'm using react-force-graph's 2D component in a Next.js client component ('use client'), but still get ReferenceError: AFRAME is not defined when the component mounts. I've tried:

1. Wrapping in a Client Component

2. Dynamic import with ssr: false

Copy
const ForceGraph2D = dynamic(
  () => import('react-force-graph').then((mod) => mod.ForceGraph2D),
  { ssr: false }
);

Yet the error persists when the graph renders. Since this is clearly a client-side component:

Why does A-Frame still try to load?

Is there a way to force the 2D version to completely ignore A-Frame?

Would aliasing aframe to false in webpack help? Anyone have an idea why this happens?