Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gatsby hydration/client-side re-render issue #154

Open
ftes opened this issue Mar 11, 2021 · 3 comments
Open

Gatsby hydration/client-side re-render issue #154

ftes opened this issue Mar 11, 2021 · 3 comments

Comments

@ftes
Copy link

ftes commented Mar 11, 2021

Input

// src/pages/hydration-issue.js
import { Link } from "gatsby"
import * as React from "react"

export default function HydrationIssuePage() {
  return (
    <div bg="red">
      <div variant="container">
        <h1>Hello</h1>
        <p>World!</p>
        <Link to="/"><span variant="text.link">Go home</span></Link>
      </div>
    </div>
  )
}

Run gatsby build && gatsby serve

Output

hydration-issue

When hovering over the link, further data is fetched and the styles "break". I assume this is somehow related to hydration, or at least the first client-side re-render.

The global styles (styles.global in theme.js) seem to get lost.

Remarks

The issue does not occur in dev mode (gatsby develop).
@ftes ftes changed the title Gatsby hydration issue Gatsby hydration/client-side re-render issue Mar 11, 2021
@ftes
Copy link
Author

ftes commented Mar 11, 2021

Also posted here: system-ui/theme-ui#1568

@ftes ftes mentioned this issue Mar 11, 2021
Closed
@ftes
Copy link
Author

ftes commented Mar 11, 2021

Update: The issue seems to be triggered by the gatsby prefetch mechanism when hovering over the link.
Not all links cause the styles to break. But certain ones always do, every time.

I cannot yet pinpoint what distinguishes those links from others

@ftes
Copy link
Author

ftes commented Mar 11, 2021

Update: I narrowed down which prefetched pages cause the bug.
Affected: Hovering over a link to any page that executes the @emotion/react keyframes method.

Example:

// src/pages/start-page.js
import * as React from "react"
import {Link} from "gatsby"
const StartPage = () => <Link to="/page-with-keyframes">Go to page with @emotion/react keyframes call</Link>
export default StartPage

// src/pages/page-with-keyframes.js
import * as React from "react"
import {keyframes} from "@emotion/react"

const unused = keyframes``
const PageWithKeyframes = () => <div>Empty</div>
export default PageWithKeyframes

Note that keyframes is called, but the result is not actually consumed anywhere.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ftes