ReferenceError: Property 'document' doesn't exist

Question

friend. I seeketh thy assistance in recognizing the text from an image. I hath utilized tesseract.js for this purpose. Pray, how may I rectify this matter?

import Tesseract from 'tesseract.js';

const recognizeImage = async () => {
    try {
      console.log("image uri ==> ", image.uri);
      const result = await Tesseract.recognize(image.uri, 'eng', {});
      setRecText(result);;
    } catch (err) {
      console.log(err);
    }
  };

return (
<TouchableOpacity onPress={recognizeImage}>
        <Text style={styles.button}>Recognize</Text>
      </TouchableOpacity>
)

In terminal

Image uri:

file:///data/user/0/com.recoginize_poke/cache/rn_image_picker_lib_temp_09d32693-dd14-44ff-a7a7-cbbeab1d6001.png

[ReferenceError: Property 'document' doesn't exist]

Answer 1

According to your import statement you are using tesseract.js, and the rest of the code and the tags suggest, that you are trying to use it in a React Native application. However, the documentation of tesseract.js clearly states, that

React Native is not supported as it does not support Webassembly.

Also, the error message you get is similar to the one mentioned in this issue on the tesseract.js GitHub page, which also states, that tesseract does not work with React Native.

In order to get around this, you could upload the image to your backend, do the OCR processing of the image there and send the results back to your React Native frontend.

I hope this helps.