从 M91开始，大约在2021年5月，SharedArrayBuffer 将需要跨源隔离

当通过 npx create-react-app创建一个应用程序并运行它时，DevTools (Chrome 88和89)会弹出一个警告:

Js: 298[弃用] SharedArrayBuffer 将 在2021年5月前后，M91需要进行跨来源隔离 Https://developer.chrome.com/blog/enabling-shared-array-buffer/ 更多细节。

环境

  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

enter image description here

繁殖的步骤

  1. npx create-react-app myapp
  2. cd myapp && npm start Open
  3. 在 Chrome88或89中显示 http://localhost:3000 ，常规或隐身模式
  4. 打开 DevTools: 显示警告

对于解决这个警告有什么建议吗？

40893 次浏览
小开

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.

小开
最佳答案

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:

image of git report

小开

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
小开

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:

screenshot from github desktop

小开

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 react-scripts@4.0.0 react@17.0.0 react-dom@17.0.0. More informations: https://dev.to/keonik/upgrading-to-react-17-create-react-app-edition-fe

小开

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>
小开

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.


提交答案