Closed m-hagberg closed 3 years ago
I don't know how to integrate a Dom Library into react but I am pretty sure there is a hook which tells you that the element is mounted and available. You are trying to add the svg to the node before you even returned it. How is it supposed to exist at this point?
So, the node is not in the Dom when you call svg. Make sure that the node exists in the dom
Thanks, you're absolutely right. Been quite a few years since I've worked with React, so I'm still getting used to the lifecycle stuff.
Using the Effect hook worked perfectly, everything is executing as expected.
const Animation: React.FC = () => {
useEffect(() => {
let draw = SVG().addTo('#draw')
draw.rect(150,100).fill('#f03')
})
return (
<div id="draw"></div>
);
}
Bug report
I can't get SVG.js to run in a Next.js project I'm working on (with Typescript).
I've tried multiple different ways, from the super-minimal approach below, to using
React.FC
as a separate component.Fiddle
https://repl.it/@pestbarn/PeachpuffDutifulHashmaps#pages/index.tsx (might take a minute to compile)
Explanation
Callstack: https://pastebin.com/xXSt6xab