sandpack cannot connect to the runtime or your network is having some issues

[SandStorm44]

Couldn't connect to server

This means sandpack cannot connect to the runtime or your network is having some issues. Please check the network tab in your browser and try again. If the problem persists, report it via email or submit an issue on GitHub.

ENV: ERROR: TIME_OUT

[chopfitzroy]

I see this issue consistently when doing a production build with Astro.

Works absolutely fine in dev.

[ical10]

I'm having this error as well for the sandpack in an online course (ui.dev). Any clue?

[eppisai]

@chopfitzroy how do we run sandpack in dev mode?

[chopfitzroy]

Sorry should have been more clear, running the Astro development server works, building for production with Astro causes the above issue.

I did find that updating the Astro directive on the component from client:load to client:only resolved the issue but it's not an ideal fix. In my case the issue appears to be Astro SSR.

[jerrywu001]

always timeout on my phone

https://blocksuite.affine.pro/getting-started.html

[theashishmaurya]

Did anyone found a solution?

[theashishmaurya]

Check the vite config, disabling "Cross-Origin-Embedder-Policy": "require-corp" fixed the issue.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
  },
  server: {
    // headers: {
    //   "Cross-Origin-Opener-Policy": "same-origin",
    //   "Cross-Origin-Embedder-Policy": "require-corp",
    // },
  },
});

[noteverseio]

@theashishmaurya solution is correct, however if the web page still requires SharedArrayBuffer(e.g you are running something like WebContainers.io or WASI in the same page/URL), those HTTP headers are required, not sure if there are any valid options that can help co-host sandpack and webcontainers or some WASI in the same web page.