fix(devtools): guard against window in useMediaQuery

Fixes #1515

Author: tannerlinsley

src/devtools/useMediaQuery.ts

@@ -4,28 +4,32 @@ import React from 'react'
 
 export default function useMediaQuery(query) {
   // Keep track of the preference in state, start with the current match
-  const [isMatch, setIsMatch] = React.useState(
-    () => window.matchMedia && window.matchMedia(query).matches
-  )
+  const [isMatch, setIsMatch] = React.useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia && window.matchMedia(query).matches
+    }
+  })
 
   // Watch for changes
   React.useEffect(() => {
-    if (!window.matchMedia) {
-      return
-    }
+    if (typeof window !== 'undefined') {
+      if (!window.matchMedia) {
+        return
+      }
 
-    // Create a matcher
-    const matcher = window.matchMedia(query)
+      // Create a matcher
+      const matcher = window.matchMedia(query)
 
-    // Create our handler
-    const onChange = ({ matches }) => setIsMatch(matches)
+      // Create our handler
+      const onChange = ({ matches }) => setIsMatch(matches)
 
-    // Listen for changes
-    matcher.addListener(onChange)
+      // Listen for changes
+      matcher.addListener(onChange)
 
-    return () => {
-      // Stop listening for changes
-      matcher.removeListener(onChange)
+      return () => {
+        // Stop listening for changes
+        matcher.removeListener(onChange)
+      }
     }
   }, [isMatch, query, setIsMatch])