---
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.

## Related Documentation

- [Next.js](/docs/frameworks/full-stack/nextjs)

## More Next.js guides

- [Build an AI Chat Agent with Weather API Tool Calling](/kb/guide/build-ai-agent-weather-api): Build an intelligent conversational agent that fetches real-time weather data using the AI SDK, tool calling, and a backend weather API powered by Express, FastAPI or Nitro
- [Human-in-the-Loop with Chat SDK and Workflow SDK](/kb/guide/human-in-the-loop-with-chat-sdk-and-workflow-sdk): Combine Chat SDK and Workflow SDK to suspend workflows on approval cards in a chat platform, then resume on click via createWebhook.
- [Build with Vercel Blob on Next.js](/kb/guide/vercel-blob-nextjs): Deploy the Vercel Blob Next.js Starter and learn how client uploads store images securely in a private Blob store.

## Reference Architecture

Choose a stack and work through the decisions behind it, with curated documentation, guides, templates, and courses to help you build.

- [Agent stack](/kb/architecture/agents): Build and operate agents with models, tools, and durable workflows.
- [Web applications](/kb/architecture/web): Choose rendering, data, authentication, and caching approaches.
- [Backends](/kb/architecture/backends): Choose a runtime, connect services, and run background work.

[Browse all stacks](/kb/architecture)

## Build with prompts

Build an app, extend an agent, or improve your project with ready-to-use prompts for your coding agent.

[Browse the prompt library](/kb/prompts) · [Read the Markdown index](/kb/prompts.md)