Repository navigation
Works on development but fails on production in Gatsby #44
Description
Activity
- changed the title
[-]Works on development mode but fails on production mode in Gatsby[/-][+]Works on development but fails on production in Gatsby[/+]on Jan 19, 2020 Had the same problem.
Turned out to be an issue with Gatsby and how React SSR works. See discussion here:
gatsbyjs/gatsby#17914TLDR:
You can encounter it if server-rendered (or built) content is different from client content on initial load. Gatsby re-hydrates the elements on the initial load, but this is not always enough and some components will show the server state.
The proposed solution of forcing re-render worked for me (two-pass rendering):
class Layout extends React.Component { constructor(props) { super(props) this.state = { isClient: false } } render() { // can be `div` or anything else, I tried to keep this generic return <React.Fragment key={this.state.isClient}> {/*...*/} </React.Fragment/> } componentDidMount() { this.setState({ isClient: true }) } }
For my use case, conditionally rendering the toggle element worked the best:
export const ThemeToggle = () => { const darkMode = useDarkMode(false) const [isClient, setIsClient] = useState(false) useEffect(() => { setIsClient(true) }, []) return ( <Container> {isClient && ( <Switch checked={darkMode.value} onChange={darkMode.toggle} /> )} </Container> ) }
It's not perfect since the user sees the render, but it's good for now :)
Reacted by Kuba Janik, Mohammed Nadeem Shareef and 鲮鱼罐头Reacted by Kelvin DeCostaReacted by Vojta Holik and Tal Ohana@ognus Thank you so much for this!
Reacted by Tomek KolasaFWIW, using a post body script in Gatsby SSR, to update the input state, prevents the users from seeing the render every time.
Here is the whole code: astefanutti/website@f315e93.
I've been trying to fix this issue but couldn't. I'm using use-dark-mode with gatsby and while developing the application it works fine, but when I run build of the application it shows wrong behaviour, On page refresh the icon changes from the previous value even though the mode (dark/light persists)
I've added the your custom js in my html but doesn't seem to work.
Here's my implimentation
This is how I style elements
Thanks for your help