ffmpeg.wasm: ReferenceError: SharedArrayBuffer is not defined

If there is someone using vite for development environment. https://github.com/chaosprint/vite-plugin-cross-origin-isolation

Anyone who’s using Next.js,

here’s my next.config.js file and it works perfectly

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

For developing in vite, you can set the vite.config.js:

export default {
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    },
  },
};

Hello, in react easier way is using this library: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

With this you can create a proxy, in the proxy you will be able to set the headers, example bellow:

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

    app.use(
        '/api',
        createProxyMiddleware({
          target: 'http://localhost:8080',
          changeOrigin: true,
        })
      );
};

I really don’t know how to deal with this in SPAs production env, but for server-client applications it should work fine (for example react SSR).

Dumb question from someone who knows nothing - what would it take / would it even be possible to rewrite this not to use SharedArrayBuffer?

Given the current state of how difficult it is to use, seems like if it’s possible, it’d be worth it.

The reason I made my browser extension in the first place is that it doesn’t need a server to work but instead use the user’s computational power

Safari now has support for SharedArrayBuffer as of March 2022 https://caniuse.com/sharedarraybuffer

For anyone trying to find a solution when hosting on netlify for instance, you can use : https://github.com/gzuidhof/coi-serviceworker which makes it available.

Has anyone found a solution for Nuxt 3? It did not manage to overcome this issue. Whenever I load ffmpeg, I get the error, and establishing these headers did not help. f1f71c-7747-4977-969e-ea0d6790910b:22 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined at b2f1f71c-7747-4977-969e-ea0d6790910b:22:175 at Object.load (createFFmpeg.js:117:20) at async load (app.vue:15:3) (

I am also using nuxt 3. DId you find a solution for this?

Sadly not @dataexcess. I had to move to React to make it work.

Hey! Using this nuxt plugin “nuxt-security” fixed it for me ! 😄

https://snyk.io/blog/adding-security-to-nuxt-3/

All the sudden, like right now, the headers are not enough. There’s an experimental Chrome flag but even that doesn’t expose the SharedMemoryBuffer. It worked yesterday and even 10 minutes ago…

This WAS my workaround - https://vercel.com/guides/fix-shared-array-buffer-not-defined-nextjs-react

I have all the headers set via php. I confirmed the headers were set in the response.

header(“Cross-Origin-Opener-Policy: same-origin”); header(“Cross-Origin-Embedder-Policy: require-corp”);

Broken in Edge/Chrome.

Firefox is still okay.

WebView2 browser is okay - https://learn.microsoft.com/en-us/microsoft-edge/webview2/samples/webview2browser?source=recommendations

I restarted my Chrome and the issue seems to have gone away. So I’m not sure what caused it. It’s just odd that Chrome/Edge had the issue at the same time.

How to solve this issue using Github Pages?

Has anyone found a solution for Nuxt 3? It did not manage to overcome this issue. Whenever I load ffmpeg, I get the error, and establishing these headers did not help. f1f71c-7747-4977-969e-ea0d6790910b:22 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined at b2f1f71c-7747-4977-969e-ea0d6790910b:22:175 at Object.load (createFFmpeg.js:117:20) at async load (app.vue:15:3) (

I am also using nuxt 3. DId you find a solution for this?

Sadly not @dataexcess. I had to move to React to make it work.

Permanant solution of Shared Array buffer is not define in react js when i am include fbsdk in my project

#484 #483 #190 #482 #402 #121 #469