Nextjs support

[saipranay47]

Giving this error while using Nextjs

[anuraglol]

Hey there

I'm getting the same error..did you found any solution.. Or any alternative to download dom as image?

[Brandyweb]

@kr-anurag @saipranay47 Yoou can use so

const exportImageRef = useRef();

React.useEffect(() => {
  if (typeof window !== undefined) {
     import('react-component-export-image').then(
       module => (exportImageRef.current = module)
     )
  }
}, [])

and to call the methods

const onDownload = () => {
  return exportImageRef.current?.exportComponentAsJPEG(ref)
}

Original Issue: #42

[SlayerAnsh]

Hey there,
I came across this problem while building a project in nextjs. Nextjs provides dynamic import which you can use to disable ssr.

For more information follow official docs. Here

Sample Code from docs:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

Edit:
You can now use the library inside NoSSR Component (in this case ../components/hello3) and it wont give to error.

[detautama]

Hey there, I came across this problem while building a project in nextjs. Nextjs provides dynamic import which you can use to disable ssr.

For more information follow official docs. Here

Sample Code from docs:

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

Edit: You can now use the library inside NoSSR Component (in this case ../components/hello3) and it wont give to error.

I got this error when trying import it

"react-component-export-image": "^1.0.6",
"next": "12.0.7",

[detautama]

This is work for me:

  <button onClick={async () => {
              const { exportComponentAsPNG } = await import('react-component-export-image')
              exportComponentAsPNG(componentRef)
        }}>
    Download as PNG
</button>

[danielcranney]

Thanks @detautama. Does this work for you on mobile devices? I'm trying to download on Chrome (on iPhone) and it doesn't download an image, just a file called 'download'.

[SirMajed]

This is work for me:

  <button onClick={async () => {
              const { exportComponentAsPNG } = await import('react-component-export-image')
              exportComponentAsPNG(componentRef)
        }}>
    Download as PNG
</button>

Thank you so much