I cant configure stockfish.js into my React app (+vite)

Question

I have been trying for a long time to solve this issue but I couldn't solve it. I feel like documentation is not clear. Also, I want to mention that I have installed it using npm. It might not be npm friendly. I tried to follow a tutorial in youtube however it gave this error:

stockfish-nnue-16-no-Worker.js:14 Uncaught ReferenceError: SharedArrayBuffer is not defined
    at e (stockfish-nnue-16-no-Worker.js:14:5248)
    at stockfish-nnue-16-no-Worker.js:14:40742
    at stockfish-nnue-16-no-Worker.js:14:42584

what am i doing wrong? I am working on google chrome and i have checked the restrictions. I need to run this on my local host currently.

I am not very experienced in this subject(web workers and webassembly etc.).

function getEvaluation(fen,callback) { var engine = new Worker("../../node_modules/stockfish/src/stockfish-nnue-16.js"); let evaluations =[];

  setMsg("Thinking...")
  engine.onmessage = function (event) {
    let message = event.data;
    console.log(message);
    if(message.startsWith("info depth 10")) {
      let multipvIndex = message.indexOf("multipv");
      if(multipvIndex!==-1) {
        let multipvString = message.slice(multipvIndex).split(" ")[1];
        let multipv = parseInt(multipvString);
        let scoreIndex = message.indexOf("score cp");
        if(scoreIndex!==-1) {
          let scoreString = message.slice(scoreIndex).split(" ")[2];
          let evaluation = parseInt(scoreString)/100;
          evaluation = isWhiteTurn ? evaluation : evaluation * -1;
          evaluations[multipv-1] = evaluation;
        } else {
          scoreIndex = message.indexOf("score mate");
          scoreString = message.slice(scoreIndex).split(" ")[2];
          let evaluation = parseInt(scoreString);
          evaluation = Math.abs(evaluation);
          evaluations[multipv-1] = "#" + evaluation;
        }
        let pvIndex = message.indexOf(" pv ");
        if(pvIndex !== -1) {
          let pvString = message.slice(pvIndex+4).split(" ");
          if(evaluations.length===1) {
            callback(evaluations);
          }
        }
      }
    }
  }
   engine.postMessage("uci");
   engine.postMessage("isready");
   engine.postMessage("ucinewgame");
   engine.postMessage("setoption name multipv value 3");
   engine.postMessage("position fen "+fen);
   engine.postMessage("go depth 10");

   setMsg(evaluations[0])
}

I feel like line below might be wrong. But they used it like this in the tutorial.

../../node_modules/stockfish/src/stockfish-nnue-16.js

Is there something wrong with my code or the stockfish.js?

Please let me know if you need more information.