Vanilla and Static templates rendering twice on initial load

[Muhammad-Ahmad-Rai]

Bug report

Packages affected

• [ ] sandpack-client
• [x] sandpack-react

Description of the problem

Similar issue as reported in #856 and #784. On initial load, sandpack renders twice.

What were you doing when the problem occurred?

What steps can we take to reproduce the problem?

console.log in sandpack static or vanilla templates, and refresh the sandbox.

Video reproducing the issue:

https://github.com/codesandbox/sandpack/assets/111280841/20e6f6e1-48e0-450f-bcd8-11d28c8630a5

Link to sandbox:

Static Template: https://codesandbox.io/s/sandpack-double-logs-forked-jl9s8c?file=/src/App.js Vanilla Template: https://codesandbox.io/s/sandpack-double-logs-forked-ng9q49?file=/src/App.js

Your Environment

Software	Name/Version
Sandpack-client version	2.7.1
Sandpack-react version	2.7.1
Browser	Chrome, Firefox
Operating System	Mac OS Ventura

[Kukiezi]

I just started using sandpack a few days ago to implement into my website. After a few tests it seems like console.log is occuring twice when Im using SandpackConsole and SandpackPreview.

To add to that it doesn't seem to be happening on initial render but on any change I am doing in CodeEditor on vanilla template.

This code will perform 2 console.log operation when I expect 1:

  return (
    <SandpackStack>
      <SandpackCodeEditor className="min-h-[200px] max-h-[400px]" showLineNumbers={true}/>
      <div className={`${!showPreview ? "hidden" : "w-full h-full"}`}>
        <SandpackPreview
          className="h-full"
          showOpenInCodeSandbox={false}
          showRefreshButton={true}
        />
      </div>
      <SandpackLayout>
        <SandpackConsole onLogsChange={(logs) => console.log(logs)} />
        <SandpackTests className="overflow-auto" watchMode={false} showVerboseButton={false}/>
      </SandpackLayout>
    </SandpackStack>
  );

Some weird interactions I noticed between components:

1. SandpackConsole alone doesn't show console.log from CodeEditor
2. SandpackConsole`` + (SandpackTestsorSandpackPreview`) fixes this and now logs are appearing
3. Having all three elements causing logs to be doubled.

Hope this helps in some way with fixing this issue. Looking forward to this.