@ jonathan-chin gatsby info --clipboard 를 실행하여 관련 환경 정보를 제공해 주시겠습니까?

또한 공유 한 저장소의 package.json 에서 Gatsby v1을 사용하고 있음을 확인했습니다. Gatsby v1에 gatsby-cli 버전 1.x.x 을 사용하세요. gatsby-cli 버전 2.x.x 은 Gatsby v2 용입니다.

안녕하세요.

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 9.4.0 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Safari: 12.0
  npmPackages:
    gatsby: ^1.9.277 => 1.9.278
    gatsby-image: ^1.0.24 => 1.0.55
    gatsby-link: ^1.6.28 => 1.6.46
    gatsby-plugin-canonical-urls: ^1.0.11 => 1.0.18
    gatsby-plugin-google-analytics: ^1.0.12 => 1.0.31
    gatsby-plugin-google-fonts: 0.0.3 => 0.0.3
    gatsby-plugin-material-ui: ^0.1.3 => 0.1.3
    gatsby-plugin-nprogress: ^1.0.10 => 1.0.14
    gatsby-plugin-react-helmet: ^1.0.5 => 1.0.8
    gatsby-plugin-react-next: ^1.0.11 => 1.0.11
    gatsby-plugin-sass: ^1.0.26 => 1.0.26
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-remark-autolink-headers: ^1.4.8 => 1.4.19
    gatsby-remark-copy-linked-files: ^1.5.36 => 1.5.37
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^1.5.67 => 1.5.67
    gatsby-remark-responsive-iframe: ^1.4.19 => 1.4.20
    gatsby-source-filesystem: ^1.5.8 => 1.5.39
    gatsby-transformer-remark: ^1.7.21 => 1.7.44
    gatsby-transformer-sharp: ^1.6.14 => 1.6.27
  npmGlobalPackages:
    gatsby-cli: 2.0.0-rc.1
    gatsby: 1.9.278

글로벌 gatsby-cli를 1.9.X로 다운 그레이드하면 CSS 문제가 발생합니다. 2.0.0-rc.1로 유지하면 BrowserslistError: Unknown browser query dead 오류가 발생합니다.

@ jonathan-chin gatsby-cli 버전 1.9.x 에서 CSS 문제가 발생하는 것을 알고 있지만 사용중인 Gatsby 버전과 호환되므로 사용해야하는 버전입니다.

복제 저장소를 공유해 주셔서 감사합니다. 제가 살펴 볼게요.

@ jonathan-chin이 개발과 빌드에서 정확히 어떤 CSS가 다른지 알 수 있습니까?

안녕하세요.
이것은 개발에서 가져온 것이며 예상되는 스타일입니다.

이것이 내가 빌드에서 얻은 것입니다.

CSS 클래스가 다르다는 것을 알 수 있습니다.

나는 이것이 이전에 문제였던 것을 기억하지 않습니다. CSS가 영향을받지 않은 마지막 좋은 빌드는 https://gitlab.com/sharemeals/gatsby-site/commit/4342a715d6a1cdcb2808e5450819753be6f56a19

이것에 대한 수정은 # 8092라고 생각합니다.

@ jonathan-chin 수정 사항의 내용을 가져 와서 변경 사항을 시도해 볼 수 있습니까? 참고 : 아직 보지 못했다면 Gatsby 문서의 How to Contribute 섹션에 gatsby-dev-cli를 설정하는 방법에 대한 정보가 포함되어 있습니다.이를 테스트해야합니다!

또한 @ jonathan-chin은 Gatsby v1을 사용하는 것 같습니다. 이 수정 사항을 얻으려면 Gatsby v2로 업그레이드 할 수 있습니까?

@DSchau 이것으로 돌아 오는 데 너무 오래

기존 프로젝트를 v2로 마이그레이션하는 것은 너무 많은 작업이었습니다. 새 v2 스타터를 시작하고 하나씩 마이그레이션하기로 결정했습니다 (필요에 따라 복사 및 수정). 이 경우 gatsby develop은 gatsby 빌드와 근본적으로 다른 출력을 생성합니다.

개츠비 빌드

개츠비 개발

빌드 및 개발시 동일한 두 요소의 CSS 스타일 비교 :

짓다:

.jss94 {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
}

나타나게 하다:

.MuiTypography-headline-88 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1.35417em;
}

v2의 레이아웃 구성 요소에로드하는 scss를 재정의하는 머티리얼 UI가 있습니다. 개발 중에는 잘 병합하는 것 같지만 빌드에서는 무시하는 것 같습니다. 그게 원인 일 수 있습니까?

import '../scss/style.scss';

@ jonathan-chin v2에서 또는 위의 @DSchau 의 의견 에 언급 된 단계에 따라 이것을 시도 했습니까?

@kakadiadarpan 죄송합니다. 작업 흐름을 설정할 수있는 능력 (예 : 시간)이 없습니다.

PR 수정 사항을 살펴본 결과 제가 겪고있는 것과 동일한 문제인 것 같습니다. 지금은이 문제를 닫고 PR을 모니터링 할 수 있습니다.

@kakadiadarpan 죄송합니다, 방금 이상한 것을 깨달았습니다.

내 사이트가 처음로드 될 때 CSS가 이상합니다. 그러나 인덱스 페이지를 다시로드하도록 강제하면 CSS가 제대로로드됩니다. 재현하는 단계는 다음과 같습니다.

1) https://sharemeals.org/ 로드
아래에있는 에머슨 인용문을 살펴보십시오.

2) 왼쪽 상단 사이트 이름을 클릭하십시오. 사이트를 새로 고치지 않고 인덱스 페이지를 다시로드합니다. 에머슨 견적이 예상대로 나타납니다.

(에머슨 인용문은 다른 CSS 변경 사항을 나타냅니다. 가장 눈에 잘 띄기 때문에이 부분 만 표시합니다)

@ jonathan-chin 업데이트 해주셔서 감사합니다. 제공하신 단계로 문제를 재현 할 수 있습니다. https://sharemeals.org/에 Gatsby v1 또는 v2 를 사용하고 있습니까?

~이 똑같은 문제가 있습니다. ~

~ injectGlobal 사용할 때 gatsby build 실행 한 후 다른 스타일이 나타납니다. 여기에서 문제를 볼 수 있습니다 : https://ivorpad.com/about~

~ 페이지 로딩이 완료된 후 '쓰기'또는 '작업'링크를 가리키면 스타일이 변경되는 것을 볼 수 있습니다. ~

제목 스타일을 전역 대신 page.js 로 이동하여 문제를 해결했습니다.

 System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - ~/n/bin/node
    Yarn: 1.2.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/n/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 62.0.2
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.7 => 2.0.8
    gatsby-plugin-google-analytics: ^2.0.0-rc.2 => 2.0.0-rc.2
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0
    gatsby-plugin-typography: ^2.2.0 => 2.2.0
    gatsby-remark-prismjs: ^3.0.1 => 3.0.1
    gatsby-source-contentful: ^2.0.1-beta.15 => 2.0.1
    gatsby-transformer-remark: ^1.7.44 => 1.7.44

"gatsby": "^1.9.277" 사용하는 @kakadiadarpan

이것에 대한 수정은 # 8092라고 생각합니다.

@ jonathan-chin 수정 사항의 내용을 가져 와서 변경 사항을 시도해 볼 수 있습니까? 참고 : 아직 보지 못했다면 Gatsby 문서의 How to Contribute 섹션에 gatsby-dev-cli를 설정하는 방법에 대한 정보가 포함되어 있습니다.이를 테스트해야합니다!

@ jonathan-chin이 댓글에서 @DSchau 가 제공 한 제안을 시도해 볼 수 있습니까?

@kakadiadarpan 방금 이것을 구현하려고 시도한 것 같습니다. 나는 gatsby-cli-dev를 설치하고, 분기하고 당기고, 분기를 전환했습니다.

문제는 여전히 지속됩니다.

내가 가지고있는 새 node_modules / gatsby가 정확하고 이전 것이 아닌지 어떻게 다시 확인할 수 있습니까?

Gatsby 1.XX를 사용하고 제안 된 수정 사항없이 더 많은 조사를 수행했습니다.

(나는 Gatsby 2.XX로 업그레이드를 시도하고 별도로 제안 된 수정 사항을 시도했지만 작동하지 않았습니다)

원하는 스타일에 대한 jss 클래스가 초기 페이지로드에 존재합니다. 이 경우 .jss58입니다. 그러나 내가보고있는 요소는 초기로드에서 .jss58을 얻지 못합니다. 다른 페이지 요청을 한 후에 만 ​​(동일한 페이지를 요청하더라도) 요소가 올바르게 .jss58을 가져옵니다.

그렇다면 적용 할 jss 클래스를 결정하는 것은 무엇입니까? 초기로드에는 하나의 결과가 있지만 모든 후속 페이지 요청에는 다른로드가 발생하는 이유가 있습니까?

편집 : 다른 주요 문제가 있습니다. 프로덕션 빌드에서 내 svg 아이콘은 페이지 요청에 관계없이 완전히로드되지 않습니다.

이것이 내가 개발하는 대신 얻는 것입니다.

나는 같은 문제에 직면하고 있습니다. Gatsby 개발 및 Gatsby 빌드 버전은 저에게 매우 다릅니다.

직접 방문하거나 material-ui 구성 요소로 페이지를 새로 고치면 해당 구성 요소에 대한 CSS가 손상됩니다. 클래스는 소스에 있지만 요소에 적용되지 않습니다. 그러나 동일한 페이지로 <Link> 를 따라 가면 모든 것이 잘 작동합니다.

나는 또한 실행하면 나타났습니다 gatsby build 동안 gatsby develop 실행되면, 개발 개츠비 버전은 또한 개츠비 빌드 버전과 동일한 방식으로 행동하기 시작합니다.

System:
    OS: Linux 3.10 Red Hat Enterprise Linux Workstation 7.3 (Maipo)
    CPU: x64 Intel(R) Xeon(R) CPU E5-2620 v4 @ 2.10GHz
    Shell: 4.2.46 - /bin/bash
  Binaries:
    Node: 11.1.0 - /usr/bin/node
    Yarn: 1.12.1 - /usr/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
  npmPackages:
    gatsby: 2.0.37 => 2.0.37
    gatsby-cli: 2.4.4 => 2.4.4
    gatsby-plugin-typography: 2.2.1 => 2.2.1
    gatsby-source-atom: 0.1.0 => 0.1.0
    gatsby-source-ghost: 2.1.2 => 2.1.2
  npmGlobalPackages:
    gatsby-cli: 2.4.4

(저는 gatsby-plugin-offline을 사용한 적이 없습니다)

http://pawanhegde.netlify.com 에서 웹 사이트를 확인할 수 있습니다
소스는 https://gitlab.com/PawanH/pawanh.gitlab.io/tree/gatsbyjs에 있습니다.

"예상"버전을 보려면 하단 근처에있는 코믹하게 큰 아이콘을 클릭하십시오.

아직 # 8092에 대한 수정을 시도 할 시간이 없었습니다.

아직 # 8092에 대한 수정을 시도 할 시간이 없었습니다.

그것은 나를 위해 문제를 해결하지 못했습니다. 나는 여전히 같은 행동을 본다.

예상

실제

직접 방문하거나 페이지를 새로 고치면 CSS가 해당 구성 요소에 대해 손상됩니다. 클래스는 소스에 있지만 요소에 적용되지 않습니다. 그러나 동일한 페이지로 <Link> 를 따라 가면 모든 것이 잘 작동합니다.

이것은 또한 나에게 설명 된대로 정확히 발생합니다. https://github.com/gatsbyjs/gatsby/pull/8092 에서 수정을 시도했으며 대부분의 페이지에서 작동했지만 모든 페이지에서 작동하지는 않았습니다.

예상 :

실제 :

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.10.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 62.0.3
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.46 => 2.0.46 
    gatsby-image: ^2.0.20 => 2.0.20 
    gatsby-link: ^2.0.6 => 2.0.6 
    gatsby-plugin-catch-links: ^2.0.8 => 2.0.8 
    gatsby-plugin-flow: 1.0.2 => 1.0.2 
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.9 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1 
    gatsby-plugin-root-import: 2.0.4 => 2.0.4 
    gatsby-plugin-sass: ^2.0.4 => 2.0.4 
    gatsby-plugin-sharp: 2.0.12 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.2 
    gatsby-plugin-svgr: 2.0.0-alpha => 2.0.0-alpha 
    gatsby-remark-copy-linked-files: 2.0.6 => 2.0.6 
    gatsby-remark-images: 2.0.6 => 2.0.6 
    gatsby-remark-responsive-iframe: ^2.0.6 => 2.0.6 
    gatsby-remark-smartypants: 2.0.6 => 2.0.6 
    gatsby-source-filesystem: 2.0.8 => 2.0.8 
    gatsby-source-wordpress: 3.0.13 => 3.0.13 
    gatsby-transformer-remark: 2.1.12 => 2.1.12 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8 

다음을 수행하여이 문제를 해결했습니다.
내가 가진 index.js 파일에서

import 'injectSheet' from react-jss
import './../bootstrap.min.css'

순서를 반대로하여 html에서 CSS를 가져올 순서를 지정할 수있었습니다.
그래서 내 마지막 코드는

import './../bootstrap.min.css'
import 'injectSheet' from react-jss

솔루션 : 수입 순서 변경
이것은 나를 위해 문제를 해결했습니다. 바라건대 그것은 당신에게 똑같은 일을합니다.

나는 다른 많은 것들 중에서도 같은 문제가 있습니다.

• develop 는 비 결정적으로 실행되지만 실행되면 제대로 작동합니다.
• StaticQuery 비 결정적으로 이미지로드를 완료하지 못했습니다.
• build 는 비 결정적으로 실패하며 일반적으로 이미지에 오류가 있습니다.
• build 출력 다르다 크게와는 develop -이 거래 차단기이다.
• develop 와 build 가 서로 상호 작용하는 것 같습니다.

이러한 문제는 안타깝게도 Gatsby의 이점을 능가하는 것처럼 보이며 Create React App으로 다시 전환해야합니다.

모든 인라인 스타일을 제거하고 루트 수준이 아닌 자식 구성 요소에서 .scss를 가져 오는 것과 같은 다양한 해결 방법을 시도했습니다.
여전히 문제가 지속됩니다. 이것은 정말 골칫거리입니다

스타일 구성 요소를 사용하고 있으며 gatsby-config.js gatsby-plugin-styled-components 를 추가하면 효과가있었습니다.

같은 문제가 있습니다.
Gatsby 빌드는 다른 클래스 이름을 적용하지만 React inspector에서 적절한 클래스가 적용되는 것을 볼 수 있습니다.

System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.2/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 59.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.107 => 2.0.107
    gatsby-image: ^2.0.20 => 2.0.25
    gatsby-plugin-google-analytics: ^2.0.9 => 2.0.9
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12
    gatsby-plugin-offline: ^2.0.16 => 2.0.19
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.4
    gatsby-plugin-react-svg: ^2.0.0-beta1 => 2.0.0-beta1
    gatsby-plugin-sass: ^2.0.7 => 2.0.7
    gatsby-plugin-sharp: ^2.0.16 => 2.0.16
    gatsby-remark-copy-linked-files: ^2.0.8 => 2.0.8
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^3.0.1 => 3.0.1
    gatsby-source-filesystem: ^2.0.12 => 2.0.12
    gatsby-transformer-remark: ^2.1.15 => 2.1.15
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9
  npmGlobalPackages:
    gatsby-cli: 2.4.6

히야!

이 문제는 조용해졌습니다. 무시 무시한 조용함. 👻

많은 문제가 발생하므로 현재 30 일 동안 활동이 없으면 문제를 해결합니다. 여기서 마지막으로 업데이트 한 지 20 일이 지났습니다.

이 문제를 놓쳤거나 계속 열려고 싶다면 여기에서 답장 해주세요. 이 문제를 계속 열어두기 위해 "부실하지 않음"이라는 레이블을 추가 할 수도 있습니다.

Gatsby 커뮤니티의 일원이되어 주셔서 감사합니다! 💪💜

열어주세요.

여전히 문제가 해결되지 않았습니다. 잠시만 열어주세요

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.10.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.119
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.35 => 2.1.4 
    gatsby-cli: ^2.4.10 => 2.4.10 
    gatsby-image: ^2.0.19 => 2.0.29 
    gatsby-plugin-emotion: ^4.0.3 => 4.0.3 
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.14 
    gatsby-plugin-manifest: ^2.0.7 => 2.0.17 
    gatsby-plugin-netlify: ^2.0.3 => 2.0.11 
    gatsby-plugin-netlify-cms: ^3.0.12 => 3.0.12 
    gatsby-plugin-offline: ^2.0.10 => 2.0.23 
    gatsby-plugin-purgecss: ^3.1.0 => 3.1.0 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.6 
    gatsby-plugin-sass: ^2.0.7 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.10 => 2.0.20 
    gatsby-plugin-typography: ^2.2.2 => 2.2.7 
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.9 
    gatsby-remark-images: ^3.0.1 => 3.0.4 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1 
    gatsby-source-filesystem: ^2.0.12 => 2.0.20 
    gatsby-transformer-remark: ^2.1.17 => 2.2.5 
    gatsby-transformer-sharp: ^2.1.7 => 2.1.13 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

여전히 문제가 해결되지 않았습니다. 잠시만 열어주세요

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7287U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.10.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.119
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.35 => 2.1.4 
    gatsby-cli: ^2.4.10 => 2.4.10 
    gatsby-image: ^2.0.19 => 2.0.29 
    gatsby-plugin-emotion: ^4.0.3 => 4.0.3 
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.14 
    gatsby-plugin-manifest: ^2.0.7 => 2.0.17 
    gatsby-plugin-netlify: ^2.0.3 => 2.0.11 
    gatsby-plugin-netlify-cms: ^3.0.12 => 3.0.12 
    gatsby-plugin-offline: ^2.0.10 => 2.0.23 
    gatsby-plugin-purgecss: ^3.1.0 => 3.1.0 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.6 
    gatsby-plugin-sass: ^2.0.7 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.10 => 2.0.20 
    gatsby-plugin-typography: ^2.2.2 => 2.2.7 
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.9 
    gatsby-remark-images: ^3.0.1 => 3.0.4 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1 
    gatsby-source-filesystem: ^2.0.12 => 2.0.20 
    gatsby-transformer-remark: ^2.1.17 => 2.2.5 
    gatsby-transformer-sharp: ^2.1.7 => 2.1.13 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

https://github.com/gatsbyjs/gatsby/issues/11072에 언급 된대로 문제는 7058a256d2dcfab91259bdf00e811375737414e7에서 해결되어야합니다.

내 특정 사용 사례에서만 @emotion/global 가 응용 프로그램에 전역 스타일을 삽입하는 데 사용되었습니다. 어떻게 든 코드 분할 문제는 @emotion/global 기능과 함께 계속 지속되었습니다.

해결 방법 수정

문제를 해결하기 위해 다음 단계를 수행했습니다. 완벽한 솔루션은 아니지만이 설정에서 작동했습니다.

1. 최신 Gatsby 빌드로 업데이트 ^2.1.8
2. import { Global, css } from '@emotion/core' 사용 위치를 확인하고 CSS 스타일을 새 파일로 이동 ./styles/global.css
3. 프로젝트 루트에 gatsby-brower.js 를 추가하여 프로덕션 빌드에 스타일 시트 포함

// gatsby-brower.js

import './src/styles/globals.css'

1. 오래된 캐시 정리 및 rm -rf .cache && rm -rf public 빌드 폴더
2. gatsby build -> gatsby serve
3. Voilá 💁‍♂️

메모

• 위의 많은 문제가 https://github.com/gatsbyjs/gatsby/issues/11072에 언급 된 (글로벌) 스타일 VS CSS 코드 분할 문제를 삽입하는 드문 방법으로 인해 발생한다고 생각합니다.
• 아마도 위의 솔루션 해결 방법은 특정 사용 사례 수정일 것입니다.
• Gatsby의 스타일링에 대한이 튜토리얼을 통해이 문제를 해결했습니다

이것은 실망스러운 문제입니다.

나에게 react-pose 애니메이션, 즉 gatsby-browser.js 및 gatsby-ssr.js 에서 수행 된 애니메이션은 이상한 부두 작업, 이중 렌더링 및 페이지가 두 번째 새로 고침에서 작동하는 일부 비 결정적 CSS 작업을 수행했습니다.

나는 여전히 정확한 문제를 지적 할 수 없지만 검사하고 결국 플러그인을 제거하고 라이브러리를 제거하고 _solved_ it.

Gatsby는 다른 JS 도구와 함께 멋지고 화려할 수 있지만 프로덕션에서 사용하지 않도록주의하고 책임을 져야합니다.

새로운 복제물을 공유 할 수 있습니까? css-in-js를 사용할 때 그것은 우리의 잘못이 아니기 때문에 우리가 고칠 수없는 것이기 때문입니다.

이 문제도 발생했습니다.

며칠 전에 typography.js 했습니다. 그런 다음 typography.js 기반 스타일이 gatsby develop 에서는 잘 작동하지만 gatsby build 에서는 사용할 수 없다는 것을 깨달았습니다. 시작 템플릿에서 앱을 만들었습니다.

버전을 업그레이드하려고했는데 작동하지 않습니다.
그런 다음 layout.css

내 해결책은 layout.css 에 댓글을 달고이 문제를 해결하는 것 같습니다.

typography.js 추가 후 프로젝트
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/ffb52973c21014b247a808e444319f8eede6eee6

layout.css 주석 처리 후 프로젝트
https://github.com/Jasonlhy/Gatsbyjs-Blog/tree/658c7f8976d8d84a1fd28cb9aa6c99bbce2be9b3

@Jasonlhy 이것은 나에게 정확히 문제였습니다. 내 구성 요소 폴더의 layout.js 파일이 layout.css 파일을 가져오고 있습니다. 가져 오기를 제거하고 npm run build 및 npm run serve 다시 실행하면 사이트가 정상적으로 표시되었습니다. 정말 고맙습니다!

새로운 복제물을 공유 할 수 있습니까? css-in-js를 사용할 때 그것은 우리의 잘못이 아니기 때문에 우리가 고칠 수없는 것이기 때문입니다.

안녕하세요 @wardpeet , 이것은 내가 gatsby-plugin-styled-components를 추가했을 때 내 프로젝트에서 방금 나타 났으므로 업데이트 된 Gatsby에서 계속 발생하는 문제의 새로운 재현이 있습니다.

편집 : 내 스타일을 편집 할 때 문제가 계속 바뀌기 때문에 더 이상 복제품이 없다는 것이 밝혀졌습니다. 다음 커밋을 배포 한 후 가져 오기 순서가 다시 변경되었습니다. 내 CSS는 이제 dev와 prod에서 동일합니다. 첨부 된 스크린 샷과 설명은 이전에 무슨 일이 있었는지 보여줍니다.

기술

개츠비는 개발과 생산에서 <head> 다르게 주문합니다. 전역 CSS와 함께 gatsby-plugin-styled-components를 사용할 때 이로 인해 dev와 prod간에 CSS로드 순서가 달라 예기치 않은 시각적 버그가 발생할 수 있습니다.

이것은 # 9733에 찬성하여 여러 유사한 문제와 함께 종료 된 # 9908과 동일하며, @KyleAMathews 에 따라 # 11800에서 수정 되었기 때문에 종료되었습니다. 그러나 Gatsby가 업데이트되었는지 확인한 후에도 # 9908의 동작이 표시됩니다.

재현 단계

이 repo : https://github.com/vivshaw/vivshaw의 문제에 대한 실제 (하지만 최소한의) 예제가 있습니다. 이 사이트에는 Bulma CSS 프레임 워크를 포함한 전역 CSS 덩어리가 있으며 나머지 사이트는 스타일 구성 요소에서 수행됩니다. 프로덕션 버전은 netlify에 있습니다.

예상 결과

gatsby develop 및 gatsby build gatsby serve 모두 동일하게 표시되어야합니다. 스타일로드 순서는 일관성이 있어야합니다.

실제 결과

프로덕션 용으로 빌드되면 올바른 페이지 스타일이 표시됩니다.

그러나 gatsby develop 로드하면 인트로 섹션의 패딩이 AWOL이됩니다.

나는 약간을 파고 그 이유를 알아 냈다. 프로덕션에서 Gatsby는 여기에 강조 표시된 두 줄에서 볼 수 있듯이 스타일 구성 요소 스타일 이전에 전역 CSS 청크를로드합니다.

그러나 개발에서는 스타일 구성 요소 스타일이 먼저로드됩니다.

이로 인해 버그가 발생하는 이유는 무엇입니까? 글쎄, 나는 Bulma 클래스와 스타일 구성 요소 생성 클래스로 태그가 지정된 구성 요소가 있습니다. 두 클래스 모두 패딩 속성에 영향을 미치므로 마지막으로로드되는 클래스가 적용되는 클래스입니다. 이 경우 Bulma 클래스를 제거하기 만하면 쉽게 해결할 수 있습니다. 그러나이로드 순서 동작으로 인해 더 복잡한 문제가 발생하는 상황을 상상할 수 있습니다.

환경

> gatsby info

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-2520M CPU @ 2.50GHz
  Binaries:
    Yarn: yarn install v0.27.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 118.04s. - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.4.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.13 - /c/Python27/python
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.3.16 => 2.3.16
    gatsby-image: ^2.0.37 => 2.0.37
    gatsby-plugin-eslint: ^2.0.4 => 2.0.4
    gatsby-plugin-layout: ^1.0.14 => 1.0.14
    gatsby-plugin-manifest: ^2.0.28 => 2.0.28
    gatsby-plugin-netlify: ^2.0.13 => 2.0.13
    gatsby-plugin-netlify-cms: ^3.0.17 => 3.0.17
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-purgecss: ^3.1.1 => 3.1.1
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-robots-txt: ^1.4.0 => 1.4.0
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.0.32 => 2.0.32
    gatsby-plugin-sitemap: ^2.0.12 => 2.0.12
    gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
    gatsby-plugin-webpack-size: 0.0.3 => 0.0.3
    gatsby-source-filesystem: ^2.0.29 => 2.0.29
    gatsby-transformer-remark: ^2.3.8 => 2.3.8
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17

감사합니다.이 문제를 어떻게 해결할 수 있는지 확실하지 않은 경우 헤드 구성 요소에 일종의 정렬을 추가 할 수 있습니다.

@topherauyeung이 위에서 언급 한 것과 동일한 종류의 문제가 표시됨

환경

gatsby info

  System:
    OS: macOS High Sierra 10.13.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.7.0 - /usr/local/bin/node
    Yarn: 1.15.2 - ~/.yarn/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 66.0.2
    Safari: 11.1
  npmPackages:
    gatsby: ^2.3.24 => 2.3.27
    gatsby-image: ^2.0.39 => 2.0.40
    gatsby-plugin-manifest: ^2.0.29 => 2.0.29
    gatsby-plugin-material-ui: ^1.2.4 => 1.2.4
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sharp: ^2.0.35 => 2.0.35
    gatsby-plugin-typography: ^2.2.13 => 2.2.13
    gatsby-source-filesystem: ^2.0.29 => 2.0.31
    gatsby-transformer-sharp: ^2.1.18 => 2.1.18
  npmGlobalPackages:
    gatsby-cli: 2.5.4

이 문제도 있습니다. NPM 라이브러리에서 구성 요소를 가져 오는 gatsby repo가 ​​있습니다. 구성 요소는 빌드시 잘못된 순서로 <head> 에 삽입되는 .scss 파일을 가져옵니다. 개발시 개츠비 리포지토리의 스타일이 마지막에 나오므로 우선권을 가지지 만 빌드시에는 먼저 가져 와서 가져온 구성 요소의 스타일로 재정의됩니다.

비슷한 문제가있을 수 있습니다. 스타일을 다이내믹하게로드합니다.

componentDidMount() { require("./source.less") }

이 문제도 발견했습니다. 하지만 제 경우는 단순한 실수였습니다.
나는 사용하고 있었다

<Button href="/path/to/page">blah blah</Button>

Gatsby Link를 사용하도록 변경하면 작동합니다.

<Link to="/path/to/page">
  <Button>blah blah</Button>
</Link>

같은 문제입니다. 디버깅을 시도하는 동안 솔루션을 주시합니다.

관련이 있다고 생각하기 때문에 추가했지만 최근에만 문제가되었습니다.
저는 Typography.js와 Bootstrap을 사용하고 있습니다. 프로덕션에서 부트 스트랩은 내가 원하는 typography.js에 의해 무시되지만 dev 서버에서는 Bootstrap 글꼴 스타일이 내 타이포그래피 스타일을 재정의합니다. 사이트가 실제로 어떻게 생겼는지 확인하기 위해 사이트를 배포해야하기 때문에 이것은 매우 화가납니다. 누구든지 내가 gatsby에서 typography.js로 부트 스트랩을 어떻게 덮어 쓸 수 있는지 알고 있다면 정말 감사하겠습니다.

관련이 있다고 생각하기 때문에 추가했지만 최근에만 문제가되었습니다.
저는 Typography.js와 Bootstrap을 사용하고 있습니다. 프로덕션에서 부트 스트랩은 내가 원하는 typography.js에 의해 무시되지만 dev 서버에서는 Bootstrap 글꼴 스타일이 내 타이포그래피 스타일을 재정의합니다. 사이트가 실제로 어떻게 생겼는지 확인하기 위해 사이트를 배포해야하기 때문에 이것은 매우 화가납니다. 누구든지 내가 gatsby에서 typography.js로 부트 스트랩을 어떻게 덮어 쓸 수 있는지 알고 있다면 정말 감사하겠습니다.

내가 원하는대로 부트 스트랩을 다시 빌드하여이 문제를 해결했습니다.

여기에 같은 문제-https: //github.com/gatsbyjs/gatsby/issues/16075

여기에 설명 된 것과 유사한 문제가 발생합니다. CSS 프레임 워크 (모든 사용자 지정 .sass)를 사용하지 않지만 일부 스타일, 요소 및 클래스는 gatsby develop 및 gatsby build 간에 다르게 처리됩니다.

이것은 URLSearchParams(window.location.search) 사용하여 검색 매개 변수를 확인하는 페이지에서 발생합니다. 이를 통해 매개 변수의 존재 여부에 따라 동적으로 요소를 표시합니다. develop 의 URL로 직접 이동하면 모든 것이 제대로 작동합니다. build 에서는 모든 것이 다소 다르게 처리됩니다.

예상 ( develop ) :

실제 ( build ) :

조건부 논리 :

{(!!params ? !params.has('signup') : true) && (
    <div className={[ styles.form__element, styles.contact__message, ].join( ' ')}>
        <label htmlFor="message">
            Message
            <textarea required minLength="10" name="message" id="message" cols="30" rows="10" className={styles.form__control} placeholder="Questions, comments, etc..." />
        </label>
    </div>
)}

params 설정 :

const params = typeof window !== `undefined` ? new URLSearchParams(window.location.search) : ''

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    npm: 6.10.2 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.50 => 2.13.50
    gatsby-image: ^2.2.8 => 2.2.8
    gatsby-plugin-google-analytics: ^2.1.6 => 2.1.6
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.2.4 => 2.2.4
    gatsby-plugin-offline: ^2.2.4 => 2.2.4
    gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3
    gatsby-plugin-sass: ^2.1.4 => 2.1.4
    gatsby-plugin-sharp: ^2.2.9 => 2.2.9
    gatsby-plugin-sitemap: ^2.2.5 => 2.2.5
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-source-contentful: ^2.1.17 => 2.1.17
    gatsby-source-filesystem: ^2.1.8 => 2.1.8
    gatsby-transformer-remark: ^2.6.10 => 2.6.10
    gatsby-transformer-sharp: ^2.2.5 => 2.2.5
  npmGlobalPackages:
    gatsby-cli: 2.7.27

@ j-651 같은 문제가있는 것 같습니다. 로컬 저장소에서 데이터를 읽고 조건부로 클래스 이름을 렌더링하면 잘못된 클래스 이름이 렌더링됩니다. 해결 방법이 있습니까?

@OrKoN 이 문제를 해결하기 위해 내가 한 일은 원본 조각을 구성 요소로 사용하여 별도의 페이지를 만든 다음 조건부 렌더링을 위해 소품을 전달하는 것이 었습니다. 이것이 구현에서 작동하는지 확실하지 않습니다.

비슷한 문제가 있습니다. 첫째, 스타일이 지정된 구성 요소 때문에 다른 버전을 사용했습니다. 나는 gatsby-plugin-styled-components 플러그인을 추가했고 그것들은 스스로 수정되었습니다. 그런 다음 MaterialUI가 중단되기 시작하여 gatsby-plugin-material-ui 를 추가했지만 여전히 운이 없습니다. 재료 UI는 배포시 여전히 손상됩니다.

생산:

Dev (로컬)

내 문제를 재현하고 리포지토리 https://github.com/gatsbyjs/gatsby/issues/16925 에서 분리 할 수있었습니다. 링크 구성 요소의 동작과 관련이 있으며 아마도 다른 문제 일 수 있습니다.

이것은 적절한 해결책은 아니지만 프로젝트를 시작하기 위해 함께 가야하는 빠른 수정으로 차임하고 싶었습니다.

typography.js의 출력을 복사하여 붙여넣고 .scss 파일에 넣은 다음 나중에 약간의 메시지와 함께 다른 모든 항목을 가져 왔습니다.

typographyjs-output.scss
이 파일을 무시하고 감사합니다!
typography.js에서 생성 된 CSS를 추출하여 여기에 배치해야했습니다.
왜? 여기를 참조하십시오 : https://github.com/gatsbyjs/gatsby/issues/8560
프로덕션 빌드는 dev와 다른 순서로 SCSS 및 css-in-js를 가져옵니다 (항상 일관된 순서인지 확실하지 않음).
'gatsby-plugin-typography'를 제거하고 일반 ol '스타일 시트처럼 생성 된 CSS를 가져 왔습니다.
Typography.js는 처음부터 프로젝트에 포함되었으며 문제가 발생할 것으로 예상하지 못했습니다.
예-이 기본값이 포함 된 나머지 사이트의 스타일을 지정 했으므로이 파일을 제거하면 상황이 좀 이상해 보입니다.

꽤 끔찍한 해결책이지만 당신이 묶여 있다면 작동합니다.

방금 깨달은 것은 초기 페이지로드시 CSS가 깨졌지만 페이지를 변경 한 다음 다시 홈 페이지로 돌아 가면 CSS가 작동한다는 것입니다. CSS가 제대로 보이지 않고 매우 느리게로드되는 것은 초기 페이지로드에서만 발생합니다.

Material-UI를 사용하여 gatsby.config.js에서 gatsby-plugin-material-ui를 두 번 호출했습니다. 초기 페이지로드에 깜박임이 있었고 일부 스타일이 가끔 추가되지 않았습니다. 이제 최신 플러그인 버전과 함께 작동하며이 모듈은 gatsby.config.js의 플러그인 배열에서 내 보냅니다.
, { resolve: 'gatsby-plugin-material-ui', // If you want to use styled components you should change the injection order. options: { // stylesProvider: { // injectFirst: true, // }, }, }

여기에서 해결책을 찾은 사람이 있습니까? 로컬은 괜찮지 만 프로덕션 (첫 페이지보기)에서 잘못된 스타일이 표시됩니다. 예 : 구성 요소에는 프로덕션시 jss13 및 jss14가 있지만 해당 클래스는 jss43 및 jss45 여야합니다. 나는 또한 머리의 스타일 순서가 다른 것을보고 있지만 해결 방법에 관해서는 잃어 버렸습니다 ... 두 플러그인도 포함되어 있지만 운이 없습니다.

plugins: [
    'gatsby-plugin-styled-components',
    'gatsby-plugin-material-ui',
];

@ocundale 저에게 수정은 material-ui 스타일링 방법을 제거하는 것이 었습니다. 예를 들어 다음 코드는 프로덕션으로 푸시 할 때 문제를 일으킬 수 있습니다. 이유는 모르겠지만 일단 이것을 제거하고이 스타일을 인라인 CSS로 넣으면 모든 것이 의도 한대로 작동했습니다.

const MyTab = styled(Tab)({
  border: '1px solid grey',
  borderRadius: '50px',
  fontSize: '12px',
  marginRight: '16px'
})

수행하여 수정

<Tab style={{
 border: '1px solid grey',
  borderRadius: '50px',
  fontSize: '12px',
  marginRight: '16px'
}}>
...
</Tab>

좋아, 감사합니다 @ Skillz4Killz , 빠른 응답에 감사 드리며, 부끄러운 것 같지만 그때는 동일한 방법을 사용하는 것으로 생각합니다. 건배!

이것은 적절한 해결책은 아니지만 프로젝트를 시작하기 위해 함께 가야하는 빠른 수정으로 차임하고 싶었습니다.

내 임시 수정은 내 CSS의 모든 줄에 !important 을 추가하여 템플릿 CSS에 의해 재정의되지 않았습니다. 잔인하다.

@ gatsbyjs / core이 문제는이 저장소 전체에서 여러 번 다른 변형으로 나타나는 것처럼 보입니다. # 3741 # 5100 # 9911 # 10370 # 12360 # 14601 # 17676 # 17728 (더 많은 것이있을 거라 확신합니다.

이것은 명확한 해결 방법이없고 사이트에 비 결정적으로 영향을 미치고 매우 간접적 인 부작용이 있기 때문에 종종 "신비한 방식"으로 나타나기 때문에 심각한 문제입니다. 동일한 HTML 요소 (특히 class 속성을 변경하는 것은 _ 매우 _ 일반적인 사용 사례입니다.

# 14601에서 말한 내용이 맞다면 React 16에 도입 된 수화 기능 통합 문제입니다.

개발 모드에서이 문제를 더 일찍 발견하는 데 도움이되는 # 10706이 있지만 내가 이해하는 한 수정하지는 않습니다.

이것을 경험하는 다른 사람에게는 인라인 CSS / 중요한 것을 사용하지 않고 수정할 수있었습니다.
계획된 접근 방식이 아니고 실제로 운이 좋았지 만 Material-UI를 버전> 4로 업그레이드하는 것과 함께 _gatsby-plugin-material-ui_ 및 _gatsby-plugin-styled-components_ 플러그인을 추가했으며 더 이상 문제가 보이지 않습니다.

{
  resolve: 'gatsby-plugin-material-ui',
  options: {
    stylesProvider: {
      injectFirst: true,
    },
  },
},
'gatsby-plugin-styled-components',

"@material-ui/core": "^4.0.0",
"@material-ui/icons": "^4.0.0",
"@material-ui/styles": "^4.4.1",

나는 문제를 재현 할 수 있습니다.

이 저장소에서 처음 에 기본 스타터 에서 복제 된 새 gatsby 사이트를 만듭니다 : https://github.com/eyalroth/gatsby-hydrate-bug

종속성 / 플러그인이 거의 없습니다.

$ gatsby info
  System:
    OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (4) x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/n/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.11.3 - ~/n/bin/npm
  Languages:
    Python: 2.7.12 - /usr/bin/python
  npmPackages:
    gatsby: ^2.15.22 => 2.15.22
    gatsby-plugin-offline: ^3.0.8 => 3.0.8
  npmGlobalPackages:
    gatsby-cli: 2.7.44

사이트에는 2 페이지와 레이아웃이 있습니다. 레이아웃은 wrapPageElement 를 통해 2 페이지에 자동으로 추가됩니다 ( gatsby-plugin-layout 에서와 거의 동일한 코드). 레이아웃은 현재 시간으로 설정된 class 속성이있는 div 페이지 콘텐츠를 래핑하는 동시에 페이지 콘텐츠 아래에 텍스트로 시간을 추가합니다.

사이트를 구축 (및 제공)하고 색인으로 이동하여 개발자 도구에서 검사하면 페이지에 표시된 시간이 div class 와 동일하지 않음을 알 수 있습니다. 속성:

두 번째 페이지로 이동하면이 동작이 수정되고 페이지 콘텐츠와 class 속성 사이의 시간이 동일하다는 것을 알 수 있습니다.

동일한 창에서 페이지 사이를 계속 탐색하는 한 유지됩니다. 페이지를 새로 고치거나 창에서 열면 불일치가 다시 나타납니다. 실제로 class 속성의 시간은 새로 고침 할 때마다 동일하게 유지됩니다 (캐시됨을 암시). "강제 새로 고침"(CTRL + F5)은 페이지를 제대로로드합니다.

이 문제의 특정 인스턴스는 gatsby-plugin-offline 활성화 된 경우에만 발생하며 gatsby-plugin-layout 및 wrapPageElement 의 다른 구현에 직접적인 영향을줍니다.

내가 지금까지 생각 해낸 유일한 해결 방법 은 hydrate 함수를 render로 바꾸는 것입니다 .

// gatsby-browser.js
const ReactDOM = require('react-dom')

export function replaceHydrateFunction() {
    return (element, container, callback) => {
        ReactDOM.render(element, container, callback)
    }
}

다시 말하지만, 이것은 https://github.com/facebook/react/issues/10591 , https://github.com/ 과 같은 React 저장소의 여러 문제에서 논의 된 바와 같이 수화물 방법의 조정 문제입니다. facebook / react / issues / 12713 , https://github.com/facebook/react/issues/13260.

"수화"의 전체 목적은 일반 렌더링보다 성능을 높이는 것이므로 성능이 저하 될 수 있습니다.

이 문제를 해결하기 위해 https://github.com/gatsbyjs/gatsby/issues/17914 에 찬성합니다.

@eyalroth 저는 이것이 우리가 해결해야 할 문제라는 데 동의합니다. https://github.com/gatsbyjs/gatsby/issues/17914 에서 이에 대해 논의하고 이것의 하단에 도달합시다

나는 또한이 문제가 있습니다. Gatsby 개발 환경은 괜찮 았지만 문제 페이지를 다시로드 할 때 빌드되었습니다. className 및 심지어 인라인 스타일이 특정 태그에서 제거되었습니다. 속성이없는 div가 남았지 만 모든 어린이가 렌더링되었습니다.

그러나 전체 페이지 새로 고침이 아닌 개츠비 링크 라우터를 사용하여 경로를 변경했을 때. 문제를 해결합니다.

이것은 나를 몇 시간 동안 미치게 만들었다. 나는 끔찍한 해결책을 찾았지만 아마도 좋은 방법은 아니지만 지금은 작동했습니다.

하지만 (div) 태그를 (article)로 변경했습니다.

갑자기

<div>

되었다

<article class="CartSummary-module--summary--3zJVn">

빌드시

그것은 또한 ul 및 pre와 함께 작동했습니다.

@ stefantrinh1 미친 해결 방법에 감사드립니다- 저도이 미친 CSS 동작을 경험하고

누군가 복제 된 것을보고 싶다면 공개 저장소가 있고 두 버전을 모두 배포했습니다.

@ stefantrinh1 의 article 해결 방법으로 작동하는 것 같습니다.
https://github.com/funkfinger/blog/tree/good
https://good.jaywiggins.com

작동하지 않는다
https://github.com/funkfinger/blog/tree/bad
https://bad.jaywiggins.com

조건부로 쿠키 값을 기반으로 구성 요소를로드하는 동안 비슷한 문제가 발생했습니다. 물론 이것은 프로덕션에 SSR이 있으므로 작동하지 않았습니다 (왜 개발 모드에서 작동하는지 확실하지 않음). 어쨌든, 내가 한 일은 useEffect 안에 수표를 래핑하고 React가 클라이언트를 인수 (재수 화)하면 렌더링 할 구성 요소를 확인하는 것입니다. 클래스 구성 요소에 componentDidMount() 를 사용할 수 있습니다. 이것을 구현하면 모든 것이 예상대로 작동합니다.

내 문제는 gatsby-browser.js 에서는 wrapPageElement 및 wrapRootElement 를 사용했지만 gatsby-ssr.js 에서는 사용하지 않았다는 것입니다. 내가 가지고있는 것을 gatsby-ssr.js 복사하자 예상대로 작동하기 시작했습니다. @jlkiri 의 응답을 참조하십시오 : https://github.com/gatsbyjs/gatsby/issues/22113#issuecomment -597432337

2020 년 같은 호. 클릭 문제를 해결하지만 전체 재 장전 문제가 있습니다.
"gatsby": "^ 2.19.45",
"react-custom-scrollbars": "^ 4.2.1",

나는 emailnikola와 같은 문제가있다

25729

제 경우에는 gatsby-plugin-minify 이이 문제를 일으켜 프로덕션 빌드가 프로덕션 빌드의 모든 스타일을 다시로드하도록했습니다.