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

Question

当通过npx create-react-app 创建react 应用并运行它时，DevTools（Chrome 88 和 89）中会弹出警告：

scheduler.development.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

复制步骤

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

有解决此警告的建议吗？

Answer 1

如警告所示，Chrome 从 91 版开始需要跨域隔离才能使用 SharedArrayBuffer。据我所知，除了等待反应更新之外，您无能为力解决警告。

其他人也有这个问题，你可以看到 here 和 here

该问题已在this 拉取请求中修复，但尚未发布。

编辑：现在已在 react 17.0.2 版本中修复。

Answer 2

将react 和react-dom 版本从17.0.1 更新为==> 17.0.2 可以解决此问题。

您只需在命令提示符或 bash 中运行 npm update，希望您会在 package.json 文件中看到更改。 （yarn upgrade react --latest 和 yarn upgrade react-dom --latest，如果您希望升级持续到 package.json）

这是应用更新后来自我的应用程序的 git 报告：

Answer 3

其实更新react-dom到最新版本后我解决了这个问题，单独react没有解决：

npm i react@latest react-dom@latest

或

yarn add react@latest react-dom@latest

Answer 4

此问题已在 React 版本 17.0.2 中修复 如果你也使用 react-dom，你也应该更新它。 运行 npm update（或 yarn 中的相应命令，或您正在使用的任何管理器）将更新所有内容，从而解决弃用警告。

这是我更新后的 package.json：

Answer 5

我知道你已经得到了答案，但如果有人只使用： npm i react@latest react-dom@latest 不会将 react 和 react-dom 更新到版本 17.0.2 如果当前版本 react 和 react-dom 是 16.x.x 并且您的项目没有被 EJECTED。该命令仅将 react 和 react-dom 更新到版本 16.14.0。如果是这种情况，需要先将 react-script、react 和 react-dom 版本迁移到 17：npm install react-scripts@4.0.0 react@17.0.0 react-dom@17.0.0。 更多信息：https://dev.to/keonik/upgrading-to-react-17-create-react-app-edition-fe

Answer 6

对于那些还没有准备好升级到 v17 的人（由于其他遗留库），一个简单的解决方法是将以下代码放在您的 index.html 的任何部分中

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

Answer 7

将 react 和 react-dom 版本更新到 17.0.2、yarn upgrade react --latest 和 yarn upgrade react-dom --latest

另外，如果使用@hot-loader/react-dom 或 react-hot-loader，还需要运行yarn upgrade @hot-loader/react-dom --latest 和yarn upgrade react-hot-loader --latest。