SharedArrayBuffer 未定义

我正在使用一个名为react-canvas.

从几天前开始，一直输出一条错误消息<p>标签应在网络浏览器（包括 Chrome）中显示画布的区域中。

我在用nextjs，我附上package.json below.

=================================================== ===========

SharedArrayBuffer is not defined ReferenceError: SharedArrayBuffer is not defined
at eval (webpack-internal:///./node_modules/jsdom/node_modules/webidl-conversions/lib/index.js:348:37)
at Object../node_modules/jsdom/node_modules/webidl-conversions/lib/index.js (http://localhost:3000/_next/static/chunks/1.js:7185:1)
at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:873:31)
at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:151:20)
at eval (webpack-internal:///./node_modules/jsdom/node_modules/whatwg-url/dist/URL.js:3:21)
at Object../node_modules/jsdom/node_modules/whatwg-url/dist/URL.js (http://localhost:3000/_next/static/chunks/1.js:7221:1)
at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:873:31)
at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:151:20)
at eval (webpack-internal:///./node_modules/jsdom/node_modules/whatwg-url/webidl2js-wrapper.js:3:13)
at Object../node_modules/jsdom/node_modules/whatwg-url/webidl2js-wrapper.js (http://localhost:3000/_next/static/chunks/1.js:7341:1)
at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:873:31)
at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:151:20)
at eval (webpack-internal:///./node_modules/jsdom/node_modules/whatwg-url/index.js:3:34)
at Object../node_modules/jsdom/node_modules/whatwg-url/index.js (http://localhost:3000/_next/static/chunks/1.js:7329:1)
at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:873:31)
at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:151:20)
at Object.eval (webpack-internal:///./node_modules/jsdom/lib/api.js:7:19)
at eval (webpack-internal:///./node_modules/jsdom/lib/api.js:335:30)
at Object../node_modules/jsdom/lib/api.js (http://localhost:3000/_next/static/chunks/1.js:1489:1)
at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:873:31)
at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:151:20)
at eval (webpack-internal:///./node_modules/react-sketch/dist/index.js:1:41)
at eval (webpack-internal:///./node_modules/react-sketch/dist/index.js:1:129)
at Object../node_modules/react-sketch/dist/index.js (http://localhost:3000/_next/static/chunks/1.js:9447:1)
at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:873:31)
at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:151:20)
at Module.eval (webpack-internal:///./components/canvas/index.js:4:70)
at eval (webpack-internal:///./components/canvas/index.js:385:30)
at Module../components/canvas/index.js (http://localhost:3000/_next/static/chunks/1.js:11:1)
at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:873:31)
at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1627653343946:151:20)

"dependencies": {
    "@babel/runtime": "^7.14.6",
    "@chakra-ui/icons": "^1.0.12",
    "@chakra-ui/react": "^1.6.0",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.3.0",
    "@monaco-editor/react": "^4.1.3",
    "@nandorojo/swr-firestore": "^0.16.0",
    "@types/node": "^14.14.41",
    "@types/react": "^17.0.3",
    "axios": "^0.21.1",
    "child_process": "^1.0.2",
    "downloadjs": "^1.4.7",
    "emotion-normalize": "^11.0.1",
    "firebase": "^8.4.2",
    "firebaseui": "^4.8.0",
    "framer-motion": "^3.10.6",
    "fs": "0.0.1-security",
    "html-to-image": "^1.6.1",
    "jsdom": "^16.6.0",
    "next": "^10.2.0",
    "next-auth": "^3.25.0",
    "next-seo": "^4.24.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-firebaseui-localized": "^1.1.1",
    "react-icons": "^4.2.0",
    "react-markdown": "^5.0.3",
    "react-painter": "^0.4.0",
    "react-sketch": "^0.5.1",
    "react-use": "^15.3.8",
    "sass": "^1.32.11",
    "styled-components": "^5.3.0",
    "swr": "^0.5.5",
    "tls": "0.0.1"
  },
  "devDependencies": {
    "@svgr/webpack": "^5.5.0",
    "typescript": "^4.2.4"
  }

您使用哪种浏览器？我假设您使用的是 Chrome 及其版本 92。从该版本开始，SharedArrayBuffer 默认已关闭。在这里了解更多信息：https://developer.chrome.com/blog/enabling-shared-array-buffer/ https://developer.chrome.com/blog/enabling-shared-array-buffer/

TL;DR 是您需要在页面上启用“跨源隔离”，这需要您做一些事情：发送两个 HTTP 标头 -Cross-Origin-Opener-Policy : same-origin and Cross-Origin-Embedder-Policy: require-corp。这样，您的页面将被跨域隔离，并且不再能够加载跨域资源，除非它们是选择加入的，但您可以开始使用 SharedArrayBuffer。您可以了解更多如何实现这一点：https://web.dev/cross-origin-isolation-guide/ https://web.dev/cross-origin-isolation-guide/

您可以尝试在此演示页面中设置不同的标题：https://first-party-test.glitch.me/ https://first-party-test.glitch.me/

如果您想要一个快速解决方案来解决该问题，您可以通过注册原始试用版将您的网站选择加入白名单，以便在 Chrome 96 之前继续使用 SharedArrayBuffer：https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-Trial https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial

Chrome 团队希望推出更简单的选项来实现跨域隔离。在这里了解更多：https://developer.chrome.com/blog/coep-credentialless-origin-trial/ https://developer.chrome.com/blog/coep-credentialless-origin-trial/