I am trying to run a face detection process in the background of my React app using a web worker. I am using a library called face-api.js to do the face detection. But I'm unsure as to how to import this library to use in my worker.js file.
worker.js
import * as faceapi from 'face-api.js';
this.onmessage = (e) => {
console.log("Message from worker.js");
this.postMessage('Hello Main')
};
TestComponent.js
import React, {useEffect} from 'react'
function TestComponent() {
useEffect(() => {
const worker = new Worker('./workers/worker.js')
worker.postMessage('Hello Worker')
worker.onmessage = e => {
console.log('Message received from worker:', e.data)
}
}
);
return (
<div>
<h1> Test Component </h1>
</div>
)
}
export default TestComponent
I run this test code and I get the following error on chrome:
/workers/worker.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
I have tried using require to import the library which didn't work. I also tried declaring the worker as a module
const worker = new Worker('./workers/worker.js', type: "module")
This makes the error go away but then nothing works: the worker does not do what it is intended to do.
Please point me in the right direction. Thanks in advance!