Not compatible with React Native: "Can't find variable: document"

[fakhreddinechaabani]

Im new to react Native but I have more than 10 years of experience using JS.

for some reason, when I call the tesseract.recognize() I am getting a console warning (mentioned above) and no output.
Here are the steps that I followed:

first, navigated to the project -> npm install tesseract.js ( according to the description, would give the latest version)
then, created the following method:
process = function() { const { createWorker } = require('tesseract.js'); const worker = await createWorker(); (async () => { await worker.loadLanguage('eng'); await worker.initialize('eng'); const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png'); Alert.alert(text); await worker.terminate(); })(); };
and then calling this method as a callback from a button onclick event.
Im using running it on an iOS device.

[Balearica]

1. Please add the version number of Tesseract.js you are using to the issue description, as well as the browser/iOS version you are using
2. Please add a minimal reproducible example that can be run to produce the issue (either as a code snippet or by linking to a separate repo); the above code snippet does not look like it can actually be run without additional configuration

[danyhiol]

I think this is the same issue I am having here.

 Possible Unhandled Promise Rejection (id: 0):
ReferenceError: Can't find variable: document

[danyhiol]

A reproduction can be found here.

[Balearica]

@danyhiol I tried using your repo, and it worked without throwing any such error. The following text was printed.

Mild Splendour of the various-vested Night!
Mother of wildly-working visions! haill
I watch thy gliding, while with watery light
Thy weak eye glimmers through a fleecy veil;
And when thou lovest thy pale orb to shroud
Behind the gather’d blackness lost on high;
And when thou dartest from the wind-rent cloud
Thy placid lightning o’er the awaken’d sky.

If this repo produces an error, please provide instructions detailed enough that somebody with no experience with your project or React Native could reproduce.

[danyhiol]

@Balearica did you run it on the web?

1. Clone the project
2. npm install
3. npx expo start
4. on the same terminal press a (for android) or i (for ios) -> You need to have simulator/emulator set-up
   then you should get the error.

[Balearica]

@danyhiol Thank you for the more detailed instructions, I was able to replicate this issue.

We do not reference document anywhere directly in this codebase (examples for browser notwithstanding). I believe that the problem stems from using the npm package resolve-url, which adds references to document. Despite its popularity, this package appears to be depreciated and provides very basic functionality, so we should be able to remove it in the next version of Tesseract.js.

[Balearica]

I looked more into what React Native is, and it is fundamentally at odds with what Tesseract.js is. Tesseract.js is a webassembly port of Tesseract. React Native does not support webassembly. This was noted in #55, and it does not look like anything has changed since.

I updated the README to more clearly state that Tesseract.js is a webassembly port of Tesseract, as well as adding a line that explicitly states it does not support React Native. Hopefully this will avoid future confusion.