Sandpack v2 - SandpackProvider `files` not update

[nirtamir2]

Bug report

Packages affected

• sandpack-client
• sandpack-react

Description of the problem

I want to manage the files state for Sandpack in react state.
When I change the files state in v1.x - the SandpackPreview updated to reflect those changes
When I've done the same for Sandpack 2 - the SandpackPreview did not update according to file changes

What were you doing when the problem occurred?

I could use a workaround

function UpdateFiles(props: { files: SandpackFiles }) {
  const { files } = props;

  const { sandpack } = useSandpack();

  const stringifyFiles = JSON.stringify(files);
  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
    sandpack.updateFile(JSON.parse(stringifyFiles));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [stringifyFiles]);

  return null;
}
 

and

      <SandpackProvider
        files={files}
        customSetup={{
          environment: "create-react-app",
        }}
      >
        <>
          <UpdateFiles files={files} />
          <SandpackPreview  />
        </>
      </SandpackProvider>

to force update the files. But this seems wrong. Also I had to do // eslint-disable-next-line react-hooks/exhaustive-deps and use only the stringifyFiles as deps - without using sandpack as dependency -
because sandpack instance change on each effect run - causing infinite rerender loop.

What steps can we take to reproduce the problem?

Take the provided codesandbox example - press the button to change the files - see if the preview reflect those changes

Link to sandbox:

Example of working example in v1.20

Example of preview not update in v2.06

Your Environment

Varies between 1/2, checked with chrome in macos

Software	Name/Version
Sandpack-client version	2.01
Sandpack-react version	2.06
Browser	Chrome
Operating System	MacOS

[danilowoz]

Hey, @nirtamir2! Thanks for opening this issue

I can confirm this issue is happening only on v2, although I couldn't reproduce on Sandpack development environment. I'll try to address it as soon as possible, but meanwhile you could workaround this issue using a key prop:

<SandpackProvider key={JSON.stringify(files}>

This is far from perfect, but I don't want block you by using Sandpack 2

[nirtamir2]

Hi @danilowoz
Thanks for your quick response.
Setting the key is not optimal and causes flickering.

I think my hacky workaround with < UpdateFiles/> behaves better - because the preview component is still showing the last preview.

But I wonder why const { sandpack } = useSandpack(); is not stable.

Using a key

Screen.Cast.2023-02-20.at.1.38.56.PM.mp4

Workaround with < UpdateFiles/>

Screen.Cast.2023-02-20.at.1.44.51.PM.mp4

[nicksrandall]

FWIW, I'm also seeing this issue.

[nicksrandall]

@danilowoz Thanks for working on this. While the changes you made did technically fix the issue, I think it has caused another one where now my sandpack is erroring with "maximun callstack exceeded" presumably because of the files are now being marked as changed all the time?