react-native-vision-camera | 'Camera' cannot be used as a JSX component

Question

In my React Native project, I want to use the QR code reader from react-native-vision-camera version "^3.8.2" (the latest version).

I believe that I have implemented everything correctly according to the documentation, but I am encountering a very strange error.

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'Camera' cannot be used as a JSX component.
  Its instance type 'Camera' is not a valid JSX element.
    Type 'Camera' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.

My implementation:

import { useCameraPermission, useCameraDevice, useCodeScanner, CameraProps, Camera } from "react-native-vision-camera";
import { View } from "react-native";

const QrScanner = () => {
    const device = useCameraDevice('back')
    const { hasPermission, requestPermission } = useCameraPermission();
    const codeScanner = useCodeScanner({
        codeTypes: ['qr', 'ean-13'],
        onCodeScanned: (codes) => {
            console.log(`Scanned ${codes.length} codes!`)
        }
    });

    if (!device) return <View />;
    return (
        <View>
            <Camera device={device} {...codeScanner} />
        </View>
    );
};

export default QrScanner;

Any ideas?

i tried

<Camera codeScanner={codeScanner} />

The same error here.

Answer 1

When Component cannot be used as a JSX component, it is a Typescript error that can come from a few different areas.

• Make sure your app is compatible with the latest version of react-native-vision-camera. For instance, my app is not compatible so I use v3.5.1.
• Your babel may also not be configured correctly. Look through the packages Example App and make sure your configs/packages all match up.
• In your package.json, make sure your @types/ package versions match your corresponding packages, such as @types/react: x.x.x matches your react: x.x.x
• Some people needed to add the dependencies to make their app compile, such as

"@types/react-dom": "17.0.14",
"@types/react": "~18.0.0",
"@types/react-native": "~0.69.1",

or

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2",
  "graphql": "^16.5.0"
},

• For others, removing the above packages worked.
• Maybe you need to update your type versions, something like npm install --save-dev @types/react @types/react-dom @types/react-native or use yarn instead of npm to update.

Best of luck!