Impossible to get 'files' to override sandpack default/fallback framework views in both quickstart & advanced.

[prodkt]

Bug report

Packages affected

• [ I'd assume so, 100% in an unusable state ] sandpack-client
• [check] sandpack-react

Description of the problem

Sandpack is in a complete unusable state for us. Any which route we take the default view for any framework persists over any custom file definitions.

The right "file/s" are contained but the default state of the framework you use for a fallback value and demo purposes is always a higher specificity than the clients/users.

What were you doing when the problem occurred?

I didn't confirm with the other team but out of the gate I ran a new init of Astro then addition of Astros React integration package and than the addition of Sandpacks package. In this most raw state it also yeilded the same result. No custom file specification ever would take the specificity.

Also tested the other teams monorepo, with the same result.

What steps can we take to reproduce the problem?

It appears for us using the latest version of these two tools: Astro & Sandpack presents an unusable solution. At least for us. It appears there are other experiencing the same and I will comb over their experiences.

Appreciate any urgency that can be given to this. I will make note to follow up in a couple hours and either attempt a solution if one is provided or close this ticket and find an alternative solution for our guys.

Link to sandbox: link

Doesn't get much more simple. npm/yarn or pnpm an Astro project, ass Astro React integration, add Sandpack. You know your sandpack component from there, try to use either Astro, react or vanilla -- the 3 we tried) and nothing changes (really it does you can find the user provided files & continuous changes appear but appear deeper in the tree that are invisible visually unless you jump through the source tree.

Your Environment

Software	Name/Version
Sandpack-client version	@latest
Sandpack-react version	@latest
Browser	Chrome@latest, Playwright@Latest with too many to list, Safari
Operating System	MacOS, windows & linux boxes tested here

[prodkt]

missing capture of the settings below, nothing super fancy which may not hurt to know or at least identify a culprit quicker.

[danilowoz]

Hey, I'm sorry to hear you're facing this issue. Could you please provide a repo or sandbox where we can reproduce this issue? I just installed it on a sandbox and it did work well: https://codesandbox.io/p/sandbox/elegant-easley-gm4hkl

[jkergal]

Same problem here (if i understood it well).

My custom files doesn't override template, and when i remove the template props, there are always fallback files. Your fallback files / template files are always mixed with our custom files.

[jkergal]

@prodkt you said that you found other persons that had the same issue, can you give some links? :)

[ofergoli]

Same, How can i get the updated code from state?

[ofergoli]

Ok! I found a working solution for this to have the state of all the files in the editor: @prodkt

import { Fragment, useEffect } from "react";
import {
    SandpackProvider,
    SandpackLayout,
    SandpackCodeEditor,
    SandpackPreview,
    useSandpack,
    SandpackConsole,
  } from "@codesandbox/sandpack-react";
  import { amethyst } from "@codesandbox/sandpack-themes";

  const Editor = () =>{
    const { sandpack } = useSandpack();
      useEffect(() => {
        // *************************************** //
        //      UPDATED CODE FROM STATE!!         //
        // *************************************** //
        console.log(sandpack.files);
      },[sandpack.files])

      return <Fragment>
            <SandpackLayout>
                <SandpackCodeEditor style={{ height: '600px' }} showLineNumbers={true} showRunButton={false} />
                <SandpackPreview showNavigator style={{ height: '600px' }} showOpenInCodeSandbox={false}>
                    <SandpackConsole  style={{ height: '300px' }}/>
                </SandpackPreview>
            </SandpackLayout>
      </Fragment>
  }
  export const SandpackWithLiveCodeState = () =>  {
    return <SandpackProvider 
    customSetup={{
        entry: "/index.html",
      }}
      template="vanilla"
     theme={amethyst}
     files={{
        "/index.html": {
            active: true,
            code: `<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Sandpack is amazing!</h1>
  </body>
</html>
<script src="/index.js"></script>
<script src="/code.js"></script>`,
          },
          "/index.js": {
            code: 'console.log("this is a test!");'
          },
          "/code.js": {
            code: 'console.log("wow!");'
          },
          "/style.css": {
            code: `body {
  background-color: yellow;
}
            `,
          },
    }}>
        <Editor />
    </SandpackProvider>
  }

Enjoy!

[Gazook89]

~~This is rather old at this point, and I don't have much to add, but I had this same issue and @ofergoli's comment above worked for me. I am experimenting with Astro and building a blog, hoping to include a live editor, and I could not get files to override index.html when using the Static template (and then pretty much rewriting the template).~~

~~I'm not as savvy as earlier commenters but I did want to confirm that the above fix worked right away, making sandbox setup work as I expected (at at least so far).~~

Thanks again @ofergoli 🥇

---

Edit: Sorry, i misspoke. I was looking over the changes to be sure I understood, and then noted that ofergoli's answer used the vanilla template, where I had been using static. I restored what I had been struggling with, and switched to vanilla, and it worked. So in brief:

import { Sandpack } from '@codesandbox/sandpack-react';
import { monokaiPro } from "@codesandbox/sandpack-themes";
import { marked } from 'marked';

function MySandpack() {
    return <>
        <Sandpack 
            template='vanilla' 
            files={
                {
                    '/brew.html' : { code: marked.parse('# marked'), active: true },
                    '/style.css' : { code: 'p {\n  color : red;\n}'}
                }
            }
            customSetup={
                {
                    entry : '/brew.html'
                }
            }
            theme={monokaiPro}
            main='/brew.html' />
    </>
}

export default MySandpack;