Preview window not updating with `files` prop.

[CTNicholas]

Bug report

Packages affected

• sandpack-client
• sandpack-react

Description of the problem

Hey, I've got a better repro this time! The preview doesn't always display the correct files after the SandpackProvider files prop has been updated.

What were you doing when the problem occurred?

Updating the files prop dynamically.

What steps can we take to reproduce the problem?

Watch my short Loom video and then open the Sandbox.

TLDW: I'm editing the files prop, when the preview updates, it shows an unstyled version of the previous set of files, instead of the current files. The internal sandpack.files state is correct.

Link to sandbox: link (optional)

Your Environment

Software	Name/Version
Sandpack-client version
Sandpack-react version	2.6.4
Browser	Chrome
Operating System	Windows 10

[SSHari]

I haven't been able to pinpoint exactly what's going on here, but I was able to simplify the example and recreate the bug: https://codesandbox.io/s/sandpack-bug-preview-not-working-c3nnmy?file=/src/index.tsx. If you switch between the working and broken file sets, you'll notice that one has the bug and the other doesn't.

The difference is that the file names change in the "broken" set of files when you click each button. Also, the import statement in the App.tsx file changes based on this as well.

I think this might be an upstream issue with the codesandbox client. I logged the messages that the client sends for both examples. I noticed that the client sends an initialized message for the first set of files when you switch between pages but not for the second set of files.

The initialized message triggers the compile step to be called again with isInitializationCompile set to true which causes the preview to refresh.

Anyways, I probably won't be able to dig any deeper into this for a few days, but hopefully this information can help anyone else who's looking at this.

[danilowoz]

I started debugging it on #945 yesterday. But I either couldn't go much further than you too, @SSHari.

At first, I suspected a bug in the react hot loader as it failed to update all components in the preview. However, I discovered that editing any file makes it work. It's odd that both scenarios use the same method, flow, and trigger, which doesn't make real sense.

I'll try to spend more time today on this issue, as this is something critical and not usual.

[danilowoz]

@CTNicholas, we're still investigating this issue. For sure, this is an unexpected behavior on our bundler,and we understand that it may be difficult to resolve. As a temp workaround, I would like to suggest you use a different key on Sandpack component in order to trigger a render and re-init Sandpack bundler. Does it work for you?

[CTNicholas]

@CTNicholas, we're still investigating this issue. For sure, this is an unexpected behavior on our bundler,and we understand that it may be difficult to resolve. As a temp workaround, I would like to suggest you use a different key on Sandpack component in order to trigger a render and re-init Sandpack bundler. Does it work for you?

Thank you so much for looking into this @danilowoz! Please let me know if I can help at all.

Changing the key might work on parts of the tutorial that use React (because of the quick loading time), but in the Next.js sections, that causes a 10-15 second loading spinner, which is a problem.

However, we won't be releasing anything with Sandpack for at least a couple of weeks! I'll ignore the bug for now, and keep checking back on your progress 👍.

Thanks again! 🖤