"ReferenceError: Property 'Image' doesn't exist" using React Native

[Qdobbela]

Hi,

I'm using react native to try to find barcodes in a single image. However, I keep getting this error code and I don't know why. Is it because Quagga2 is not compatible with react native or do i have a wrong src or something? I can see the picture in the Image component when using the same source.

code:

`import React, { useEffect } from 'react'; import { View, Text, Image, StyleSheet } from 'react-native'; import Quagga from '@ericblade/quagga2';

function TakenPicture({navigation, route}: {navigation: any, route: any}){ const picture = route.params.photo; const path = "file://" + picture.path;

useEffect(() => {
    console.log("initializing quagga");
    Quagga.decodeSingle({
        src: path,
        numOfWorkers: 0,  // Needs to be 0 when used within node
        inputStream: {
            size: 800  // restrict input-size to be 800px in width (long-side)
        },
        decoder: {
            readers: ["code_128_reader"] // List of active readers
        },
    }, function(result) {
        if(result.codeResult) {
            console.log("result", result.codeResult.code);
        } else {
            console.log("not detected");
        }
    });
}, []);

return(
    <View style={styles.imageContainer}>
        <Image style={styles.image} source={{uri: path}}/>
    </View>
)

}`

Error:

WARN Possible Unhandled Promise Rejection (id: 1): ReferenceError: Property 'Image' doesn't exist ReferenceError: Property 'Image' doesn't exist at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:149155:46) at setInputStream (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:149314:107) at value (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:149671:78) at init (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:149829:209) at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:149880:23) at tryCallTwo (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/4i495j47/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:61:9) at doResolve (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/4i495j47/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:216:25) at Promise (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/4i495j47/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:82:14) at decodeSingle (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:149878:258) at anonymous (http://10.0.2.2:8081/pages/TakenPicture.bundle//&platform=android&app=com.gs1bare&modulesOnly=true&dev=true&minify=false&runModule=true&shallow=true:21:35) at commitHookEffectListMount (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:94400:38) at commitPassiveMountOnFiber (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:95601:44) at commitPassiveMountEffects_complete (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:95573:40) at commitPassiveMountEffects_begin (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:95563:47) at commitPassiveMountEffects (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:95553:40) at flushPassiveEffectsImpl (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:97229:34) at flushPassiveEffects (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:97184:43) at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gs1bare&modulesOnly=false&runModule=true:97017:34)

[github-actions[bot]]

Thank you for filing an issue! Please be patient. :-)

[ericblade]

I know nothing about React Native, though my first thought is that without either browser or nodejs, it's going to have a difficult time working, if it's even possible. Without sourcemaps, I can't really tell anything definite from that backtrace. I definitely don't know what it's referring to for "property 'Image'".

I don't even have any idea which setInputStream() call is getting hit, the one for node or the one for browser. :|