Why and how to solve SharedArrayBuffer warning in my react-app

Question

My React-app has axios (dependency) and json-server (dev-dependency) insatlled, after I did this, my react-app started throwing the following warning message:

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021.

What is this, how do i resolve the error and why is this happening?

I'm a beginner in the filed and the link provided in the error is using high-level language which I cannot understand, [this](https://developer.chrome.com/blog/enabling-shared-array-buffer/) is the link provided in the console.

Answer 1

What it is? - Chrome will require cross-origin isolation starting version 91 in order to use SharedArrayBuffer.

Solution: You just need to update the react and react-dom versions from 17.0.1 to 17.0.2.

You can use yarn upgrade react --latest and yarn upgrade react-dom --latest to upgrade and update the package.json. Also, please restart the server after updating npm packages.

---

What is SharedArrayBuffer and why the change? Official Doc

SharedArrayBuffer is a JavaScript object to share a memory space across threads on a website. It was used by websites before the vulnerability called Spectre was found. However, because Spectre was a CPU level vulnerability and it's unlikely to be fixed in the foreseeable future, browsers decided to disable the SharedArrayBuffer object.

While Chrome re-enabled it on the desktop with Site Isolation as a temporary remedy, cross-origin isolation was standardized as a way to safely enable the SharedArrayBuffer object. Starting with version 91, planned to be released in late May 2021, Chrome will gate the SharedArrayBuffer object behind cross-origin isolation. Firefox enabled the SharedArrayBuffer obje

Answer 2

I am still having this warning message after updating my react to 17.0.2. Any recommendations? thank you