Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type error in Webcam {() => JSX.Element} #409

Open
3 tasks done
amitesh-zeni opened this issue Sep 26, 2024 · 1 comment
Open
3 tasks done

Type error in Webcam {() => JSX.Element} #409

amitesh-zeni opened this issue Sep 26, 2024 · 1 comment

Comments

@amitesh-zeni
Copy link

amitesh-zeni commented Sep 26, 2024

Please follow the general troubleshooting steps first:

Bug reports:

CodeSandbox: https://codesandbox.io/p/sandbox/v2gpf8
Type Error:

Type '() => JSX.Element' is not assignable to type '((string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null) & ((childrenProps: ChildrenProps) => Element)) | undefined'.
  Type '() => JSX.Element' is not assignable to type 'string & ((childrenProps: ChildrenProps) => Element)'.
    Type '() => JSX.Element' is not assignable to type 'string'.

What can be the best way to remove this error?
Just passing the Element doesn't help. I am using React 18.3.1 and seems like the error is because in React 18, the children prop now needs to be listed explicitly when defining props; or something on those lines.
Please help!

@sami-azzam
Copy link

sami-azzam commented Oct 10, 2024

Try capturing with ref instead: Guide.

Here is my code in TypeScript:

import Webcam from 'react-webcam'
import { useCallback, useRef } from 'react'

const videoConstraints = {
    width: 400,
    height: 400
}

export default function AvatarInput() {
  const webcamRef = useRef<Webcam>(null)

  // Call this function to take a screenshot
  const capture = useCallback(() => {
    const imageSrc = webcamRef.current?.getScreenshot()
    return imageSrc
  }, [webcamRef])

  return (
      <Webcam
        ref={webcamRef}
        height={400}
        width={400}
        screenshotFormat="image/jpeg"
        videoConstraints={videoConstraints}
        mirrored
      />
  )
}

Edit: I see you were already using a ref, so there is no need to add children in the Webcam component. Just use the ref to capture just like the guide and my sample code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants