xjamundx/gatsby-mismatch.md

## gatsby-mismatch.md

      
    Raw
  

              gatsby-mismatch.md
            
          
    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:
gatsby-ssr.js
export const wrapRootElement = () => {
  return <div className="wrapper">text</div>
}
gatsby-browser.js
export const replaceComponentRenderer = () => {
  return <div className="wrapper">text</div>
}
The output for that looks like this:

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

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