---
title: How can I fix SharedArrayBuffer is not defined?
description: Learn how to enable cross-origin isolation to fix SharedArrayBuffer not being defined.
url: "https://vercel.com/kb/guide/fix-shared-array-buffer-not-defined-nextjs-react"
published: 2025-11-03
last_updated: 2025-11-10
authors: Lee Robinson
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

SharedArrayBuffer is a JavaScript construct that allows two or more JavaScript contexts, such as multiple web workers or the main thread, to read and write to a shared memory block. This facilitates parallel processing and efficient data transfer in web applications.

## Why is SharedArrayBuffer not defined?

In response to potential security vulnerabilities like the Spectre attack, which could exploit high-resolution timers like SharedArrayBuffer to read memory across origins, SharedArrayBuffer was disabled by default from Chrome 92 onwards.

## How can I fix SharedArrayBuffer not defined?

You can resolve this issue in one of two ways.

### Enable cross-origin isolation

Cross-origin isolation is a security feature that prevents documents from different origins from sharing resources, thereby reducing the risk of side-channel attacks like Spectre.

To enable cross-origin isolation, [send two HTTP headers](https://vercel.com/docs/concepts/projects/project-configuration#headers). If you're using Next.js, you can use `next.config.js`:

```jsx
module.exports = {
  async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ];
  },
};
```

Or alternatively, with `vercel.json`:

```json
{
  "headers": [
    {
      "source": "/",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }
  ]
}
```

- `Cross-Origin-Embedder-Policy: require-corp` ensures that resources loaded on your document are isolated to your origin and won't be shared with other sites.
  
- `Cross-Origin-Opener-Policy: same-origin` ensures that your document doesn't share the same process with other documents unless they're from the same origin.
  

For more information on cross-origin isolation, [read this guide](https://web.dev/cross-origin-isolation-guide/).

### Join an origin trial (if available)

As of Chrome 92, you can opt your site into an origin trial for SharedArrayBuffer. However, note that the availability and conditions of these trials may change over time. Check the current status of origin trials at **`chrome://flags/#enable-sharedarraybuffer-origin-trial`**. After registering, you may need to restart Chrome for the changes to take effect.

## Conclusion

SharedArrayBuffer can significantly enhance the performance of your web applications. However, due to potential security risks, using it requires careful implementation. By following the steps above, you can safely leverage SharedArrayBuffer in your web applications.

## More Next.js guides

- [Sitemap lastmod should track content, not deployments](/kb/guide/correct-lastmod-nextjs-sitemap): Set accurate sitemap lastmod dates in Next.js using stored content timestamps, targeted revalidation, and checks that distinguish content changes from builds.
- [Optimize CSS output after moving Next.js from webpack to Turbopack](/kb/guide/optimize-turbopack-css): Diagnose larger CSS after moving Next.js to Turbopack. Use the agent skill to compare route-level output, identify causes, and test targeted fixes.
- [Migrate self-hosted Next.js and containers from AWS to Vercel](/kb/guide/migrate-containers-from-aws-to-vercel): Migrate Next.js apps and HTTP containers from AWS to Vercel. Configure AWS access, assess background workers, and plan testing, DNS cutover, and rollback.