TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

[daaanigm]

const ref = createRef()
const { image, takeScreenshot } = useScreenshot({ ref: ref })

return(
  <div ref={ref as React.RefObject<HTMLDivElement>}>
    {selectedItem && (
      <>
        <img
          className={`
                  ${css({
                    objectFit: 'cover',
                    objectPosition: 'center',
                    maxWidth: '100%',
                  })}
                  h-100
                `}
          src={getImage(selectedItem.images['3x']) || ''}
          alt={'img'}
        />
        <button onClick={() => takeScreenshot()}>TouchMe</button>
      </>
    )}
  </div>
)

It is returning the error TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

I think this error is because I am using nextJS.

Getting document.getElementById('root') is getting null, we should get document.getElementById('__next'), then, we can improve the library sending a new param with the id we want to get like as "root" in the useScreenShot() function or if it is returning null check with the first "root", try with "__next".

[kayotimoteo]

Same problem here, any solution?

[carlosferragut]

As shown in the code of the example, you should have an element with id="root" in order to work.