RefernceError: Property 'Worker' doesn't exist

[Moz Khalaf]

Hello all, 

I am wondering what is causing the error I am getting. 

I just want to take the image chosen from the image picker and perform OCR on it, but I'm running into this error and I am not sure how to get around it. Thanks in advance for your help!

my code: 

import React, { useState } from 'react';

import { View, Text, Button, Image, ScrollView, TouchableOpacity } from 'react-native';

import { createWorker } from 'tesseract.js';

import { SafeAreaView } from 'react-native-safe-area-context';

import * as ImagePicker from 'expo-image-picker';

const CapturePhotos = () => {

const [images, setImages] = useState([]);

const [extractedText, setExtractedText] = useState('');

const pickImage = async () => {

const result = await ImagePicker.launchImageLibraryAsync({

mediaTypes: ImagePicker.MediaTypeOptions.Images,

aspect: [4, 3],

quality: 1,

allowsMultipleSelection: true,

})

if (!result.cancelled) {

console.log(result.assets[0].uri);

setImages([...images, result.assets[0].uri]);

}

};

const processImageWithOCR = async (uri) => {

const worker = await createWorker(

'eng'

);

const { data: { text } } = await worker.recognize(uri);

console.log(text);

return data.text;

};

return (

<SafeAreaView className="flex-1">

<View className="p-4">

{/* Button to pick images */}

<TouchableOpacity

className="bg-blue-500 rounded-md p-3 mb-4"

onPress={pickImage}

>

<Text className="text-white text-center">Capture Page</Text>

</TouchableOpacity>

<ScrollView className="mt-4">

{images.map((uri, index) => (

<Image key={index} source={{ uri }} className="w-24 h-36 mb-4" resizeMode='contain' />

))}

</ScrollView>

{/* Button to process OCR */}

<TouchableOpacity

className="bg-green-500 rounded-md p-3 mt-4"

onPress={processImageWithOCR}

>

<Text className="text-white text-center">Process Images</Text>

</TouchableOpacity>

{/* Display extracted text */}

{/* <ScrollView className="mt-4">

<Text className="text-base">{extractedText}</Text>

</ScrollView> */}

</View>

</SafeAreaView>

);

};

export default CapturePhotos;

[Jeremiah]

In general, this group is for discussing the main Tesseract program.  If you want to discuss issues specific to Tesseract.js, the appropriate place to post is in the Tesseract.js Git Discussions.

Concerning this particular issue, you appear to be trying to use Tesseract.js with React Native.  This is not possible because Tesseract.js uses a WebAssembly build of Tesseract and React Native does not support WebAssembly.  This is documented in the Tesseract.js FAQ here, as well as in several Git Issues.