qq15725 / modern-screenshot

📸 Quickly generate image from DOM node using HTML5 canvas and SVG
https://www.toolpkg.com/image/html-to-image
MIT License
457 stars 32 forks source link

Cannot use any function in Next js [Internal server error/Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.] #65

Closed stachsoppo closed 7 months ago

stachsoppo commented 7 months ago

Hello. I've came here from html-to-image library as this fork seems to solve all the little annoying bugs that html-to-image can not. I' am working on a big Next.js (SSR/ISR) project. Unfortunately i cannot even execute any function (I am perfectly sure i am doing it on a client side, as it would work on the click event). The error seems to be related with some in-library exports/imports, but I am unable to find the cause. Didn't test with vite as it is rather not an option at this stage of the project.

Steps To Reproduce

Create next js app, download the library and try to execute this code snippet on any element: `
import { domToJpeg } from 'modern-screenshot'

...

const onClick = async () => { const el = document.querySelector('main') if (!el) return const data = await domToJpeg(el as HTMLElement) console.log({ data }) }`

index.js:568 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderContextProvider at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderIndeterminateComponent at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderNode at renderChildrenArray at renderNodeDestructiveImpl at renderNodeDestructive at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderIndeterminateComponent at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderContextProvider at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderContextProvider at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderIndeterminateComponent at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderIndeterminateComponent at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderNode at renderChildrenArray at renderNodeDestructiveImpl at renderNodeDestructive at renderElement at renderNodeDestructiveImpl at renderNodeDestructive at renderNode at renderChildrenArray at renderNodeDestructiveImpl at renderNodeDestructive at renderElement

Your Environment

"next": "13.4.7", "react": "18.2.0", "react-dom": "18.2.0", "modern-screenshot": "^4.4.36",