facesjs icon indicating copy to clipboard operation
facesjs copied to clipboard

How to export svg on nextjs

Open peterparkernho opened this issue 1 year ago • 1 comments

Hi,

I played facesjs library on the project, That project build from nextjs 14 but I got the issue when use the faceToSvgString function. the error is global is not define.

I have tried several but it still error. How can I use it on nextjs.

Thanks

peterparkernho avatar May 09 '24 07:05 peterparkernho

faceToSvgString is really intended for use in Node.js, not the browser. For the browser, it will be faster and have a smaller bundle size if you use display and then convert the rendered SVG to a string by calling wrapper.innerHTML on the div you display the face in. That's what the editor UI does to support downloading SVGs: https://github.com/zengm-games/facesjs/blob/19ce236af6adbf76db29c4e669210b30e1de0e1a/public/editor/downloadFace.ts#L61-L64

The only caveat with that approach is that you actually need to display the face, it can't be a hidden div or some things won't render properly.

If you really do need faceToSvgString it does work in browsers, I've run it in vite before and it worked without an error. You might need to do something like window.global = window; if something is looking for a global variable.

dumbmatter avatar May 09 '24 14:05 dumbmatter