fix(react-devtool): add dependency (#249)

* fix: ensure devtool is init before use it * react-dev-tool dependency
codesandbox · Dec 9, 2021 · d569a6e · d569a6e
1 parent 23ef881
commit d569a6e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",