ReferenceError: SharedArrayBuffer is not defined #3

btahir · 2021-08-06T23:02:17Z

Hello - this is a super exciting project. Thanks for the React template. I'm having issues with trying this on Next.js and I suspect that would happen with this template as well.

ReferenceError: SharedArrayBuffer is not defined

From what I have read, this was a Firefox bug that is now happening in Chrome as well? Is there any resolution for this yet?

Thanks!

Yadukrish · 2021-08-10T17:13:18Z

Having the same issue with chrome as well.

btahir · 2021-08-21T02:23:02Z

OK seems like this cna be partially solved by adding this in next.config:

async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ]
  },

Bow I am getting another error: Error: ffmpeg.wasm is not ready, make sure you have completed load().

Wonder if his has something to do with SSR in next.js? Weird thing is that ffmpeg-core seems to be loaded initially but this error goes off if I try to run any command.

apoorvpandey0 · 2021-10-16T18:04:37Z

Try to run chrome with this flag enabled, it worked for me!

chrome --enable-features=SharedArrayBuffer

elektracodes · 2021-10-18T10:26:38Z

You can add this in index.html

<body>
<script>
  if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
</script>

apoorvpandey0 · 2021-10-18T13:01:10Z

<script> if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer; </script>

It's giving this error now

[fferr] requested a shared WebAssembly.Memory but the returned buffer is not a SharedArrayBuffer, indicating that while the browser has SharedArrayBuffer it does not have WebAssembly threads support - you may need to set a flag

elektracodes · 2021-10-18T13:30:16Z

Weird, it worked for me with that, without adding the flag. Chrome version Version 94.0.4606.81.

apoorvpandey0 · 2021-10-18T17:50:48Z

Weird, it worked for me with that, without adding the flag. Chrome version Version 94.0.4606.81.

Yeah :(
can you tell me your ffmpeg library version I'm running:
"@ffmpeg/core": "^0.9.0",
"@ffmpeg/ffmpeg": "^0.9.0",
"react": "^17.0.2",
chrome: Version 94.0.4606.81 (Official Build) (64-bit)
Windows 11

khanzzirfan · 2021-12-12T19:41:28Z

Add below packge details for any SharedBufferArray issues. either add npm package or js file itself
https://github.com/gzuidhof/coi-serviceworker

namosuke · 2021-12-17T15:09:11Z

This issue is caused by the updates of Chrome 92. This document will helps you:
SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92 - Chrome Developers
https://developer.chrome.com/blog/enabling-shared-array-buffer/

According the document, you need to add these headers to make a page cross-origin isolated:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

This is a same solution as previous comment. And I tried, it works.
Working on Netlify: https://reverent-poincare-2975ff.netlify.app
And this is a sauce: https://github.com/namosuke/ffmpeg-wasm-react-app

I just added a file _headers on /public for using custom headers on Netlify.
I hope this helps you.

thenglong · 2021-12-19T09:19:46Z

I think this would help in CRA
facebook/create-react-app#10210 (comment)

niilz · 2022-01-02T13:24:32Z

I had the same problem, running my app with webpack-dev-server.
The solution by @namosuke, adding the headers (into my webpack-config.js in that case) worked as well.

The part in the config looks like this:

module.exports = {
  ...
  },
  devServer: {
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin",
    },
  },
};

bcround · 2022-01-14T05:16:35Z

OK seems like this cna be partially solved by adding this in next.config:
async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ]
  },
Bow I am getting another error: Error: ffmpeg.wasm is not ready, make sure you have completed load().

Wonder if his has something to do with SSR in next.js? Weird thing is that ffmpeg-core seems to be loaded initially but this error goes off if I try to run any command.

Hello, you might be calling createFFmpeg in a component. It should be called only once. Mine had same problem as yours, but after I moved createFFmpeg out of component, it worked.

AndyBoat · 2022-01-19T09:16:42Z

For anyone who met a same problem, and cant just set Cross-Origin-Embedder-Policy as require-corp , you can try set it as credentialless.

   location / {
            add_header Cross-Origin-Opener-Policy same-origin;
            add_header Cross-Origin-Embedder-Policy credentialless;
        }

My page have to load resource like image from others' blobstore/cdn ,they dont have 'Cross-Origin-Resource-Policy' in their reponse header, and I cant control the response header
So I change the Cross-Origin-Embedder-Policy to be credentialless, and magically, I can use both ffmpeg-wasm and CDN resource

I believe this is due to this update

We've been exploring ways to deploy Cross-Origin-Resource-Policy at scale, as cross-origin isolation requires all subresources to explicitly opt-in. And we have come up with the idea of going in the opposite direction: a new COEP "credentialless" mode that allows loading resources without the CORP header by stripping all their credentials. We hope this will lighten your burden of making sure the subresources are sending the Cross-Origin-Resource-Policy header.

web86 · 2022-02-03T14:00:05Z

add the meta tag <meta http-equiv="origin-trial" content="token"> to your index.html header. You can get your token from here

mickod · 2022-02-18T15:37:34Z

Building on @niilz note above - using the create-react-app and testing on localhost, I found that adding the headers to the webpackDevServer.config.js removed the 'SharedArrayBuffer is not defined' error for me.

On my system (MAC) the file was in: [My react project]/node_modules/react-scripts/config

Extract from the webpackDevServer.config.js for reference:

.
.
.


module.exports = function (proxy, allowedHost) {
  const disableFirewall =
    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
  return {
    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
    // websites from potentially accessing local content through DNS rebinding:
    // https://github.com/webpack/webpack-dev-server/issues/887
    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
    // However, it made several existing use cases such as development in cloud
    // environment or subdomains in development significantly more complicated:
    // https://github.com/facebook/create-react-app/issues/2271
    // https://github.com/facebook/create-react-app/issues/2233
    // While we're investigating better solutions, for now we will take a
    // compromise. Since our WDS configuration only serves files in the `public`
    // folder we won't consider accessing them a vulnerability. However, if you
    // use the `proxy` feature, it gets more dangerous because it can expose
    // remote code execution vulnerabilities in backends like Django and Rails.
    // So we will disable the host check normally, but enable it if you have
    // specified the `proxy` setting. Finally, we let you override it if you
    // really know what you're doing with a special environment variable.
    // Note: ["localhost", ".localhost"] will support subdomains - but we might
    // want to allow setting the allowedHosts manually for more complex setups
    allowedHosts: disableFirewall ? 'all' : [allowedHost],
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",    //<---- added this (and removed previous CORS settings)
      "Cross-Origin-Opener-Policy": "same-origin",         //<---- added this
    },
    // Enable gzip compression of generated files.
    compress: true,
    static: {
      // By default WebpackDevServer serves physical files from current directory
      // in addition to all the virtual build products that it serves from memory.
      // This is confusing because those files won’t automatically be available in
      // production build folder unless we copy them. However, copying the whole
      // project directory is dangerous because we may expose sensitive files.
      // Instead, we establish a convention that only files in `public` directory
      // get served. Our build script will copy `public` into the `build` folder.
      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
      // Note that we only recommend to use `public` folder as an escape hatch
      // for files like `favicon.ico`, `manifest.json`, and libraries that are
      // for some reason broken when imported through webpack. If you just want to
      // use an image, put it in `src` and `import` it from JavaScript instead.
      directory: paths.appPublic,
      publicPath: [paths.publicUrlOrPath],
      // By default files from `contentBase` will not trigger a page reload.
      watch: {
        // Reportedly, this avoids CPU overload on some systems.
        // https://github.com/facebook/create-react-app/issues/293
        // src/node_modules is not ignored to support absolute imports
        // https://github.com/facebook/create-react-app/issues/1065
        ignored: ignoredFiles(paths.appSrc),
      },
    },
    client: {
      webSocketURL: {

.
.
.

codomposer · 2022-06-25T04:59:44Z

You can add this in index.html

<body>
<script>
  if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
</script>

Thanks very much

yafkari · 2023-06-16T14:29:16Z

OK seems like this cna be partially solved by adding this in next.config:
async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ]
  },
Bow I am getting another error: Error: ffmpeg.wasm is not ready, make sure you have completed load().

Wonder if his has something to do with SSR in next.js? Weird thing is that ffmpeg-core seems to be loaded initially but this error goes off if I try to run any command.

In NextJS this solution might work but when I set those headers, my app cannot contact stripe and supabase anymore.

ZHHHH9980 · 2024-01-24T02:36:13Z

For anyone who met a same problem, and cant just set Cross-Origin-Embedder-Policy as require-corp , you can try set it as credentialless.
   location / {
            add_header Cross-Origin-Opener-Policy same-origin;
            add_header Cross-Origin-Embedder-Policy credentialless;
        }
My page have to load resource like image from others' blobstore/cdn ,they dont have 'Cross-Origin-Resource-Policy' in their reponse header, and I cant control the response header So I change the Cross-Origin-Embedder-Policy to be credentialless, and magically, I can use both ffmpeg-wasm and CDN resource

I believe this is due to this update

We've been exploring ways to deploy Cross-Origin-Resource-Policy at scale, as cross-origin isolation requires all subresources to explicitly opt-in. And we have come up with the idea of going in the opposite direction: a new COEP "credentialless" mode that allows loading resources without the CORP header by stripping all their credentials. We hope this will lighten your burden of making sure the subresources are sending the Cross-Origin-Resource-Policy header.

OMG，that seems works fine for me. I have resource from CDN too, and cannot control any header of them.

anasak-dev mentioned this issue Sep 15, 2021

ReferenceError: SharedArrayBuffer is not defined ffmpegwasm/vue-app#111

Open

lecepin mentioned this issue Mar 19, 2022

fix: cross-origin-isolation #12

Merged

lecepin closed this as completed Mar 20, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ReferenceError: SharedArrayBuffer is not defined #3

ReferenceError: SharedArrayBuffer is not defined #3

btahir commented Aug 6, 2021 •

edited

Loading

Yadukrish commented Aug 10, 2021

btahir commented Aug 21, 2021 •

edited

Loading

apoorvpandey0 commented Oct 16, 2021

elektracodes commented Oct 18, 2021

apoorvpandey0 commented Oct 18, 2021

elektracodes commented Oct 18, 2021

apoorvpandey0 commented Oct 18, 2021

khanzzirfan commented Dec 12, 2021

namosuke commented Dec 17, 2021

thenglong commented Dec 19, 2021 •

edited

Loading

niilz commented Jan 2, 2022

bcround commented Jan 14, 2022

AndyBoat commented Jan 19, 2022 •

edited

Loading

web86 commented Feb 3, 2022

mickod commented Feb 18, 2022 •

edited

Loading

codomposer commented Jun 25, 2022

yafkari commented Jun 16, 2023

ZHHHH9980 commented Jan 24, 2024

ReferenceError: SharedArrayBuffer is not defined #3

ReferenceError: SharedArrayBuffer is not defined #3

Comments

btahir commented Aug 6, 2021 • edited Loading

Yadukrish commented Aug 10, 2021

btahir commented Aug 21, 2021 • edited Loading

apoorvpandey0 commented Oct 16, 2021

elektracodes commented Oct 18, 2021

apoorvpandey0 commented Oct 18, 2021

elektracodes commented Oct 18, 2021

apoorvpandey0 commented Oct 18, 2021

khanzzirfan commented Dec 12, 2021

namosuke commented Dec 17, 2021

thenglong commented Dec 19, 2021 • edited Loading

niilz commented Jan 2, 2022

bcround commented Jan 14, 2022

AndyBoat commented Jan 19, 2022 • edited Loading

web86 commented Feb 3, 2022

mickod commented Feb 18, 2022 • edited Loading

codomposer commented Jun 25, 2022

yafkari commented Jun 16, 2023

ZHHHH9980 commented Jan 24, 2024

btahir commented Aug 6, 2021 •

edited

Loading

btahir commented Aug 21, 2021 •

edited

Loading

thenglong commented Dec 19, 2021 •

edited

Loading

AndyBoat commented Jan 19, 2022 •

edited

Loading

mickod commented Feb 18, 2022 •

edited

Loading