bug(deployment): fix deployment issue where code invovling window s…

…hould only run in browser Move any `window` code into a `useEffect` in `Puzzle` component. Co-authored-by: Erik Margetis <[email protected]> Co-authored-by: Joseph Liang <[email protected]>
syncosaurus · Apr 15, 2024 · 4c4befc · 4c4befc
1 parent ff0e2a0
commit 4c4befc
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/src/components/Puzzle/index.js b/src/components/Puzzle/index.js
@@ -2,7 +2,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import ClientWindow from '/landing/Client-window2.svg'
 import Signal from './Signal'
 import SignalVertical from './SignalVertical'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 function IFrame() {
   const {
@@ -20,9 +20,12 @@ function IFrame() {
 }
 
 export default function Puzzle() {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+  const [windowWidth, setWindowWidth] = useState()
 
-  window.addEventListener('resize', e => setWindowWidth(e.target.innerWidth))
+  useEffect(() => {
+    setWindowWidth(window.innerWidth)
+    window.addEventListener('resize', e => setWindowWidth(e.target.innerWidth))
+  }, [])
 
   if (windowWidth < 1094) {
     return (