Integrating Sandpack in my Astro blog for the fun of it

This is not going to be a technical blog post per se. I’ve always wanted to try out Sandpack and thought why not integrate it and also create a fluff piece with some buzz words and miniscule amount of information sprinkled in.

If you’re a web dev, you most likely have heard of or come across CodeSandbox which is a platform for creating, sharing prototypes and iterate over your ideas in the browser without opening your IDE. Interestingly CodeSandbox also allows you to embed the sandbox in your code itself. So now the question is what is Sandpack and why not use CodeSandbox instead?

Good question. Moving on.

Just kidding. Even though CodeSandbox allows you to embed the sandbox, there is not much room left for customization, which is possible via Sandpack as it is a “component toolkit for creating live-running code editing experiences, using the power of CodeSandbox”

Below is a sample React code with atomDark as theme.

They also provide a theme builder to customize Sandpack how you want it which I found really really cool which I’ll definitely explore later.

Now it remains to be seen whether I’ll integrate it in my future posts and make it interactive.

I’m adding below content due to the issue I found during build

It seems this post did turn into a technical one as I was not able to build the project due to this error:

 error   Named export 'Sandpack' not found. The requested module '@codesandbox/sandpack-react' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:

  import pkg from '@codesandbox/sandpack-react';
  const { Sandpack } = pkg;

  File:
    G:\flashblaze-astro\node_modules\.pnpm\astro@1.8.0\node_modules\astro\dist\runtime\server\render\page.js:89:30
  Code:
    88 |   }
    > 89 |   const factoryReturnValue = await componentFactory(result, props, children);
         |                              ^
      90 |   const factoryIsHeadAndContent = isHeadAndContent(factoryReturnValue);
      91 |   if (isRenderTemplateResult(factoryReturnValue) || factoryIsHeadAndContent) {
      92 |     await bufferHeadContent(result);

There is a similar issue I found on GitHub. Even after applying the recommended fix it does not work as the issue is with the package itself.

So to fix it in Astro, you have to exclude it from SSR in astro.config.mjs like so:

export default defineConfig({
  //... your rest of the config
  vite: {
    ssr: {
      noExternal: [
        '@codesandbox/sandpack-react',
        '@codesandbox/sandpack-themes',
        '@codesandbox/sandpack-client',
      ],
    },
  },
});

This will exclude the Sandpack libraries during SSR.