How troubleshoot discrepancy between develop and build?

[einarpersson]

Hi!

I currently have a situation where I see one thing when I run gatsby develop and another thing when I run gatsby clean && gatsby build. However, if I resize the window it begins working the same. I do not see any errors in the console.

Anyway, my question is more general. When you encounter discrepancies between local and production, how do you go about troubleshooting this? It feels as if it is very hard to debug this kind of issues. Am I missing something? And are there certain classes of errors to watch out for?

Thanks for any input,
/Einar

PS. I'm using a useWindowDimensions-hook

import React from "react"
import { window } from "browser-monads"

export default () => {
    const [windowDimensions, setWindowDimensions ] = React.useState({
        innerWidth: window.innerWidth, 
        innerHeight: window.innerHeight
    })

    React.useEffect(() => {
        function handleResize() {
            setWindowDimensions({
                innerWidth: window.innerWidth, 
                innerHeight: window.innerHeight
            })
        }

        handleResize()

        window.addEventListener('resize', handleResize)

        return () => {
            window.removeEventListener('resize', handleResize)
        }
    }, [])

    return windowDimensions
}

<FontAwesomeIcon
      icon={faBars}
      style={{ display: windowDimensions.innerWidth < 688 ? 'block' : 'none' }}
      className={css.hamburger}
      size="2x"
      onClick={() => setOpen(!open)}
    />

[vladar]

We have an experimental feature that enables SSR in development. Add the following to your gatsby-config.js to enable it:

// gatsby-config.js
module.exports = {
  flags: {
    DEV_SSR: true,
  },

Please let us know at #28138 if you encounter any issues.