SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021

Question

When creating a react app via npx create-react-app and running it, a warning pops up in DevTools (Chrome 88 and 89):

scheduler.development.js:298 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

Environment

  current version of create-react-app: 4.0.1
  running from /Users/mahdi/.npm/_npx/25767/lib/node_modules/create-react-app
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Edge: 87.0.664.66
    Firefox: 84.0
    Safari: 14.0.2
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app myapp
2. cd myapp && npm start Open
3. http://localhost:3000 in Chrome 88 or 89, regular or Incognito mode
4. Open DevTools: the warning is displayed

Any suggestion for resolving this warning?

Druse

Answer 1

Update the react and react-dom versions from 17.0.1 to ==> 17.0.2 could resolve this problem.

You just need to run npm update in the command prompt or bash, and hopefully you will see the changes in your package.json file. (yarn upgrade react --latest and yarn upgrade react-dom --latest if you want the upgrade to persist to the package.json)

Here is a git report from my app after applying the update:

Druse

I could still see the warning even after updating. – Hicks

Did you restart your development server? – Druse

oh I didn't. It's working fine now (after restarting). Thanks much for your response! – Hicks

"Don't forget to restart the server after updating npm packages." – Hicks

We still get this error even though we've updated to 17.0.2 for react and react-dom and have restarted dev server – Thrifty

I too can still the error after updating 17.0.2 and restarting the server – Thorncombe

I start a new project wit 17.0.2 and I still see this error... both React and react-dom. – Overriding

my react app is still not cross origin isolated even after upgrading to v17.02. Even newly created app is not cross origin isolated. do you have any idea? – Helga

Answer 2

As the warning shows, Chrome will require cross-origin isolation starting version 91 in order to use SharedArrayBuffer. As far as I know there is nothing you can do to resolve the warning other then wait for a react update.

Others are also having this issue as you can see here and here

The issue is fixed in this pull request but has not yet been released.

Edit: It is now fixed in version 17.0.2 of react.

Simferopol

Answer 3

Actually after update react-dom to the latest version solved by me the problem, react alone did not solve it:

npm i react@latest react-dom@latest

OR

yarn add react@latest react-dom@latest

Cordell

Answer 4

For those not ready to upgrade to v17 yet (due to other legacy libraries), a simple workaround is to place the following code in any part of your index.html

    <script>
      // See https://github.com/facebook/react/issues/20829#issuecomment-802088260
      if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
    </script>

Absolutism

Answer 5

This issue has been fixed in React version 17.0.2 If you use also react-dom, you should also update it. Running npm update (or corresponding command in yarn, or whatever manager you're using) will update everything, and so, solve the deprecation warning.

This is my package.json after update:

Taxation

Answer 6

I know you have got your answer, but if someone only use: npm i react@latest react-dom@latest will not update react and react-dom to version 17.0.2 if current version react and react-dom is 16.x.x and your project is not EJECTED. That command is only update to react and react-dom to version 16.14.0. If you are in this case, you need to migrate react-script, react and react-dom version to 17 first: npm install [email protected] [email protected] [email protected]. More informations: https://dev.to/keonik/upgrading-to-react-17-create-react-app-edition-fe

Frymire

Answer 7

Update the react and react-dom versions to 17.0.2, yarn upgrade react --latest and yarn upgrade react-dom --latest

Also if using @hot-loader/react-dom or react-hot-loader, need to run yarn upgrade @hot-loader/react-dom --latest and yarn upgrade react-hot-loader --latest also.

Degraded