search

donatso / family-chart

family tree visualization built on top of d3
MIT License
179 stars 63 forks source link

is it important to keep the family-chart.css file in the same directory as .js file, because it creates the below error while using with nextjs. #21

Open kumar-abhinit opened 1 year ago

kumar-abhinit commented 1 year ago

Since in nextjs we can only create a single globals.css file and put all the style there only, hence putting the code of family-chart.css in there and using it after that causes the error as SVGLengtherror

This is the comment you have attached with the import css file. cssError

because importing it locally as raw .css file hinders it's use in other libraries of react like nextjs, hope you got the issue

kumar-abhinit commented 1 year ago

please check at line 3 in the second pic above

donatso commented 1 year ago

Issue seems to be that nextjs is trying to render component on server side. Try to make sure that it is rendered when page is loaded on client side only. Css import should not be a problem, you can put css code in global.css as well.

kumar-abhinit commented 1 year ago

Okay, I will try, if you can reference me the replica of that client-side-rendering? Please let me know the steps through which I can do that.

yaba101 commented 4 months ago

@kumar-abhinit Adding fake delay like promise fixed that problem for me in Nextjs 14 const delay = (ms: number) => new Promise((res) => setTimeout(res, ms)); call this in useEffect before the familytree renders