Cannot read property 'arrayBuffer' of undefined (Electron & React)

[karlhadwen]

Describe the bug
I've spent a few hours tonight trying to get tesseract.js working with an application I've been building. The stack is Electron & React and I can't seem to get it to work, I've pulled both the Electron & React example applications and they seem to work fine, but with my application, I'm bundling React inside Electron--which I think might be causing this issue.

At first, my application wasn't loading the languages with the default setup, so I went ahead and moved to the offline tesseract. To do this, I used Webpack to copy the files from the node_modules to my build folder using copy-webpack-plugin, this works fine, so then I went ahead and created the worker like so:

const worker = createWorker({
  cacheMethod: 'none',
  langPath: `http://localhost:3000/static/vendor/lang-data/eng.traineddata`,
  workerPath: `http://localhost:3000/static/vendor/worker.min.js`,
  corePath: `http://localhost:3000/static/vendor/tesseract-core.wasm.js`,
  logger: (m) => console.log(m),
});

Note: If I remove http://localhost:3000/ - I get Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The URL '/static/vendor/worker.min.js' is invalid.

After running the application with the steps below, I get the following error: Uncaught (in promise) TypeError: Cannot read property 'arrayBuffer' of undefined - I've spent a few hours trying to debug this, but to no avail. The langPath, workerPath, corePath all seem correct, and I can access these directly in the browser.

I'm kind of stumped at this point, any help would be appreciated.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://github.com/karlhadwen/notes' - pull the repo
2. yarn install & yarn dev
3. Click the [+] button on the bottom left (with console open)
4. See error (Cannot read property 'arrayBuffer' of undefined)

Expected behavior
To read the data from the image in 'http://localhost:3000/note.png' - which is the example image.

Screenshots

App.js: https://github.com/karlhadwen/notes/blob/master/src/App.js
electron.js: https://github.com/karlhadwen/notes/blob/master/public/electron.js
.webpack.config.js: https://github.com/karlhadwen/notes/blob/master/.webpack.config.js

Desktop (please complete the following information):

• OS: OS X (10.15.4)
• Electron & Chrome - both do not work
• Version: ^2.1.1

Additional context
Repo where this is happening: https://github.com/karlhadwen/notes/

[gnonio]

You mentioned: Failed to execute 'importScripts'
I got similar errors until I added the following parameter to worker options:
workerBlobURL: false which bypasses importScripts method

and been able to use relative paths on remaining config

also, keep on the fence, the option is supposedly to be suppressed according to a code comment on spawnWorker.js
and I am basing my code on tesseract.js not its offline example

some related issues:
#219
#322

[karlhadwen]

Hi @gnonio thanks for taking the time to look at this issue. That actually got me to the next step, importing from a relative path isn't erroring anymore, but the new errors are:

AdaptedTemplates != nullptr:Error:Assert failed:in file /workspace/tesseract/src/classify/adaptmatch.cpp, line 196

Uncaught Error: RuntimeError: abort(undefined). Build with -s ASSERTIONS=1 for more info. at createWorker.js:173 at Worker.worker.onmessage (onMessage.js:3)

This seems to be happening a lot from some of the issues I've seen on here. This is using the offline scripts (I believe) from the relative path, so I don't understand how I'm now getting this error. Most of the time when you see this error, it's fixed when using offline scripts. Any ideas on this one?

If I remove the langPath, it goes back to 'arrayBuffer' of undefined, so maybe there is an issue with the langPath here, although if I directly go to the URL that's relative, the language file is downloaded, so it's definitely there.

[gnonio]

It's a little beyond me now, but I did had langPath issues with the offline build. If I remember correctly It was having difficulty in finding osd.traineddata.gz at some point which is not a language itself but part of the Orientation and Script Detection (OSD), these were only present in 4.0.0_fast langPath. At the time CSP issues were also hitting which I solved on the extension manifest side, but I duplicated those files in 4.0.0 and 4.0.0_best and I think I got rid of one of those errors. If you are getting undefined this could be it.

[karlhadwen]

Thanks @gnonio, I appreciate the help. I can't seem to get past where I'm at currently, so I'll just leave this issue open.

[schrufygroovy]

I had exactly same issues and spent some hours on figuring out the problem.

In my case I was using: https://electron-react-boilerplate.js.org/docs/adding-dependencies
It is using: Two Package Structure

@karlhadwen According to your https://github.com/karlhadwen/notes/blob/master/package.json you are also using this "Two Package Structure" but you dont have any app/package.json ?

The issue resolved for me when:

• I added the dependency to tesseract.js in the ./app/package.json instead of ./package.json (I guess because tesseract.js has a dependency on tesseract.js-core which is a "native" module)
• as in this example I specified the cachePath

[karlhadwen]

@schrufygroovy hmm, I don't have a ./app/package.json, this is the first I've heard of it (new to Electron), although if I remove install-app-deps and go back to a single package structure, I still get the same issue. I've left install-app-deps in and added ./app/package.json - but then I get a few issues around Error: Application entry file build/electron.js in ... does not exist. - do you by any chance have a project example for the setup with React/Electron and the two package structure?

[schrufygroovy]

https://github.com/schrufygroovy/score-archive/tree/for-karl
here is a rudimental example repo that uses the https://electron-react-boilerplate.js.org example. I just exchanged the async increment function with parseImageAsync function that uses tesseract.js . I hope this example helps you.

PS: What I figured out is that the cached eng.traineddata file seems to become corrupted regularly. In that case you simply have to restore that file. You can also use cachemethod readonly to avoid it being changed.

[ColorfulHorse]

Did you resolve it? I have same problem with electron+vue

[karlhadwen]

Can't say the above solved it for me, I kind of just gave up.

[ColorfulHorse]

It seems fetch traineddata response is undefined. when langPath is https://tessdata.projectnaptha.com/4.0.0 everything ok , but error when langPath is localhost

[ColorfulHorse]

@karlhadwen When I try fallback version to 2.0.0, it's ok , it seems a bug of v2.1.1

[ColorfulHorse]

@karlhadwen When I try fallback version to 2.0.0, it's ok , it seems a bug of v2.1.1

@jeromewu Actually，when I fallback version to v2.0.1, this problem still exist. After review source code，it seems because of replace axios to fetch? I'm not sure，I'm new of web.

[marcoippolito]

I'm having the same problem with Electron.js + Vue.js : #465

[karlhadwen]

I think everyone is having a similar problem, I spent hours on it but got nowhere. Maybe one of the authors can help?

[marcoippolito]

Version 2.0.0. is ok: #465 (comment)
This means that version 2.0.1 has a bug

[Shiuyin]

Have the same problem. After HOURS of trying, it has to be the traineddata file being corrupted. When i hard refresh electron, it always works on the first scan and fails on each consecutive with abort(undefined) when using local files.

[schrufygroovy]

@Shiuyin in that scenario with corrupted traineddata file you can try: cacheMethod : readOnly (see: https://github.com/naptha/tesseract.js/blob/master/docs/api.md#create-worker). that solved the corrupted data file problem for me.

[CedricCouton]

Hi, are exist some news about this issue ? When I read the code the problem is due to the commit on getEnvironment.js where electron is introduced. After that this code const resp = await (isWebWorker ? fetch : adapter.fetch)(${path}/${lang}.traineddata${gzip ? '.gz' : ''}); cannot work properly because isWebWorker is false and the adapter.fetch do nothing cf. worker.setAdapter({ getCore, gunzip, fetch: () => {}, ...cache, });
The electron implementation is not finished ?

[CedricCouton]

When we are in a webview where the url is load from another side that electron itself the isElectron must be return false, isn't it ? So the web app in the webview could use the fetch of the browser

[jeromewu]

Please check v2.1.4 for the fix of this issue. 😄