Running FFMPEG in electron using react, either doesn't load without any error or throws an SharedArrayBuffer is not defined when run after building

Question

I am trying to build a web based media conversion tool to be able to ship with electron.

  const ffmpegInit = async () => {
    try {
      const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
      const ffmpeg = ffmpegRef.current;
      ffmpeg.on("log", ({ message }) => {
        console.log(message);
      });
      // toBlobURL is used to bypass CORS issue, urls with the same
      // domain can be used directly.
      await ffmpeg.load({
        coreURL: await toBlobURL(
          `${baseURL}/ffmpeg-core.js`,
          "text/javascript",
        ),
        wasmURL: await toBlobURL(
          `${baseURL}/ffmpeg-core.wasm`,
          "application/wasm",
        ),
        workerURL: await toBlobURL(
          `${baseURL}/ffmpeg-core.worker.js`,
          "text/javascript",
        ),
      });
      setLoaded(true);
    } catch (err) {
      console.log("------->>>", err);
    }
  };

  useEffect(() => {
    ffmpegInit();
  }, [ffmpegRef]);

This piece of code is directly taken from FFMpeg's usage guide

On viewing the network's tab of my electron's dev tool, I see a 11.4 MB file being downloaded with resource size of around 32 MB. Which seems fair.

But the code never moves ahead of the await ffmpeg.load() call without throwing any error.

I then proceeded to build the react app using vite and then only I could see the app throw an error:

ReferenceError: SharedArrayBuffer is not defined

After digging through some GitHub issues on the same I found out that SharedArrayBuffer has something to do with cross-origin-isolation for security reasons so I updated my vite.config.ts file to the following:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import crossOriginIsolation from "vite-plugin-cross-origin-isolation";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crossOriginIsolation()],
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
  },
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
  },
});

as u can see I also added vite-plugin-cross-origin-isolation but still ffmpeg refuses to work.

I saw this tutorial in YouTube and he made it work with ease, even after following the same steps I am unable to get it to working.

Thanks in advance!!!