部署在netlify上的Gatsby SPA在首次加载时应用了错误的情感CSS(摘录示例) [英] Gatsby SPA deployed on netlify applies wrong emotion css on first load (distilled example)

问题描述

我设法将问题分解为以下代码.它可以与本地开发服务器正常工作，但是在部署到Netlify时会中断.
可以在此处(分支destilled-netlify-问题)
在此处

部署分支

---

我有一个原始的Gatsby SPA，具有通过Reach Router进行客户端路由的功能.
它有两个页面，/app/和/app/team/:teamName .
应用页面应始终呈现红色背景，而团队页面应始终呈现绿色背景

就是这样-这是所有相关代码:

 //src/pages/app.tsx从'react'导入React，{FC}从"@ reach/router"导入{RouteComponentProps，Router}从'@ emotion/core'导入{css}从'../styles'导入{sharedCss}const appCss = css`背景颜色:红色；`const teamCss = css`背景颜色:绿色；`const AppPage:FC< RouteComponentProps>=()=>< div css = {[appCss，sharedCss]}> App</div>const TeamPage:FC< RouteComponentProps>=()=>< div css = {[teamCss，sharedCss]}>团队</div>const App =()=>(<路由器>< AppPage path ="/app/"默认/>< TeamPage path ="/app/team/:teamName/"/></路由器>)导出默认应用 

gatsby-node.js 如建议 <代码>////gagsby-node.jsexports.onCreatePage =异步({页面，操作})=>{const {createPage} =操作如果(page.path.match(/^ \/app/)){page.matchPath ='/app/*'//eslint-disable-line no-param-reassigncreatePage(页面)}}

Netlify _redirects文件-重定向似乎按预期工作

 //src/static/_redirects/app/team/*/app 200 

问题:

团队页面的第一次加载将呈现 TeamPage 组件(单词"Team"可见)，但是在红色背景上而不是绿色-某种程度上应用appCss 而不是 teamCss .用f5刷新可解决此问题，并将背景变为绿色.但是使用ctrl + f5进行硬刷新会再次加载损坏的版本.

我注意到，当加载损坏的页面时，单词"App"表示首先闪烁，然后再更改为"Team"，表示AppPage组件首先被渲染-我想这与重定向有关.我想情感无法很好地应对过渡.有什么我可以做的，理想情况下立即加载 TeamPage 吗?

解决方案

我通过将组件之一包装在一个额外的div中解决了这个问题.事实证明，这足以防止Emotion混淆这两种布局.主页闪烁仍然存在，但这对我来说已经足够了.

编辑:尽管空div解决了提要示例中的问题，但我在真实应用程序的组件树中更深地遇到了类似的CSS问题.以下技巧对我有用，尽管不是最佳选择，但我现在将解决它.我只是将以下内容添加到主页"组件中:

 //这是一种规避情绪问题的技巧.我需要先坐骑//没有，否则通过netlify _redirects重定向时将应用错误的CSSconst [show，setShow] = useState(false)useEffect(()=> {setTimeout(()=> setShow(true)，1)}，[])如果(！show)返回null 

通过这种方式，首页不会被提交，从而阻止了情感延续其风格

I managed to distil my problem into the following code. It works fine with local dev server, but breaks when deployed to Netlify.
The source repo can be found here (branch destilled-netlify-problem)
The branch is deployed here

---

I have a primitive Gatsby SPA with client-side routing via Reach Router.
It has two pages, /app/ and /app/team/:teamName.
The App page should always render a red background, while the Team page should always render a green background

Ant that's it - here is all the relevant code:

// src/pages/app.tsx
import React, { FC } from 'react'
import { RouteComponentProps, Router } from '@reach/router'
import { css } from '@emotion/core'
import { sharedCss } from '../styles'

const appCss = css`
  background-color: red;
`
const teamCss = css`
  background-color: green;
`

const AppPage: FC<RouteComponentProps> = () => <div css={[appCss, sharedCss]}>App</div>
const TeamPage: FC<RouteComponentProps> = () => <div css={[teamCss, sharedCss]}>Team</div>

const App = () => (
  <Router>
    <AppPage path="/app/" default />
    <TeamPage path="/app/team/:teamName/" />
  </Router>
)

export default App

gatsby-node.js as suggested in Gastsby docs

// /gagsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/*' // eslint-disable-line no-param-reassign
    createPage(page)
  }
}

Netlify _redirects file - the redirects seem to work as intended

// src/static/_redirects
/app/team/* /app 200

The problem:

The first load of the Team page renderes the TeamPage component (the word "Team" is visible) but on red background instead of green - somehow appCss gets applied instead of teamCss. Refreshing with f5 fixes this, turning background green. But hard-refreshing with ctrl+f5 loads the broken version again.

I noticed that when the broken page is loading, the word "App" flashes first, before changing to "Team", indicating the AppPage component got rendered first - I suppose that has something to do with the redirect. I guess Emotion doesn't handle the transition well. Is there something I can do, ideally to load TeamPage right away?

解决方案

I solved the problem by simply wrapping one of the components in an extra div. This turned out to be sufficient to keep Emotion from confusing the two layouts. The homepage flashing persists, but that's good enough for me for now.

EDIT: Although the empty div solved the problem in the distilled example, I ran into similar css problems deeper in the component tree in my real app. The following hack worked for me, and although not optimal,I am going to settle with it for now. I simply added the following into my Homepage component:

// This is a hack to circumvent a problem with emotion. I need to first mount 
// nothing, otherwise wrong css gets applied when redirected via netlify _redirects
const [show, setShow] = useState(false)
useEffect(() => {
  setTimeout(() => setShow(true), 1)
}, [])
if (!show) return null

This way Homepage never gets commited, which prevents emotion from carrying over it's styles

这篇关于部署在netlify上的Gatsby SPA在首次加载时应用了错误的情感CSS(摘录示例)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！