Unexpected token <

[brunoschuermans]

With version 1.0.10
When using the Simple example of the documentation i got:

Uncaught SyntaxError: Unexpected token <
at blob:http://localhost:3000/49b8248d-3fa6-4529-a4bc-532adde1c6cc:1
(anonymous) @ blob:http://localhost:3000/49b8248d-3fa6-4529-a4bc-532adde1c6cc:1

[SidneyNemzer]

Had the same issue. Solved by switching from NPM version to CDN version.

EG, remove import Tesseract from 'tesseract.js', add a script tag with the latest tesseract version <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

[CarlosAmaral]

Can someone shed some light on this? Adding a CDN isn't the best solution

@SidneyNemzer removing the import won't solve this though. At least using angular 4.

[adamczykjac]

Same here, tried using 1.5RC2 version of uglifyjs-webpack-plugin as suggested in angular/angular-cli#7756 (comment), but no effect.

[BrianTatum]

I am having the same issue in a react app. Anyone get this to work yet?

[SidneyNemzer]

Did switching to the CDN not fix it, @BrianTatum? I'm not sure why it seems to have worked only for me...

Obviously that's not a long term fix. Just a temporary fix to get it working for now.

[adamczykjac]

Indeed as @SidneyNemzer suggests, using the version from CDN works, but for TypeScript newcomers it may seem as a no-no, as we'd like to make use of
import * as Tesseract from 'tesseracts.js'
in our module after all. To get this working, apart from having
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>
in our index.html and removing the above import ... line from our module implementation, one needs to have a globally scoped declare var Tesseract in a file you declare your types (in my case it's typings.d.ts), so TS compilation can go through. To retain having hints in your IDE, just install Tesseract's types with npm install @types/tesseract.js --save-dev.

PS Have a double look at how you invoke Tesseract worker methods. In my case, I was missing an obvious ImageLike argument there, and I was getting the same error as this issue suggests -.-

[BrianTatum]

I am not sure if I am getting the image like file set correctly from some of the reading that I have done today. Is there a good example of getting the file set to pass into Tesseract? Update: I am trying to use this in a React app so the cdn will not work with my build. It has to be Imported. Also tried the React component call Dropzone to get the file. I can place the file in an image tag on the page, but still get the same error.

[adamczykjac]

@BrianTatum What do you mean exactly by file set? Afaik Dropzone is only another way to provide your API endpoint with some form data, so you'd need to get the location/name of this just uploaded file and pass it to Tesseract.recognize(yourFilePath) (as I assume you use it on the server side, which shouldn't matter after all).

Besides, I guarantee you don't have to import it into your React module to get this working via CDN, as React itself is a framework added within <script> tag, it's just being marshalled/compiled/squeezed along the way once "it get's there", i.e into your HTML document.

In case it's still not clear, get us some code so we can have a look at it and eventually help.

[Phongtlam]

I am getting the same error whether using CDN or import module
Here is my basic code

[urakozz]

Hey typescripters! I did a tiny and nice package solving this issue here: tesseract.ts.
Just install it and change import to

// npm i -S tesseract.ts tesseract.js
import {Tesseract} from "tesseract.ts";

@brunoschuermans @Phongtlam

[ichigo92]

@urakozz thanks for the package, solved this issue.