App not working due to Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined.

[ankitsangwan1999]

Hi, Can you suggest any fix for the aforesaid issue?
I am facing the same in one of my react app which also uses ffmpeg. I tried running your app locally but it does not work. Home page shows Loading.

"Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined" is shown in console, execution of js stops at await ffmpeg.load();

PFB screenshot of the issue.

[apoorvpandey0]

In my case even the js files were not loading, then I switched to

const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js',
log: true
});

Now facing the same issue.

A mentioned here Issue 1 it seems to be a CORS related issue, but I'm not sure how to resolve this in React.

[MikeCernea]

Same issue here, it started with the ffmpeg not loading, it passes the load error if we run the code from Git, but now it fails with SharedArrayBuffer error, and I am unable to find a way to enable CORS.
If anyone has a solution, please share it with us.

[apoorvpandey0]

Same issue here, it started with the ffmpeg not loading, it passes the load error if we run the code from Git, but now it fails with SharedArrayBuffer error, and I am unable to find a way to enable CORS. If anyone has a solution, please share it with us.

You need to run chrome with a flag enabling shared array buffer . It worked for me

[MikeCernea]

Same issue here, it started with the ffmpeg not loading, it passes the load error if we run the code from Git, but now it fails with SharedArrayBuffer error, and I am unable to find a way to enable CORS. If anyone has a solution, please share it with us.

You need to run chrome with a flag enabling shared array buffer . It worked for me

What is the flag and where do I set it ?
BTW, I am running with 'Five server' for Code in Firefox v93.0, but I could switch to Chrome if I knew it would work

[apoorvpandey0]

Same issue here, it started with the ffmpeg not loading, it passes the load error if we run the code from Git, but now it fails with SharedArrayBuffer error, and I am unable to find a way to enable CORS. If anyone has a solution, please share it with us.

You need to run chrome with a flag enabling shared array buffer . It worked for me

What is the flag and where do I set it ? BTW, I am running with 'Five server' for Code in Firefox v93.0, but I could switch to Chrome if I knew it would work

Run this in your command prompt in chrome.exe directory

chrome --enable-features=SharedArrayBuffer

[sagnikghoshcr7]

@apoorvpandey0 @ankitsangwan1999 @MikeCernea
Check this https://github.com/sagnikghoshcr7/gif-maker

[anweshandev]

@apoorvpandey0
@sagnikghoshcr7 reference is excellent, but is unfortunately configured with Next.js. It you want the this to be Bootstrapped with Create Snowpack App, I faced some issues and did the following to overcome the same:

Install snowpack-custom-headers

$ npm i -D snowpack-custom-headers

Modify snowpack.config.js [snowpack.config.mjs in my case]

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'],
  routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],
  optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
  },
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
    open: "none", /* LINE MODIFIED */
  },
  buildOptions: {
    /* ... */
  },
  plugins: [
    [
      "snowpack-custom-headers", /* LINE MODIFIED */
      { /* ADDED */
        headers: {
          // This is just an example, add any headers you need here.
          "Cross-Origin-Opener-Policy": "same-origin",
          "Cross-Origin-Embedder-Policy": "require-corp",
        },
      }, /* BLOCK FOR HEADERS END */
    ],
  ],
};

It is quite important to add open: "none" according to the example here

Hope this helps...

[filmo]

@formula21 Thank you. That fixed it.

Follow up Question: In your example you declare 'plugins' twice. Once at the top containing the default ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'] and then later below buildOptions. Doesn't the second declaration overwrite the first?

[anweshandev]

@formula21 Thank you. That fixed it.

Follow up Question: In your example you declare 'plugins' twice. Once at the top containing the default ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'] and then later below buildOptions. Doesn't the second declaration overwrite the first?

I am not sure however, it overwrites the same. This is because, this is a smaller part of a big project and this produced no side-effects! But this does not mean it is a good coding practice or standard anywhere keeping duplicate keys. I am going to change stuff before my team spots this.

[Suselfluf]

For the one who have tried vite config with ffmpeg - here is the solution for dev env
https://github.com/chaosprint/vite-plugin-cross-origin-isolation