[🐞] SharedArrayBuffer is not defined

[wanjohiryan]

Which component is affected?

Qwik Runtime

Describe the bug

Hey 👋🏽

I am trying to add CrossOrigin isolation to qwik in order to use SharedArrayBuffer. It works in dev mode, but when i push to prod on Vercel, CrossOrigin breaks.

Here is my vercel.json file:

{
  "headers": [
    {
      "source": "/build/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, s-maxage=31536000, immutable"
        },
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }
  ]
}

Here is my vite.config.js

import path, { join } from "path";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig, loadEnv } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import { qwikReact } from "@builder.io/qwik-react/vite";
import { partytownVite } from "@builder.io/partytown/utils";
// import crossOriginIsolation from "vite-plugin-cross-origin-isolation"
import mkcert from "vite-plugin-mkcert"

export default defineConfig(() => {
  const env = { ...process.env, ...loadEnv("mock", process.cwd()) };
  return {
    plugins: [
      qwikCity({ trailingSlash: false }),
      qwikVite(),
      tsconfigPaths({ root: "./" }),
      qwikReact(),
      partytownVite({ dest: join(__dirname, "dist", "~partytown") }),
      // Required for SharedArrayBuffer
      // crossOriginIsolation(),
      mkcert(),
      //For moq-js (SharedArrayBuffer)
      {
        name: "configure-response-headers",
        configureServer: (server) => {
          server.middlewares.use((_req, res, next) => {
            res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
            res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
            next();
          });
        },
      },
    ],
    server: {
      // HTTPS is required for SharedArrayBuffer
      https: true,
      proxy: {}
		},
    define: {
      //This solves an issue on Vercel, where Qwik/Vite cannot see any of the "private" env variables
      "process.env": env,
    },
    dev: {
      headers: {
        "Cache-Control": "public, max-age=0",
      },
    },
    preview: {
      headers: {
        "Cache-Control": "public, max-age=600",
      },
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
    build: {
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },
  };
});

When CrossOrigin works(sometimes), i get this error:

Which leads to this

My Qwik site does not have any /assets folder nor an iFrame

Reproduction

null

Steps to reproduce

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (4) x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz
    Memory: 1.56 GB / 7.85 GB
  Binaries:
    Node: 21.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (123.0.2420.65)
    Internet Explorer: 11.0.22621.1

Additional Information

No response

[wmertens]

@wanjohiryan did you find it? What was the solution, for future reference?