Gatsby 构建/s-s-r 换出导致显示错误的组件
Posted
技术标签:
【中文标题】Gatsby 构建/s-s-r 换出导致显示错误的组件【英文标题】：Gatsby build / s-s-r swapping out components causing display errors 【发布时间】：2020-05-23 01:02:57 【问题描述】：更新：以下问题已解决，但我遇到了类似的问题：
在我的图库模板中（例如页面see here，如果通过站点导航到，一切都加载正常。刷新时，网格父 div（样式组件中的 GalleryGrid）被擦除/取消样式/替换为空白 div。这实际上发生在刷新后，盖茨比补水期间。
我尝试用手动设置样式的常规 div 替换样式组件，但没有成功。不知道发生了什么！
我遇到了一个非常奇怪的错误！
我使用 Gatsby 构建了一个网站，从 Prismic.io 采购，并使用 styled-components 来设置样式。我使用 framer-motion 进行页面转换，并将我的布局组件添加到 gatsby-browser 以便仅转换页面内容，并向 gatsby-s-s-r 添加了类似的代码以修复一些初始 s-s-r 错误。
现在发生的情况是，每当直接访问索引以外的页面时（尝试this one），某些组件不会正确呈现。在此示例中，页面顶部的日期被替换为<Body> 组件（其样式与预期的<Date> 组件不同），实际内容已被截断，仅显示第一个<p>。
如果您导航到“投资组合”部分，然后导航回目录页面，页面将正确显示 - 日期现在是 <Date> 组件并显示整个正文。
类似的错误发生在“essay”节点上——例如，在this page 上，图像原本应该位于名为ImageContainer 的组件中，但在刷新或直接访问时被额外的EssayContainer 替换（而不是通过站点导航导航到页面）。
老实说，我不知道这里发生了什么或可能导致此错误的原因 - 无论是我做错了什么还是这是 Gatsby 的 s-s-r 或 styled-components/gatsby SC 插件中的错误。它在运行 gatsby develop 时按预期工作，因此必须是构建或 s-s-r 中的某些内容。
我的 gatsby 浏览器：
const transitionDelay = 500
export const wrapPageElement = ( element, props ) =>
return <Layout ...props>element</Layout>
export const shouldUpdateScroll = (
routerProps: location ,
getSavedScrollPosition,
) =>
if (location.action === "PUSH")
window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
else
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
() => window.scrollTo(...(savedPosition || [0, 0])),
transitionDelay
)
return false
还有我的 gatsby-s-s-r：
const transitionDelay = 500
export const wrapPageElement = ( element, props ) =>
return <Layout ...props>element</Layout>
我的仓库是here。
非常感谢任何帮助！
【问题讨论】：
【参考方案1】：原来是两个问题！
在构建时交换某些组件的问题是由于我使用的媒体查询库 - react-responsive- 不支持 s-s-r。我迁移到 @artsy/fresnel 并解决了很多问题。
内容被截断的问题似乎是样式组件不能很好地与 s-s-r 一起使用的问题。我直接设置了内部 html 的样式组件 - 在组件内嵌套另一个 div 并从那里设置 html 就可以了：
<Description>
<div
dangerouslySetInnerHTML=
__html: data.prismicGallery.data.description.html,
/>
</Description>
这几乎解决了所有问题 - 我仍然对 Gatsby 的水合作用替换/取消某些元素的样式有问题，但我怀疑这是一个不同的问题（添加到原始问题中）。
【讨论】：
以上是关于Gatsby 构建/s-s-r 换出导致显示错误的组件的主要内容，如果未能解决你的问题，请参考以下文章
gatsby-plugin-react-svg 导致太多递归错误
NextJS 使用 s-s-r 和 Styled-Components 构建错误