Skip to content

Instantly share code, notes, and snippets.

Created February 2, 2019 01:33
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?

Dealing with some serious issues regarding dev/build mismatch in gatsby and finally found the reason fo rit. It revolves around wrapRootElement and replaceComponentRenderer being treated differently during the hydration process. Look what happens when you return this:


export const wrapRootElement = () => {
  return <div className="wrapper">text</div>


export const replaceComponentRenderer = () => {
  return <div className="wrapper">text</div>

The output for that looks like this:

screen shot 2019-02-01 at 5 21 52 pm

However, if you put that code both in wrapRootElement the elements get merged as expected:

screen shot 2019-02-01 at 5 28 34 pm

Because replaceComponentRenderer does not get run during the SSR phase, there will be a reconciliation conflict if you're also modifying wrapRootElement in the gatsby-ssr file. The affect is that the browser-generated code gets shoved inside top-level component create by replaceComponentRender

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment