SharedArrayBuffer 未定义

Question

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

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

我正在使用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)

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)

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/

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

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