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
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
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",