--- title: How can I fix SharedArrayBuffer is not defined? description: Learn how to enable cross-origin isolation to fix SharedArrayBuffer not being defined. url: /kb/guide/fix-shared-array-buffer-not-defined-nextjs-react canonical_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 related: - /docs/concepts/projects/project-configuration install_vercel_plugin: npx plugins add vercel/vercel-plugin --- ## Related pages > **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below. - [Advanced Node.js Usage](https://vercel.com/docs/functions/runtimes/node-js/advanced-node-configuration?from=related) — Learn about advanced configurations for Vercel functions on Vercel. - [Memory Usage](https://nextjs.org/docs/app/guides/memory-usage?from=related) — Optimize memory used by your application in development and production. - [Videos](https://nextjs.org/docs/app/guides/videos?from=related) — Recommendations and best practices for optimizing videos in your Next.js application. - [Shared Environment Variables](https://vercel.com/docs/environment-variables/shared-environment-variables?from=related) — Learn how to use Shared environment variables, which are environment variables that you define at the Team level and can - [Skew Protection](https://vercel.com/docs/skew-protection?from=related) — Learn how Vercel's Skew Protection ensures that the client and server stay in sync for any particular deployment. - [Development Environment](https://nextjs.org/docs/app/guides/local-development?from=related) — Learn how to optimize your local development environment with Next.js. - [Troubleshooting Cross-Origin Errors \\(net::ERR_BLOCKED_BY_ORB\\) with Deployment Protection](https://vercel.com/kb/guide/troubleshooting-cross-origin-errors-neterr-blocked-by-orb-with-deployment-protection?from=related) — Learn to resolve \\`net::ERR_BLOCKED_BY_ORB\\` errors on protected Vercel deployments. This guide explains how cross-origi - [How to enable CORS on Vercel](https://vercel.com/kb/guide/how-to-enable-cors?from=related) — Learn how to enable CORS on Vercel with vercel.json, Routing Middleware, framework config, and route handlers, plus how - [Understanding XSS Attacks](https://vercel.com/kb/guide/understanding-xss-attacks?from=related) — Learn about XSS attacks, their types, risks, and effective prevention strategies in this comprehensive guide for web sec - [How can I make my library compatible with the Vercel Edge Runtime?](https://vercel.com/kb/guide/library-sdk-compatible-with-vercel-edge-runtime-and-functions?from=related) — Learn how to make your library or SDK compatible with the Edge Runtime for existing Edge Runtime code and Routing Middle - [ISR Observability: Framework Discrepancies ](https://vercel.com/kb/guide/isr-observability-framework-discrepancies?from=related) — Understanding ISR Observability with Different Frameworks Full cross-link map for this page: [/kb/guide/fix-shared-array-buffer-not-defined-nextjs-react.graph.md](/kb/guide/fix-shared-array-buffer-not-defined-nextjs-react.graph.md) 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.