[CRITICAL] Error fetching sandbox

[brocode101]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

Whenever I try running React through Codesandbox API, it is showing Error fetching sandbox

How has this issue affected you? What are you trying to accomplish?

Our core-product, a design-to-code Figma plugin, Dualite, is down.

To Reproduce

https://codesandbox.io/embed/c3n57m?fontsize=14&hidenavigation=1&theme=dark

Link to sandbox: link (optional)

Your Environment

Software	Name/Version
Сodesandbox
Browser
Operating System

[filipelima18]

Hi,

It seems that the issue is that this Sandbox uses Vite, which is not supported by our in-browser bundler. There are two options to solve this:

1. Convert the Sandbox to a Devbox (using the "Convert to Devbox" button at the top right of the editor).
2. Convert the existing Sandbox into a create-react-app project, which works natively with our in-browser bundler. This typically can be achieved by moving index.html to a public folder.

If you want it to be a Devbox when generating the Sandbox using the API, you need to create a .codesandbox/devcontainer.json file as well, similar to the one below:

{
"name": "Devcontainer",
"image": "[ghcr.io/codesandbox/devcontainers/typescript-node:latest](http://ghcr.io/codesandbox/devcontainers/typescript-node:latest)"
}

This will automatically make it a Devbox, which natively supports Vite.