React Error: "SharedArrayBuffer is not defined" in Firefox

Question

我有一个用 'create-react-app' 创建的 React 应用程序（我也使用 jsdom NPM 包），由于某种原因，应用程序在加载时抛出错误 仅在 Firefox 中（在 Chrome & Edge 中工作正常）。
这是错误：

ReferenceError: SharedArrayBuffer is not defined
./node_modules/jsdom/node_modules/webidl-conversions/lib/index.js
C:/Or/Web/WorldCovid/WorldCovid/node_modules/jsdom/node_modules/webidl-conversions/lib/index.js:347

  344 | 
  345 | const abByteLengthGetter =
  346 |     Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
> 347 | const sabByteLengthGetter =
  348 |     Object.getOwnPropertyDescriptor(SharedArrayBuffer.prototype, "byteLength").get;
  349 | 
  350 | function isNonSharedArrayBuffer(V) {

谷歌搜索后我发现：
“要在 Firefox 中启用 SharedArrayBuffer，请转至 about:config 并将 javascript.options.shared_memory 首选项设置为 true”(https://github.com/ggerganov/kbd-audio/issues/9)
问题是它已经启用为真。

以前有人遇到过这个问题吗？谢谢

更新：

试图转换为：

const shared = new SharedArrayBuffer(1024);

const abByteLengthGetter =
    Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
const sabByteLengthGetter =
    Object.getOwnPropertyDescriptor(shared.prototype, "byteLength").get;

仍然得到相同的错误（与 SharedArrayBuffer 对象不同的行）。

Answer 1

您需要为您的文档设置两个响应headers：

Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp

这些是使用 SharedArrayBuffer 的新安全要求。

如果启用了跨源隔离，您可以签入代码：

if (crossOriginIsolated) { // SharedArrayBuffer 可用 }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

Answer 2

React 问题已 fixed and released in 17.0.2。他们说没有计划将更改反向移植到旧版本，但这应该不是什么大问题，除非您期望 high-precision 在 React 上进行性能测量。

SharedArrayBuffer 已在除 Chrome 桌面以外的所有浏览器中被禁用，因为 Spectre, but Chrome desktop also disables it starting in Chrome 92. You'll need "cross-origin isolation" 被发现启用它。

当您遇到问题：Uncaught ReferenceError: SharedArrayBuffer is not defined Chrome，您需要应用“cross-origin 隔离”才能继续使用 SharedArrayBuffer，但作为 escape-hatch，您可以请求 an origin trial 将您的网站列入许可名单，以便至少在 Chrome 96.

之前继续使用 SharedArrayBuffer 而无需 cross-origin 隔离

要启用 cross-origin 隔离，您必须以@stephane k 的身份发送两个 HTTP headers（COOP 和 COEP）。在另一条评论中提到。

要了解有关 cross-origin 隔离的更多信息，请阅读：

Answer 3

在 index.html 文件中，添加如下脚本。我认为这会有所帮助。我做到了。

<body>
<script>
  if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>

React Error: "SharedArrayBuffer is not defined" in Firefox

React Error: "SharedArrayBuffer is not defined" in Firefox

javascript

firefox

reactjs

cross-origin-embedder-policy

cross-origin-opener-policy