SandpackProvider not triggering rerenders when props change on NextJS 13/14

[danieldelcore]

SandpackProvider not triggering rerenders when props change on NextJS 13/14

[danieldelcore]

In fact this might be reproducible on the website. I could have sworn this theme switcher updated the color scheme of the editor but now it looks like it does nothing 🤔

[danieldelcore]

Ok, it seems to be fixed after downgrading to "@codesandbox/sandpack-react": "2.0.22" 😅

Here's a new repro link with a broken switcher https://codesandbox.io/p/sandbox/dank-wood-9gtfp5?file=%2Fpackage.json%3A8%2C45

[danieldelcore]

Looks like the issue was introduced in 2.11.0, possibly in this PR 🤔 #1050

My guess, we might need to add prefferedTheme to the deps array and update it even if themeFromProps is auto:

https://github.com/codesandbox/sandpack/pull/1050/files#diff-ef320de67c942aac6167958e5b1f652adb01179be4aba48f40651de9cea7c50cR80

  React.useEffect(() => {
-    if (themeFromProps !== "auto") return;
+   if (themeFromProps !== "auto") {
+      setPreferredTheme(setPreferredTheme);
+      return;
+   }

    const colorSchemeChange = ({ matches }: MediaQueryListEvent) => {
      setPreferredTheme(matches ? "dark" : "light");
    };

    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", colorSchemeChange);

    return () => {
      window
        .matchMedia("(prefers-color-scheme: dark)")
        .removeEventListener("change", colorSchemeChange);
    };
  }, [themeFromProps]);