未定义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/

你需要在你的页面上启用“跨域隔离”，这需要你做一些事情:发送两个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/

如果您想要一个快速的解决方案来解决这个问题，您可以选择您的网站加入允许列表，通过注册到原始试用版：https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial来继续使用SharedArrayBuffer直到Chrome96

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