11

我有一个使用“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）
问题是它已经启用为true。

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

更新：

试图转换为：

const shared = new SharedArrayBuffer(1024);

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

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

4

3 回答 3

6

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

Cross-Origin-Opener-Policy：同源 Cross-Origin-Embedder-Policy：require-corp

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

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

if (crossOriginIsolated) { // SharedArrayBuffer 可用 }

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

于 2021-01-11T22:24:13.880 回答
4

React 问题已在 17.0.2 中修复并发布。他们说没有计划将更改向后移植到旧版本，但这应该不是一个大问题，除非您期望在 React 上进行高精度的性能测量。

SharedArrayBuffer自发现Spectre以来，除 Chrome 桌面之外的所有浏览器都已禁用它，但 Chrome 桌面也从 Chrome 92 开始禁用它。您需要“跨域隔离”才能启用它。

当您遇到问题时：Uncaught ReferenceError: SharedArrayBuffer is not defined在 Chrome 上，您需要应用“跨域隔离”才能继续使用SharedArrayBuffer，但作为逃生舱，您可以请求原始试验SharedArrayBuffer以允许将您的网站列入白名单，以便在不进行跨域隔离的情况下继续使用至少在 Chrome 96 之前。

要启用跨域隔离，您必须将两个 HTTP 标头（COOP 和 COEP）作为 @stephane k 发送。在另一条评论中提到。

要了解有关跨域隔离的更多信息，请阅读：

于 2021-06-09T08:20:48.517 回答
1

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

<body>
<script>
  if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
于 2021-08-19T09:36:15.467 回答