Search code examples
node.jsreactjsherokuffmpeg

@ffmpeg/ffmpeg: Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined

I have a small react app with a node.js backend (monorepo). The client is using @ffmpeg/ffmpeg, and all works fine locally, but when deployed to Heroku I'm getting the error ReferenceError: SharedArrayBuffer is not defined. This happens when I run ffmpeg.load(). Note that I am only using ffmpeg on the client in the React app.

What I have done so far:

  • Ensured that my deployed app is using https
  • Added these lines in setupProxy.js in app.use (located in the client directory). See this answer for context
response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
response.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  • Registered for an origin trial with chrome. This actually worked, but I'd prefer a more permanent solution that works across browsers.
  • Tested debugging crossOriginIsolated, and verifying that it is true locally but false on my deployed site.

It seems like something is wrong with my Cross-Origin config, or maybe it's just not being applied. Any help would be appreciated.

Solution

  • This was a silly mistake on my part. The Cross-Origin-* headers mentioned in the question were correct, they just had to be in index.js on the backend, not the client.