SharedArrayBuffer 未定义

Question

我正在使用一个名为 react-canvas 的库。

从几天前开始，在包括 Chrome 在内的网络浏览器中应该显示画布的区域中输出了带有 <p> 标签的错误消息。

我用的是nextjs，下面附上package.json。

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

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"
  }

Answer 1

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

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

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

如果您想要快速解决该问题，您可以通过注册原始试用版将您的网站加入许可名单，以继续使用 SharedArrayBuffer 直到 Chrome 96：https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial

Chrome 团队希望引入更简单的选项来启用跨域隔离。在此处了解更多信息：https://developer.chrome.com/blog/coep-credentialless-origin-trial/