javascript - How to import a library into a web worker in React.js?

Question

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!

question from:https://stackoverflow.com/questions/65626039/how-to-import-a-library-into-a-web-worker-in-react-js

Answer 1

Waitting for answers