javascript - SharedArrayBuffer is not defined

I am using a library called react-canvas.

Since a few days ago, an error message has been output with the <p> tag in the area where the canvas should be displayed in web browsers including Chrome.

I am using nextjs, I attach the 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:///./ponents/canvas/index.js:4:70)
at eval (webpack-internal:///./ponents/canvas/index.js:385:30)
at Module../ponents/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-ponents": "^5.3.0",
    "swr": "^0.5.5",
    "tls": "0.0.1"
  },
  "devDependencies": {
    "@svgr/webpack": "^5.5.0",
    "typescript": "^4.2.4"
  }

I am using a library called react-canvas.

Since a few days ago, an error message has been output with the <p> tag in the area where the canvas should be displayed in web browsers including Chrome.

I am using nextjs, I attach the 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:///./ponents/canvas/index.js:4:70)
at eval (webpack-internal:///./ponents/canvas/index.js:385:30)
at Module../ponents/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-ponents": "^5.3.0",
    "swr": "^0.5.5",
    "tls": "0.0.1"
  },
  "devDependencies": {
    "@svgr/webpack": "^5.5.0",
    "typescript": "^4.2.4"
  }

Share Improve this question edited Jul 30, 2021 at 16:35 Luis Paulo Pinto 6,0364 gold badges22 silver badges36 bronze badges asked Jul 30, 2021 at 14:04 sangho-yoon 1031 gold badge1 silver badge4 bronze badges

2 Does this answer your question? – PsyGik Commented Jul 30, 2021 at 17:03
no, this is not mine – sangho-yoon Commented Jul 31, 2021 at 5:02
Does this answer your question? React Error: "SharedArrayBuffer is not defined" in Firefox – juliomalves Commented Aug 3, 2021 at 21:20

Add a ment |

1 Answer 1

Sorted by: Reset to default 13

Which browser are you using? I assume you are on Chrome and its version 92. SharedArrayBuffer has been turned off by default starting that version. Find out more information here: https://developer.chrome./blog/enabling-shared-array-buffer/

TL;DR is you need to enable "cross-origin isolation" on your page which requires you a few things: Send two HTTP headers - Cross-Origin-Opener-Policy : same-origin and Cross-Origin-Embedder-Policy: require-corp. By this, your page will be cross-origin isolated and no longer be able to load cross-origin resources unless they are opt-in, but you can start using SharedArrayBuffer. You can learn more how to implement this: https://web.dev/cross-origin-isolation-guide/

You can try setting different headers in this demo page: https://first-party-test.glitch.me/

If you want a quick solution to fix the issue, you may opt your site into an allowlist to continue using SharedArrayBuffer until Chrome 96 by registering to an origin trial: https://developer.chrome./blog/enabling-shared-array-buffer/#origin-trial

Chrome team is hoping to introduce easier options to enable cross-origin isolation. Learn more here: https://developer.chrome./blog/coep-credentialless-origin-trial/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - SharedArrayBuffer is not defined - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)