如何将库导入 React.js 中的 web 工作人员？

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!

Answer 1

I guess you should use importScript() in your service worker file