React Website Getting SharedArrayBuffer Error Due To COOP and COEP

Support
1

I’m trying to wrap my head around this COOP and COEP issue, but my head is spinning.

I’m told I need to add COOP and COEP to my response headers, but that needs to be done on the server, which is Netlify. How do I add those to my header so I don’t get React Error: “SharedArrayBuffer is not defined or Unhandled Rejection (ReferenceError): SharedArrayBuffer is not defined.

The website URL - https://limbo-encoder.netlify.app/
The Github code - GitHub - EladKarni/limbo-encoder: A Simple tool designed to make videos fit the Discord file limits of 8MB, 50MB, 100MB. Exported videos in mp4 so they are auto embedded.

2

Welcome to the forums @Light

According to the message in the console, the headers required are explained here: SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92 - Chrome Developers

If you wish to add custom headers, Netlify docs are here: Custom headers | Netlify Docs.

I do wonder if after all this, it will work. If this requires the uploading of video files to a server for processing, given Netlify sites are served from a CDN, that’s not going to work. If it is in-browser only, then it might work.

3

Thank you so much for your reply!

So I’ve seen both of those links, but the issue here is my lack of knowledge about the subject it seems. Even after reading the documentation from both Google andNetlify, I’m still totally confused about how I would go about solving this issue.

Regarding the website and uploading a video; this isn’t something that happens. This website uses FFmpeg-wasm, so the video is processed right on the client’s computer. No backend processing service is required!

4

Hi there, @Light :wave:

Sorry for the slow response here. Are you still encountering issues? If so, please let us know what additional debugging steps you have taken in the past week or so. I will loop in the Support Engineers if you are still looking for next steps :slight_smile:

5

Hi Hillary,

Thank you so much for following up, I really appreciate it! I am still having that issue sadly so the website is still unusable for most if not all users. Anything we can do to solve this would be awesome!

Light

6

Hi @Light,

That page has post 2 which says the issue was fixed in React 17.0.2. Could you try updating and see if it works?

Also, if just adding headers is going to help, maybe you can add the following to your netlify.toml:

[[headers]]
for = "/*"
  [headers.values]
    Cross-Origin-Opener-Policy = "same-origin"
    Cross-Origin-Embedder-Policy = "require-corp"

Let us know how that goes.

1 Like
7

Thank you so much for your help!

I already tried updating, but because the issue stems from a 3rd party module, I don’t think I can update it.

I just checked my project, but I don’t have a netlify.toml file. Where should it be, or am I supposed to add it? You can see the project’s code here - https://limbo-encoder.netlify.app/

8

A netlify.toml would go in either the root of your repo or the base path configured in the UI.

9

Apologies for the delay.

It seems to be working after I added the netlify.toml config file!

Thanks again for your help!

1 Like