From d569a6e22d2c09ccb763b1e296e4b37eb17c194c Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 9 Dec 2021 17:14:41 +0000
Subject: [PATCH] fix(react-devtool): add dependency (#249)

* fix: ensure devtool is init before use it

* react-dev-tool dependency
---
 sandpack-react/package.json                           | 3 ++-
 sandpack-react/src/components/ReactDevTools/index.tsx | 6 ++++--
 website/docs/docs/advanced-usage/components.md        | 2 +-
 website/theme/package.json                            | 2 +-
 4 files changed, 8 insertions(+), 5 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/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/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/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",