How to fix the "ReferenceError: SharedArrayBuffer is not defined" error in React JS

I recently tried to build a GIF maker with React and the FFmpeg library and got this error: ReferenceError: SharedArrayBuffer is not defined.

Apparently, this error happens because Chrome does not automatically work with SharedArrayBuffer. It is turned off in Chrome by default and you need to manually enable "cross-origin isolation".

To resolve this, you will want to go to your src folder in your code editor and create a new file called "setupProxy.js". Next, you will want to add this piece of code to enable cross-origin isolation:

  module.exports = (app) => {
    app.use((_, res, next) => {
        res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
        res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
        next();
        });
};

This will make the error go away, (hopefully :)) and you'll be able to use SharedArrayBuffer for your application. Thank you for reading!