CODEWITHSUNDEEP
javascriptreactjsfirefoxcross-origin-embedder-policycross-origin-opener-policy
Or Assayag
Or Assayag

Reputation: 6346

React Error: "SharedArrayBuffer is not defined" in Firefox

I have a React app, created with 'create-react-app' (I also use jsdom NPM package), and for some reason, the application throws an error on load Only in Firefox (works fine in Chrome & Edge).
Here is the error:

ReferenceError: SharedArrayBuffer is not defined
./node_modules/jsdom/node_modules/webidl-conversions/lib/index.js
C:/Or/Web/WorldCovid/WorldCovid/node_modules/jsdom/node_modules/webidl-conversions/lib/index.js:347

  344 | 
  345 | const abByteLengthGetter =
  346 |     Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
> 347 | const sabByteLengthGetter =
  348 |     Object.getOwnPropertyDescriptor(SharedArrayBuffer.prototype, "byteLength").get;
  349 | 
  350 | function isNonSharedArrayBuffer(V) {

After some Googling I found:
"To enable SharedArrayBuffer in Firefox, go to about:config and set the javascript.options.shared_memory preference to true" (https://github.com/ggerganov/kbd-audio/issues/9)
The problem is that it was already enabled to true.

Did anyone face this issue before? Thanks.

UPDATE:

Tried to convert to:

const shared = new SharedArrayBuffer(1024);

const abByteLengthGetter =
    Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength").get;
const sabByteLengthGetter =
    Object.getOwnPropertyDescriptor(shared.prototype, "byteLength").get;

Still get the same error (different line to the SharedArrayBuffer object).

Upvotes: 28

Views: 43947

Answers (5)

Aadesh Kulkarni
Aadesh Kulkarni

Reputation: 569

Add below package details - https://github.com/gzuidhof/coi-serviceworker

  1. Download coi-serviceworker.js (or coi-serviceworker.min.js).
  2. Put it next to your index file (or in any folder above it)
  3. Add to your HTML file: <script src="coi-serviceworker.js"></script>

This script will reload the page on the user's first load to magically add the required COOP and COEP headers in a service worker.

Rules:

  1. It must be in a separate file, you can't bundle it along with your app.
  2. It can't be loaded from a CDN: it must be served from your own origin.
  3. Your page will still need to be either served from HTTPS, or served from localhost.

For more details, see this

Note: This is quick fix.

Upvotes: 2

stephane k.
stephane k.

Reputation: 1788

You need to set two response headers for your document:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

These are new security requirements for using SharedArrayBuffer.

You can check in code if cross origin isolation is enabled:

if (crossOriginIsolated) {
    // SharedArrayBuffer is available
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

Upvotes: 27

dekajoo
dekajoo

Reputation: 2112

As said before, due to Spectre vulnerability, SharedArrayBuffer have been disabled on most browsers unless you specify Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers.

If you want to activate such headers on react dev server locally you can configure the proxy manually that adds headers using a custom middleware.

Created a src/setupProxy.js file with:

module.exports = function (app) {
    app.use(function (req, res, next) {
        res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
        res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
        next();
    });
};

Upvotes: 5

Roark Nguyen
Roark Nguyen

Reputation: 39

In index.html file, you add script like below. I think it will be helpful. And I did.

<body>
<script>
  if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>

Upvotes: 3

agektmr
agektmr

Reputation: 2234

The React issue has been fixed and released in 17.0.2. They say there's no plan to backport the change to older versions, but this shouldn't be a big issue unless you are expecting high-precision performance measurement on React.

SharedArrayBuffer has been disabled across all browsers except Chrome desktop since the discovery of Spectre, but Chrome desktop also disables it starting in Chrome 92. You'll need "cross-origin isolation" to enable it.

When you encounter an issue: Uncaught ReferenceError: SharedArrayBuffer is not defined on Chrome, you'll need to apply "cross-origin isolation" to continue using SharedArrayBuffer, but as an escape-hatch, you can request an origin trial to allowlist your site to continue using SharedArrayBuffer without cross-origin isolation at least until Chrome 96.

To enable cross-origin isolation, you must send two HTTP headers (COOP and COEP) as @stephane k. mentioned in the other comment.

To learn more about cross-origin isolation, read:

Upvotes: 9

Related Questions