DevTools warning: SharedArrayBuffer will require cross-origin isolation

[maudnals]

Describe the bug

When creating an 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.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

sharedarraybuffer returned no result.

Environment

  current version of create-react-app: 4.0.1
  running from /Users/maudn/.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
3. Open http://localhost:3000 in Chrome 88 or 89, regular or Incognito mode
4. Open DevTools: the warning is displayed

Expected behavior

Actual behavior

Warning: 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.

Reproducible demo

See instructions in Steps to reproduce.
Thank you!

[maudnals]

Maybe this scheduler code is the reason for this warning.

[bvaughn]

This issue should be filed in the React repo:
https://github.com/facebook/react

Check first to make sure it isn't already there though :)

[maudnals]

OK, thank you @bvaughn!
From what I can see this issue hasn't been filed on the React repo, yet—@agektmr is knowledgable on SharedArrayBuffer and will take this from here / to the React repo.

[agektmr]

Filed here: facebook/react#20829

[bvaughn]

Can you please close this issue then? :)

[rishi-raj-jain]

The issue seems to be still existing on the link provided by @maudnals and same as in my project using cra even in the basic starter @ https://7onz7.csb.app/

[bvaughn]

The fix only landed a few days ago and has not yet been released.

[gaearon]

17.0.2 is out with the fix. (But there was no real problem, it's a false positive.)

[sonpnh95]

I update react and react0dom version but it not remove warning

[gaearon]

Again, the fix was released. If the warning doesn’t go away, you somehow still have a wrong version somewhere in your code. We can’t guess why.

[ghost]

@sonpnh95 Perhaps some other package is using SharedArrayBuffer. For this reason and for people who didn't upgrade yet to react v17 you can apply this workaround somewhere in your index.html file or elsewhere:

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

[btahir]

@sonpnh95 Perhaps some other package is using SharedArrayBuffer. For this reason and for people who didn't upgrade yet to react v17 you can apply this workaround somewhere in your index.html file or elsewhere:

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

Thanks for sharing. Can you explain what this is doing? I tried it in Next.js and got a bad memory error.