I was getting the 'window is not defined' error when importing react-ponent-export-image so I used a dynamic import to get around that. I don't get that error anymore but now I get 'exportComponentAsPNG(ponentRef) is not a function'. Is there a better way to deal with the 'window is not defined' error or a way to use the function I am importing dynamically? If not, is there a different npm library that works to generate an image from a react ponent?

import React, { useRef } from 'react'
// import { exportComponentAsPNG } from 'react-ponent-export-image' *This gave window not defined error so I used dynamic import*
import dynamic from 'next/dynamic'
import ProductCard from '../ProductCard/ProductCardponent'
import Button from '../Button/Buttonponent'

const { exportComponentAsPNG } = dynamic(
  () => import('react-ponent-export-image'),
  {
    ssr: false
  }
)

const Plaque = () => {
 const ponentRef = useRef()

  // eslint-disable-next-line react/display-name
  const ComponentToPrint = React.forwardRef((props, ref) => {
    return (
      <div ref={ref}>
        <ProductCard />
      </div>
    )
  })

  return (
        <ComponentToPrint ref={ponentRef} />
          <button onClick={() => exportComponentAsPNG(ponentRef)}> // "Error: exportComponentAsPNG is not a function"
          Export As PNG
        </button>
  )
}

export default Plaque

I was getting the 'window is not defined' error when importing react-ponent-export-image so I used a dynamic import to get around that. I don't get that error anymore but now I get 'exportComponentAsPNG(ponentRef) is not a function'. Is there a better way to deal with the 'window is not defined' error or a way to use the function I am importing dynamically? If not, is there a different npm library that works to generate an image from a react ponent?

import React, { useRef } from 'react'
// import { exportComponentAsPNG } from 'react-ponent-export-image' *This gave window not defined error so I used dynamic import*
import dynamic from 'next/dynamic'
import ProductCard from '../ProductCard/ProductCard.ponent'
import Button from '../Button/Button.ponent'

const { exportComponentAsPNG } = dynamic(
  () => import('react-ponent-export-image'),
  {
    ssr: false
  }
)

const Plaque = () => {
 const ponentRef = useRef()

  // eslint-disable-next-line react/display-name
  const ComponentToPrint = React.forwardRef((props, ref) => {
    return (
      <div ref={ref}>
        <ProductCard />
      </div>
    )
  })

  return (
        <ComponentToPrint ref={ponentRef} />
          <button onClick={() => exportComponentAsPNG(ponentRef)}> // "Error: exportComponentAsPNG is not a function"
          Export As PNG
        </button>
  )
}

export default Plaque

• javascript
• reactjs
• next.js

• What happens if you create a handleClick() function which calls exportComponentAsPNG(ponentRef) and then just place () => handleClick() in your onClick – Mark Williams Commented Nov 16, 2021 at 13:42
• @MarkWilliams I gave that a shot but I still get TypeError: exportComponentAsPNG is not a function – Cole Commented Nov 16, 2021 at 20:21

2 Answers 2

The exportComponentAsPNG function needs access to window which is undefined with server side rendering. I was able to fix the issue by dynamically importing the Plaque ponent that used exportComponentAsPNG to the page where it is called with sever side rendering set to 'false'.

import dynamic from 'next/dynamic'

const Plaque = dynamic(() => import('../pnonents/Plaque'), {
  ssr: false
})

const Page = () => {
  return <Plaque />
}

export default Page

Now that the ponent is no longer using SSR I was able to import and use the function normally.

import { exportComponentAsPNG } from 'react-ponent-export-image'

Here you can find the documentation for the library: https://www.npmjs./package/react-ponent-export-image

next/dynamic is used to dynamically import React ponents, not regular JavaScript functions or libraries.

For that, you can use a regular dynamic import on exportComponentAsPNG inside the onClick callback.

<button onClick={async () => {
    const { exportComponentAsPNG } = await import('react-ponent-export-image')
    exportComponentAsPNG(ponentRef)
}}>