HTML different between build and develop - develop works ok - strange workaround

Please excuse if this is a duplicate, I tried to search over open issues, but didn’t immediately see one that matched.

I am seeing a difference between HTML develop and build output. The bad repo creates the correct HTML in develop but bad HTML when in build. The good repo implements a workaround discovered by @stefantrinh1 and documented here- https://github.com/gatsbyjs/gatsby/issues/8560#issuecomment-592666085 the ‘good’ repo seems to creates the correct HTML in both build and develop

bad repo / depolyment: https://github.com/funkfinger/blog/tree/bad https://bad.jaywiggins.com

good repo / deployment: https://github.com/funkfinger/blog/tree/good https://good.jaywiggins.com

here is a diff between the two repos:

git diff good..bad
diff --git a/src/components/MdxPostTemplate/MdxPostTemplate.jsx b/src/components/MdxPostTemplate/MdxPostTemplate.jsx
index 83ca274..c32ae54 100644
--- a/src/components/MdxPostTemplate/MdxPostTemplate.jsx
+++ b/src/components/MdxPostTemplate/MdxPostTemplate.jsx
@@ -16,14 +16,14 @@ export const PageTemplatePure = ({
     <HeroImage img={heroImage.childImageSharp.fluid} />
   ) : null;
   return (
-    <article className={`single-post${obsolete ? ' obsolete' : ''}`}>
+    <div className={`single-post${obsolete ? ' obsolete' : ''}`}>
       {img}
       <div className="single-post-body">
         <h1>{title}</h1>
         <div className="post-date">{date}</div>
         <MDXRenderer>{body}</MDXRenderer>
       </div>
-    </article>
+    </div>
   );
 };
 
diff --git a/src/components/PostExcerpt/PostExcerpt.jsx b/src/components/PostExcerpt/PostExcerpt.jsx
index 85cb0d5..939be27 100644
--- a/src/components/PostExcerpt/PostExcerpt.jsx
+++ b/src/components/PostExcerpt/PostExcerpt.jsx
@@ -10,7 +10,7 @@ const PostExcerpt = ({ title, children, img, slug, first, obsolete }) => {
     obsolete ? ' obsolete' : ''
   }`;
   return (
-    <article className={c}>
+    <div className={c}>
       <Link to={slug}>{i}</Link>
       <div className="post-excerpt-text">
         <Link to={slug}>
@@ -21,7 +21,7 @@ const PostExcerpt = ({ title, children, img, slug, first, obsolete }) => {
           <div className="more-link">more...</div>
         </Link>
       </div>
-    </article>
+    </div>
   );
 };
 

Description

differences in outputted HTML in deployed (build) versions - left has weird <article> tag workaround…

see:

and:

Steps to reproduce

See good vs bad examples : the only difference is the use of the <article> tag creates correct HTML while the <div> tag produces incorrect HTML. Develop produces correct output with the <div> tag.

Expected result

Same HTML output between develop and build or with different tags (article vs div)

https://good.jaywiggins.com

Actual result

the <div class="layout"> gets replaced with <div class="post-excerpt-first first-post-in-list"> only difference is <div> tag replaced with <article> tag.

https://bad.jaywiggins.com

Environment

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i7-7Y75 CPU @ 1.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
    Yarn: 1.22.0 - ~/.yarn/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.0/bin/npm
  Languages:
    Python: 2.7.16 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python
  Browsers:
    Chrome: 80.0.3987.132
    Safari: 13.0.5
  npmPackages:
    gatsby: ^2.19.7 => 2.19.7 
    gatsby-image: ^2.2.42 => 2.2.42 
    gatsby-plugin-eslint: ^2.0.8 => 2.0.8 
    gatsby-plugin-manifest: ^2.2.39 => 2.2.39 
    gatsby-plugin-mdx: ^1.0.77 => 1.0.77 
    gatsby-plugin-offline: ^3.0.32 => 3.0.32 
    gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21 
    gatsby-plugin-react-helmet-async: ^1.0.15 => 1.0.15 
    gatsby-plugin-sass: ^2.1.29 => 2.1.29 
    gatsby-plugin-sharp: ^2.4.5 => 2.4.5 
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 
    gatsby-remark-images: ^3.1.44 => 3.1.44 
    gatsby-source-filesystem: ^2.1.46 => 2.1.46 
    gatsby-transformer-sharp: ^2.3.16 => 2.3.16 

[jlkiri]

OK, so apparently the problem is exactly because you wrap your page in gatsby-browser but do not do so in gatsby-ssr which leads to a mismatch during hydration. I just made your example work locally by copying everything from gatsby-browser.js to gatsby-ssr.js. You should do the same.

As stated in docs about wrapPageElement:

There is an equivalent hook in Gatsby’s SSR API. It is recommended to use both APIs together. 

https://www.gatsbyjs.org/docs/browser-apis/#wrapPageElement

[mckelveygreg]

Sooo… what if I am not use gatsby-ssr.js or gatsby-browser.js? Is there a way to double check my plugins to see if they are introducing inconsistencies?

BTW, the <article> thing totally worked… 😨