How to use Tesseract.js in a React app

user_4339194 0
Viewed 4828

I am working on an app using React. I want to be able to load a pic and then have Tesseract.js convert it to text. I am using react-dropzone to load the image file and I can add the image to page with an img tag. But when I try to run the ocr using Tesseract It gives me this error:

Uncaught SyntaxError: Unexpected token < at blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1 (anonymous) @ blob:http://localhost:3000/ccac34f4-1f4a-4ba6-b455-a44345b71012:1

One post I read said to use a CDN, but then Tesseract is not included in my build process, which throws an error. So I think that I have to include it to use React.

tesseract.js reactjs
4 Answers

I had the same issue, and then I had to dig a bit to have it working using the CDN.

Here is what I did, I hope this can help a bit as a workaround:

  1. add <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script> in index.html inside <head></head>
  2. add var Tesseract = window.Tesseract; in App.js

Reference : https://github.com/naptha/tesseract.js/issues/134

user_13064910

I know it has been a long time for this question, right now tesseract.js@1.0.16 has fixed the issue, and it can be used with any frameworks like react, vue and angular with no more issues.

P.S. I am one of the contributors for tesseract.js right now, feel free to let me know if you have any issues/requirements. :)

user_114701660

Try this one:)

1) Install the node module npm i -S tesseract.ts tesseract.js

2) import Tesseract from 'tesseract.ts'

you are ready to go....

user_77421150

I just made a wrapper based on the Typescript Wrapper, using it with next.js (React) and its working.

TesseractWrapper.js

if (typeof window !== 'undefined') {
  const _instance = window ? require("tesseract.js/dist/tesseract") : require('tesseract.js');
  exports.Tesseract = _instance;
}

then I just

import { Tesseract } from '../../lib/TesseractWrapper';
user_16843820
Related