From e0879e2b8698e50129cb9b20ecea8ed143d0655b Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 9 Dec 2021 16:39:35 +0000
Subject: [PATCH 1/2] fix: ensure devtool is init before use it

---
 sandpack-react/src/components/ReactDevTools/index.tsx | 6 ++++--
 website/docs/src/NestedSandpack.tsx                   | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/sandpack-react/src/components/ReactDevTools/index.tsx b/sandpack-react/src/components/ReactDevTools/index.tsx
index 39cfecf4a..5a954d199 100644
--- a/sandpack-react/src/components/ReactDevTools/index.tsx
+++ b/sandpack-react/src/components/ReactDevTools/index.tsx
@@ -37,12 +37,14 @@ export const SandpackReactDevTools = ({
           : Object.values(sandpack.clients)[0];
         const contentWindow = client?.iframe?.contentWindow;
 
-        setDevTools(reactDevtools.current.initialize(contentWindow));
+        if (reactDevtools.current && contentWindow) {
+          setDevTools(reactDevtools.current.initialize(contentWindow));
+        }
       }
     });
 
     return unsubscribe;
-  }, [clientId, listen, sandpack.clients]);
+  }, [reactDevtools, clientId, listen, sandpack.clients]);
 
   useEffect(() => {
     sandpack.registerReactDevTools();
diff --git a/website/docs/src/NestedSandpack.tsx b/website/docs/src/NestedSandpack.tsx
index 2a8331c27..95eb83204 100644
--- a/website/docs/src/NestedSandpack.tsx
+++ b/website/docs/src/NestedSandpack.tsx
@@ -46,7 +46,7 @@ export default function App() {
       <Sandpack
         customSetup={{
           dependencies: {
-            "@codesandbox/sandpack-react": "latest",
+            "@codesandbox/sandpack-react": "0.10.0",
           },
         }}
         files={{

From 3847ce3d31c543c433d9349361539c2fe8c24df6 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 9 Dec 2021 16:56:43 +0000
Subject: [PATCH 2/2] react-dev-tool dependency

---
 sandpack-react/package.json                    | 3 ++-
 website/docs/docs/advanced-usage/components.md | 2 +-
 website/docs/src/NestedSandpack.tsx            | 2 +-
 website/theme/package.json                     | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/sandpack-react/package.json b/sandpack-react/package.json
index f445c45ab..a800403a5 100644
--- a/sandpack-react/package.json
+++ b/sandpack-react/package.json
@@ -49,7 +49,8 @@
     "@react-hook/intersection-observer": "^3.1.1",
     "codesandbox-import-util-types": "^2.2.3",
     "codesandbox-import-utils": "^2.2.3",
-    "react-devtools-inline": "4.4.0"
+    "react-devtools-inline": "4.4.0",
+    "react-is": "^17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
diff --git a/website/docs/docs/advanced-usage/components.md b/website/docs/docs/advanced-usage/components.md
index 5a76090bf..39da5989e 100644
--- a/website/docs/docs/advanced-usage/components.md
+++ b/website/docs/docs/advanced-usage/components.md
@@ -197,7 +197,7 @@ export default function CustomSandpack() {
     <SandpackProvider template="react">
       <SandpackLayout>
         <SandpackPreview />
-        <SandpackReactDevTools style={{ width: "50%" }} />
+        <SandpackReactDevTools style={{ flex: 1 }} />
       </SandpackLayout>
     </SandpackProvider>
   )
diff --git a/website/docs/src/NestedSandpack.tsx b/website/docs/src/NestedSandpack.tsx
index 95eb83204..2a8331c27 100644
--- a/website/docs/src/NestedSandpack.tsx
+++ b/website/docs/src/NestedSandpack.tsx
@@ -46,7 +46,7 @@ export default function App() {
       <Sandpack
         customSetup={{
           dependencies: {
-            "@codesandbox/sandpack-react": "0.10.0",
+            "@codesandbox/sandpack-react": "latest",
           },
         }}
         files={{
diff --git a/website/theme/package.json b/website/theme/package.json
index 4a018a7d2..b62bba496 100644
--- a/website/theme/package.json
+++ b/website/theme/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.9.1",
+    "@codesandbox/sandpack-react": "*",
     "framer-motion": "^5.3.3",
     "next": "12.0.3",
     "react": "17.0.2",