-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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.
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
HTML different between build and develop - develop works ok - strange workaround #22113
Comments
Sometimes, it could be due to a mismatch between the server-rendered and client-rendered HTML. Since your classNames depend on some logic, did you make sure that logic is identical between client and server? Do you see any warnings in console like |
Thanks for the reply - const { createFilePath } = require('gatsby-source-filesystem');
const path = require('path');
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions;
const MdxPostTemplate = path.resolve(
'src/components/MdxPostTemplate/MdxPostTemplate.jsx'
);
const result = await graphql(`
query MdxPageBuilderQuery {
mdxPageBuilderQuery: allMdx(
sort: { order: ASC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
fields {
slug
}
}
next {
frontmatter {
title
}
fields {
slug
}
}
previous {
frontmatter {
title
}
fields {
slug
}
}
}
}
}
`);
if (result.errors) {
reporter.panicOnBuild('Error while running GraphQL query.');
return;
}
result.data.mdxPageBuilderQuery.edges.forEach(({ node, next, previous }) => {
createPage({
path: node.fields ? node.fields.slug : null,
component: MdxPostTemplate,
context: {
slug: node.fields.slug,
next,
previous,
},
});
});
};
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions;
if (node.internal.type === 'Mdx') {
const value = createFilePath({ node, getNode });
createNodeField({
name: 'slug',
node,
value,
});
}
}; the code for the good and bad repos that contains the missing element are exactly the same: <div className="layout">
<Seo title={t} />
<Header />
<main>{children}</main>
<Footer />
</div> and <div className="layout">
<Seo title={t} />
<Header />
<main>{children}</main>
<Footer />
</div> in the bad version the posts are wrapped in when the posts are wrapped in when the posts are wrapped in when the bad version is run in |
Here is the output from the build: Jays-MacBook:blog jayw$ yarn build
yarn run v1.22.0
$ gatsby build
success open and validate gatsby-configs - 0.090s
success load plugins - 2.771s
success onPreInit - 0.009s
success delete html and css files from previous builds - 0.115s
success initialize cache - 0.039s
success copy gatsby files - 0.158s
success onPreBootstrap - 0.040s
success createSchemaCustomization - 0.039s
success source and transform nodes - 0.969s
success building schema - 0.849s
success createPages - 0.184s
success createPagesStatefully - 0.106s
success onPreExtractQueries - 0.004s
success update schema - 0.076s
success extract queries from components - 0.443s
success write out requires - 0.023s
success write out redirect data - 0.003s
success Build manifest and related icons - 1.364s
success onPostBootstrap - 1.411s
⠀
info bootstrap finished - 12.379 s
⠀
success Building production JavaScript and CSS bundles - 19.424s
success Rewriting compilation hashes - 0.007s
success run queries - 19.711s - 4/4 0.20/s
[ ] 0.003 s 0/102 0% Building static HTML for pages
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component YouTubeVideo was not imported, exported, or provided by MDXProvider as global scope
Component YouTubeVideo was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component YouTubeVideo was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
Component Gist was not imported, exported, or provided by MDXProvider as global scope
success Building static HTML for pages - 1.866s - 102/102 54.66/s
info Done building in 34.154782359 sec
✨ Done in 35.03s. |
OK, so apparently the problem is exactly because you wrap your page in As stated in docs about
|
Thanks, and you're absolutely correct. I didn't understand how
|
I have had the same issue with
|
Sooo.... what if I am not use BTW, the |
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
andbuild
output. The bad repo creates the correctHTML
indevelop
but badHTML
when inbuild
. The good repo implements a workaround discovered by @stefantrinh1 and documented here- #8560 (comment)the 'good' repo seems to creates the correct
HTML
in bothbuild
anddevelop
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:
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
vsdiv
)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
The text was updated successfully, but these errors were encountered: