Can't use <Path> inside SVG properly in React -TS-D3 project

So, I’m learning D3 following this tutorial → Data Visualization with D3, JavaScript, React - Full Course [2021] - YouTube

And I’m doing the exact same thing but I get an error :

Expected at least 1 argument, but got 0.

Which I can’t understand for what reason?



const mouthArc = arc()
  .innerRadius(90)
  .outerRadius(100)
  .startAngle(0)
  .endAngle(Math.PI * 2);
return(
<svg>
  <path d={mouthArc()} />     {/* This line */}
</svg>
)

Can anyone please help?

console.log(mouthArc()) and make sure it’s generating the correct output. Test it by pasting the output in a simple SVG file (just copy your component’s output) and view it in a browser (should see an arc).

Really, it’s hard to debug without a working demo and this looks correct (I’ve got many examples just like this in my code) so post a link to a codepen demo (or similar) and it will be easier to debug. I dropped your code verbatim in a plain JS react (v18) / d3 (v7) app and it worked.