codesandbox / sandpack

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

Sandpack

Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox.

Learn more about Sandpack

Sandpack Client

This is a small foundation package that sits on top of the bundler. It is framework agnostic and facilitates the handshake between your context and the bundler iframe.

Read more

Sandpack React

React components that give you the power of editable sandboxes that run in the browser.

import { Sandpack } from "@codesandbox/sandpack-react";

<Sandpack template="react" />;

Read more

Sandpack Themes

A list of themes to customize your Sandpack components.

import { githubLight } from "@codesandbox/sandpack-themes";

<Sandpack theme={githubLight} />;

Read more

sandpack's Issues

SandpackPreview prop route

Allow user to start a preview in a specific route.

<SandpackPreview route="/about"  />

Fix listen documentation

Provide a better documentation for listeners:

Before:

import { useSandpack } from "@codesandbox/sandpack-react";

const CustomRefreshButton = () => {
  const { dispatch, listen } = useSandpack();

  const handleRefresh = () => {
    // listens for any message dispatched between sandpack and the bundler
    const stopListening = listen((message) => console.log(message)); // this is wrong

    // sends the refresh message to the bundler, should be logged by the listener
    dispatch({ type: "refresh" });

    // unsubscribe
    stopListening();
  };

  return (
    <button type="button" onClick={handleRefresh}>
      Refresh
    </button>
  );
};

After:

function SandpackListener() {
  const { listen } = useSandpack();

  useEffect(() => {
    const unsubscribe = listen((msg) => console.log(msg));

    return unsubscribe;
  }, [listen]);

  return null;
}

Option to disable the console.clear the bundler does

Can mess up the DX, especially if preserve log does not work with console.clear (like in Firefox)

sandpack-vue

Hi @alexnm , is there any plan to provide a sanpack component of vue version? I would like to provide one.

Using SandPack on localhost

Hello everyone - first of all, great job on this, this will be a huge boon to the community and I really can't wait for what they do with it. I was doing some experiments of my own, specifically, I was interested in rendering react components, which I was successful at, and managed to render the entire component just using the client library (without React wrapper even).

However, I do have a question that might be just my misunderstanding of some limitations. When I am using pure HTML / js library wrapper on top of client I wrote (it is simple, just basically bundles together required files, handles the lifecycle, and does few other not important things for now), I am unable to run this example on localhost. Specifically actually, it looks as if it runs, however, nothing actually gets rendered because the content always comes up empty, stuck at the following phase (it never goes beyond this structure):

However, it seems everything from network is loaded properly:

Lastly, while nothing initially shows up inside console, if you wait long enough, it will post this message:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

I am not 100% sure if this is related, as it doesn't give any idea from where this comes - but I would suspect it is connected. Also, note that my library is working if I deploy it to the cloud - once it runs on https accessible url, it renders the components immediately. Do you have any idea how to get it working on localhost - I think it is realistically a very real situation that makes the development of supporting libraries very hard, as you have to be constantly re-deploying to try. Thanks for any answer!

Improve repository setup

• lint / prettier code on commit (with precommit hook)
• use lerna or workspaces to unify the setup? (not sure if it makes sense yet)
• setup a CI for working branches and restrictions on main branch
• a quick suite of cypress tests would be nice to verify the components before publishing
• release automation (tags, release notes, etc.)

Multiple Previews in the same provider

Allow multiple previews in the same provider. Very powerful if combined with some preview props like viewport or routes.

using private NPM packages

First, just want to say this is an amazing project! 🙏 I'm curious if there is an idiomatic way to include private NPM dependencies? Would this just require hosting them in a custom registry or possibly bundling the code somehow alongside in a hidden file? Appreciate any help or guidance!

Update readme for sandpack-client

How can I determine the version of codesandbox-client for sandpack-client's self-hosted bundler?

I need to self host the bundler for sandpack-client, but the master branch's code of codesandbox-client doesn't match @codesandbox/[email protected]. I got the error of missing browser-fs dependency for example because yarn build:sandpack produces no browser-fs files any more.

How can I tell the right version (like which commit) of codesandbox-client for the latest sandpack-client ?

Refresh on non-root page

The deploy with the bundler does not redirect to the root index.html in case the iframe receives a relative path, like: https://1-0-0-beta-2-sandpack.codesandbox.io/about

Sandpack examples that have routing might alter the url via the history API so a refresh button will end up requesting a different page from the server

Support more templates

Hi, is there any plan to support more template, such as vue3, angular? or PR welcome?

SandpackProvider: `files` prop doesn't work with `template` prop

const code = `import ReactMarkdown from 'react-markdown' 

export default function App() {
  return <ReactMarkdown># Hello, *world*!</ReactMarkdown>
}`;

<SandpackProvider
  template="react"
  files={{
    "/App.js": code,
  }}
  customSetup={{
    dependencies: {
      "react-markdown": "latest",
    },
    entry: "/index.js",
  }}
/>;

Listener is missing to register/emit events in some cases.

It was quite tricky to point down exactly when it's happening. But at times, the listener from useSandpack is failing to listen for events emitted by the sandpack bundler.
https://codesandbox.io/s/eloquent-mccarthy-qr09r?file=/src/App.tsx

STR

• Open the console and we should be able to see the logs.
• Refresh the browser or csb preview. And in some instances the listener won't log the events.

Screen.Recording.2021-06-29.at.8.16.18.AM.mov

FileExplorer Component

We have FileTabs and there's also a sketch of a potential FileExplorer component, but it is not styled in the same way as the rest of the components and it might not have all the functions yet. Might be interesting to bring the file explorer as an offscreen fly in/out option in the Sandpack Layout for potentially opening other files that are not in the tabs

Prop validation

The library is written in TypeScript so any TS project will have a good DX. However, non TS projects might use some prop validation and relevant messages being thrown for incorrect usages

Invalid Version: undefined while running smooshpack client

I was trying a very simple example with smooshpack-client.

I am using parcel as the bundler and getting this error.

yarn start
yarn run v1.22.10
$ parcel index.html
Server running at http://localhost:1234 
🚨  /Users/vipulbardwaj/Work/POCs/smooshpack-poc/smooshpack.js: Invalid Version: undefined
    at new SemVer (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/semver/semver.js:314:11)
    at compare (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/semver/semver.js:647:10)
    at lt (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/semver/semver.js:688:10)
    at /Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/@babel/preset-env/lib/index.js:280:22
    at Object.default (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/@babel/helper-plugin-utils/lib/index.js:22:12)
    at getEnvPlugins (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/parcel-bundler/src/transforms/babel/env.js:62:34)
    at getEnvConfig (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/parcel-bundler/src/transforms/babel/env.js:12:25)
    at async getBabelConfig (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/parcel-bundler/src/transforms/babel/config.js:32:19)
    at async babelTransform (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/parcel-bundler/src/transforms/babel/transform.js:6:16)
    at async JSAsset.pretransform (/Users/vipulbardwaj/Work/POCs/smooshpack-poc/node_modules/parcel-bundler/src/assets/JSAsset.js:83:5)

Project Code Below

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooshpack POC</title>
</head>
<body>
    <h1>Smooshpack experiment</h1>
    <div id="smooshpack-container"></div>
    <script src="./smooshpack.js" defer async></script>
</body>
</html>

smooshpack.js

import { Client } from 'smooshpack';

const version = "1.0.0";

const PACKAGE_JSON_CODE = JSON.stringify(
    {
      title: 'test',
      main: 'index.js',
      dependencies: {
        uuid: 'latest',
      },
    },
    null,
    2
  );
  
  // Give it either a selector or an iframe element as first argument, the second arguments are the files
  const client = new Client('#smooshpack-container', {
    files: {
      '/index.js': {
        code: `console.log(require('uuid'))`,
      },
      '/package.json': {
        code: PACKAGE_JSON_CODE,
      },
    },
  });

package.json

{
  "name": "smooshpack-poc",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html"
  },
  "dependencies": {
    "parcel-bundler": "^1.12.4",
    "smooshpack": "^1.0.0-beta-5"
  }
}

This is just an example from the README , not sure what I am doing wrong here

Sandpack and Codesandbox rendering the same code differently

Hey, I was playing around with Sandpack-React and noticed some differences in how codesandbox and sandpack render the same code.

Here is the link of the codesandbox demo that I built. https://codesandbox.io/s/sandpack-codesandbox-rendering-conflict-fry37?file=/src/App.js

Here is my simple component, it uses react-native-web, when I use this in codesandbox I get the expected behaviour of flex: 1 covering the whole screen height.

function Original() {
  return (
    <View
      style={{
        backgroundColor: "orangered",
        flex: 1
      }}
    >
      <Text
        style={{
          color: "white",
          fontSize: 64,
          padding: 5
        }}
      >
        React Native Text
      </Text>
    </View>
  );
}

But when I use the same code in Sandpack setting, it only takes the height which is equal to the height of content.

const code = `
import React from "react";
import { View, Text } from "react-native";

function App() {
  return (
    <View
      style={{
        backgroundColor: "orangered",
        flex: 1
      }}
    >
      <Text
        style={{
          color: "white",
          fontSize: 64,
          padding: 5
        }}
      >
        React Native Text
      </Text>
    </View>
  );
}

export default App;
`;


<Sandpack
  template="react"
  files={{
    "/App.js": code
  }}
  customSetup={{
    dependencies: {
      "react-native-web": "latest"
    }
  }}
/>

The video below shows a screen capture of the codesandbox demo mentioned above.

Screen.Recording.2021-06-14.at.2.44.49.PM.mov

Any ideas on how we can fix this issue ?

Set light/dark theme based on user pref

When the theme is not explicitly set, use the prefers-colors-scheme media query to set the right values

Self hosting the bundler

Here the documentation mentions that we can self host the bundler,

I want to highlight that you can also host the bundler by yourself, all necessary files are in the sandpack folder.

It mentions the sandpack folder, which I am confused about slightly as to which folder are we talking about here and also, how would I go about it If I wanted to self host the bundler. If I understand correctly, Sandpack imports currently point to ...${version}_codesandbox.io... and I haven't found any option to change this to some other url.

Can you explain the process of self hosting bundler a little more please.

Changing default environment

I'm trying to load in sandpack the same files as in this csb: https://codesandbox.io/s/test-parcel-environment-b7uf3

This is what I'm trying: https://codesandbox.io/s/sandpack-test-parcel-environment-7yjt2?file=/src/App.js

But apparently it's using the create-react-app environment even when I'm passing environment: 'parcel'.

Am I missing something or is it a bug?

Support read-only mode by file

Is there a way to make a file not writable but not hide it from the user ? Rignt now i have hidden the files

   <SandpackProvider template="react" customSetup={{
                files: {
                  "/App.js": Appcode,
                  "/App.test.js": {
                    code: testAppCode,
                    hidden: true
                  },
                  "index.js": indexFile,
                  "SetupTest.js": {
                    code: code,
                    hidden: true
                  } 
                },
....
               

Better API to update files

I don't know if this is the best option, but I think it confuses the need to change the active file to update a specif file's code.

changeActiveFile(file);
updateCurrentFile(code);

Maybe we can have a global Function to update it:

const { sandpack } = useSandpack();
const { files, updateFileCode } = sandpack;

updateFileCode(code, files[1]) 

Toggle features inside the bundler based on the flags

sandpack-client now sends 3 flags on compile:

• showOpenInCodeSandbox
• showErrorScreen
• showLoadingScreen

Only the open in csb feature is implemented

Project works in CodeSandbox, not in sandpack

I've got a basic HMTL/CSS/JS demo. It imports a library in the HMTL file.

When running the code in sandpack, the JS errors saying the imported library is not present. But when loading codesandbox, the project works fine.

Here is the project, in codesandbox

Any help would be appreciated!

Loading animation timeout

The preview overlay animation could have a timeout after which it disappears to let the users know something is wrong. There might be scenarios we're not accounting for, in which the messages are not dispatched by the bundler so the overlay covers the potential error indefinitely.

Code editor mobile/touch device interaction

Currently the editor gets overflow: auto only on focus, to avoid scroll hijack on long pages. However, we can go further with a bit of exploration:

• how should we treat scroll in scroll situations?
• does it make sense to be able to edit code on mobile/small screens?
• can the code editor be focused on one tap and editable on the second one?
• what about tab indentation vs keyboard navigation?

Generate css stylesheets with all the themes

The index.css generated in the dist folder has the sp-light theme by default. This is not ideal when using other themes because the custom properties will be overridden when the component mounts. It might look strange with SSR.

So ideally the css build pipeline should output one css file for each theme:

• /dist/sp-light/index.css
• /dist/sp-dark/index.css
• /dist/night-owl/index.css

@codemirror v0.18 in @codesandbox/sandpack-react breaks when targeted for es5

Error

With @codemirror v0.18.0 builds break, which is being used from react-smooshpack-1.0.0-beta-0. Since, the @codemirror/autocomplete uses Nullish Coalescing. And it is not transpiled when published to npm.

I am not sure, if codemirror should handle this or the end user. But most of the build tools, don't transpile their dependencies. And so, builds break when we transplie projects and not target es6 at the end.

new RegExp(`${addStart ? "^" : ""}(?:${source})${addEnd ? "$" : ""}`, expr.flags ?? (expr.ignoreCase ? "i" : ""));

updateCurrentFile adds an extra character to new code

updateCurrentFile method from sandpack object adds an extra } character to the previewed code.
So the preview window shows this source code:

import React, { FC } from "react";

export const Main: FC = () => {
    const buttonClick = () => {
        window.parent.postMessage({ type: 'click', message: { element: 'button' }}, '*')
    }

    return <button onClick={buttonClick}>Trigger event</button>
}}

Reproduction repository: https://github.com/nkovacic/sandpack-examples

Full example:

import React, { FC } from 'react';
import './App.css';

import {
  SandpackCodeEditor,
  SandpackLayout,
  SandpackPreview,
  SandpackProvider,
  SandpackSetup
} from '@codesandbox/sandpack-react';

import '@codesandbox/sandpack-react/dist/index.css';

const mainFile = `import React, { FC } from "react";

export const Main: FC = () => {
    const buttonClick = () => {
        window.parent.postMessage({ type: 'click', message: { element: 'button' }}, '*')
    }

    return <button onClick={buttonClick}>Trigger event</button>
}`;

const reactTypescriptCustomSetup: SandpackSetup = {
  entry: '/src/index.tsx',
  main: '/src/main.tsx',
  dependencies: {
    react: 'latest',
    'react-dom': 'latest',
    'react-scripts': '4.0.0',
  },
  files: {
    './tsconfig.json': {
      code: `{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "jsx": "react"
  }
  }`,
      hidden: true,
    },
    '/public/index.html': {
      code: `<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  </head>
  <body>
  <div id="root"></div>
  </body>
  </html>`,
      hidden: true,
    },

    '/src/index.tsx': {
      code: `import * as React from "react";
  import { render } from "react-dom";
  import { Main } from "./main";
  const rootElement = document.getElementById("root");
  render(<Main/>, rootElement);
          `,
      hidden: true,
    },

    '/src/main.tsx': {
      code: mainFile,
    },
  },
};

const SandpackListener: FC = () => {
    const { sandpack: { updateCurrentFile} } = useSandpack()

    useEffect(() => {
        const listener = (event: MessageEvent) => {
            if (event.data?.type === 'click') {
                const newMainFile = mainFile.replace('Trigger', 'Do not trigger');

                console.log(newMainFile);

                updateCurrentFile(newMainFile);
            }
        }

        window.addEventListener("message", listener, false);

        return () => window.removeEventListener('message', listener)
    }, []);

    return null;
}

const App: FC = () => {
  return (
    <div className="App">
      <SandpackProvider customSetup={reactTypescriptCustomSetup}>
        <SandpackLayout>
          <SandpackCodeEditor />
          <SandpackListener />
          <SandpackPreview
            showOpenInCodeSandbox={false}
            showRefreshButton={false}
          />
        </SandpackLayout>
      </SandpackProvider>
    </div>
  );
};

export default App;

Sandpack preview not updating when files change (svelte environment)

See this codesandbox: https://codesandbox.io/s/sandpack-test-svelte-c1by1?file=/src/App.js

When the files change (click the "change code" button) the preview is not updated (but it updates when you click the little refresh button).

Add fading overflows

This was in the initial design discussion but was not yet implemented. For styling purposes, we can add a fading overlay for the code editor (horizontal and vertical overflow) and for the tabs list.

Unable to establish connection with the sandpack bundler

I'm running into the following issue:

Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via email or submit an issue on GitHub.

The request that fails is:

https://col.csbops.io/data/sandpack

POST:

[{"measurement":"load_times","tags":{"browser":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36","cache_used":false,"version":"PROD-1619099058-79d43c136"},"fields":{"transpilation":922.7550000068732,"evaluation":18.164999986765906,"external_resources":0.040000013541430235,"compilation":1215.0850000034552,"boot":70349.53999999561,"total":71568.62500001444,"dependencies":187.6650000049267}}]

The same bundle works on codesandbox: https://codesandbox.io/s/4l9sc?file=/app.tsx&from-sandpack=true

Export custom CodeMirror component to the end-user

Give the possibility to use the CodeEditor from sandpack without the state management of SandpackCodeEditor component.

Local files to sandpack

I was wondering if you can pass your whole project folder or file to be shown inside the sandpack instance via the files prop

can anyone show me an example?

Optimize openInCodeSandbox behavior

The hook now computes a GET URL on each change of the files in sandpack. This can be problematic for two reasons:

• the speed of the url encoding function
• the size of the url which can go over 2000 characters (414 - request too long)

Solution

• keep the GET url for smaller sandpacks
• decide a point at which the component generates a POST form instead of an anchor tag

Unit testing

Is there a way we can use unit testing with sandpack-react :

        const handleRefresh =  () => {
            // listens for any message dispatched between sandpack and the bundler
            
            const stopListening = listen((message) => console.log(message));
            // sends the refresh message to the bundler, should be logged by the listener
            dispatch({ type: "status", status: 'running-tests' });
            
            // unsubscribe
             stopListening();
            console.log("here")
          };                

should this do the trick?

Additional Templates

Currently on react, vue and vanilla are added in the library. Ideally, we should support a wide range of templates.

• preact
• angular
• svelte
• react-typescript
• static (no bundling at all?)

The long term feature would be to dynamically fetch template data from codesandbox and avoid hardcoding the files and dependencies.

Executing <head> scripts and appending content to the bundler html

Because the bundler is a static build with a predefined html, we cannot serve the entry html of each sandpack, the same way codesandbox does. Hence, the tags don't get added to the page when running sandpack. This was signaled already in #32, we had a fix for it, but it was breaking some existing behavior in codesandbox. But even if we copy the head tags individually, the scripts do not get executed. This was signaled in #40. Plus, it might be too late for events like onload to be triggered in those scripts. Hence we need a solution for executing that as soon as possible.

Styles and fonts in the head tag of index.html are not reflecting for react.

I am trying to render the same project in code-sandbox and sandpack. Looks likes anything in the head of index.html is not reflecting in the render output.

I am not sure, if the error is on the side of bundler or config of the project.

Here is the link for codesandbox --> https://codesandbox.io/s/1cugh?file=/public/index.html
Here is the sandpack implementation to render the same project --> https://repl.teleporthq.io/project/9ea7c3fc-46b3-4dcb-bb01-01bdecdd99f1

Runtime errors cause flickering and don't show enough info

1. Runtime errors do not have sufficient info (line/row, stack trace)
2. Preview flickers because of the runtime error happening after the compile was done without any errors (and the error overlay disappears) There are a couple of options here, but they involve some work in the bundler which is not straight-forward.

webpack5 import error: Should not import the named export 'version'.'replace' (imported as 'version') from default-exporting module (only default export is available soon)

webpack5 import error: Should not import the named export 'version'.'replace' (imported as 'version') from default-exporting module (only default export is available soon)

Solve running locally in iframe issue

When running sandpack in storybook, codesandbox-api does not recognize it as standalone, hence the handshake is not done properly. Work locally by commenting out a condition in the node_modules of sandpack-client which is not ideal.

Codemirror stress test

I noticed sometimes the editor feels laggy, but couldn't reproduce a solid scenario yet. There could be some optimizations around the corner with the rendering cycles and our integration of @codemirror/next

Custom files without using Sandpack

Trying to follow the example

  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackPreview,
} from "@codesandbox/sandpack-react";

const CustomSandpack = () => (
  <SandpackProvider template="react">
    <SandpackLayout>
      <SandpackCodeEditor />
      <SandpackPreview />
    </SandpackLayout>
  </SandpackProvider>
);

I was't able to find a way to insert custom files to the initiated sandbox and could not find an example on docs.
Is there a way of initiate the sandbox with my custom files while using this setup?

Investigate IntersectionObserver implementation

There were reports of sandpacks that do not run and it seems like it is related to the intersection observer implementation. The sandpack appears in the viewport, but the html body of the bundler is empty and the iframe has no src attribute, so the client is not instantiated.

Prevent browser navigation when scrolling horizontally

In can easily happen by accident that you scroll horizontally and trigger a browser back, hence losing your edited code. Maybe we can prompt the user before exiting the page if there are code changes on the page

Can we add a new template for typescript-react ?

Hey, I wanted to use React Typescript. What would be the steps to to add that to the current version. I was looking inside the templates folder and this looks relative simpler to add, I can add if agreed.

Is there a way to add this to the existing version ?

Import code editor at runtime

One strategy to optimize bundle size is to dynamically import the code editor dependency (codemirror in this case). Need to research the implications and potential issues with support in all type of project, including SSR

ReferenceError: process is not defined (Docusaurus)

Hi. I was testing sandpack-react with Docusaurus, but there's a fatal error as soon as I import a sandpack component:

client.js?e6b8:10 Uncaught (in promise) ReferenceError: process is not defined
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-client/esm/client.js:21)
    at Module../node_modules/@codesandbox/sandpack-client/esm/client.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:23)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/contexts/sandpackContext.js:8)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/contexts/sandpackContext.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:143)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/hooks/useSandpack.js:6)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/hooks/useSandpack.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:183)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/common/Layout.js:8)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/common/Layout.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:79)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/presets/SandpackRunner.js:7)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/presets/SandpackRunner.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:215)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./src/pages/index.js:12)
    at Module../src/pages/index.js (:3000/component---site-src-pages-index-jsc-4-f-f99.js:47)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at Function.fn (:3000/runtime~main.js:339)

Made a repro repo here, but it's basically the default docusaurus template with this added to pages/index.js:

import { SandpackRunner } from "@codesandbox/sandpack-react";

const CustomSandpack = () => <SandpackRunner />;

Using version 0.0.6.