Gatsby: 오류 / 페이지 리소스를 찾을 수 없습니다. React를 렌더링하지 않음

히야!

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

많은 문제가 발생하므로 현재 30 일 동안 활동이 없으면 문제를 해결합니다. 여기서 마지막으로 업데이트 한 지 20 일이 지났습니다.
이 문제를 놓쳤거나 계속 열려고 싶다면 여기에서 답장 해주세요. 이 문제를 계속 열어두기 위해 "부실하지 않음"이라는 레이블을 추가 할 수도 있습니다.
이 문제 나 다른 문제를 해결하는 가장 좋은 방법은 Pull Request를 여는 것입니다. PR 열기, 문제 분류 및 기여에 대한 자세한 정보는 gatsby.dev/contribute 를 확인하십시오!

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

@antoinerousseau 가 더 나은 스택

앞으로 나아가는 가장 좋은 방법은 무엇이라고 생각하십니까? 모바일 사파리 / 사파리에서 직접 사용해 보셨습니까?

@wardpeet 이것을 조사해 주셔서 감사합니다.
Safari 데스크탑으로 시도했지만 재현 할 수 없습니다. 저는 iPhone을 가지고 있지 않습니다.
때때로 무작위로 발생하기 때문에 진행 방법을 잘 모르겠지만 더 나은 스택 추적은 어쨌든 해를 끼칠 수 없습니다.
85 %의 모바일 사파리, 10 %의 사파리, 5 %의 크롬 모바일 iOS에서 124 번만 발생했습니다. 다양한 버전.
또한 URL이 항상 / 것은 아닙니다. 원하는 경우 Bugsnag 계정에 대한 액세스 권한을 제공 할 수 있습니다.

오늘도 같은 버그 보고서를 받았습니다. 당신이 혼자가 아니라는 것을 알리기 위해서입니다.

히야!

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

많은 문제가 발생하므로 현재 30 일 동안 활동이 없으면 문제를 해결합니다. 여기서 마지막으로 업데이트 한 지 20 일이 지났습니다.
이 문제를 놓쳤거나 계속 열려고 싶다면 여기에서 답장 해주세요. 이 문제를 계속 열어두기 위해 "부실하지 않음"이라는 레이블을 추가 할 수도 있습니다.
이 문제 나 다른 문제를 해결하는 가장 좋은 방법은 Pull Request를 여는 것입니다. PR 열기, 문제 분류 및 기여에 대한 자세한 정보는 gatsby.dev/contribute 를 확인하십시오!

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

또 안녕!

이 문제에 대해 무슨 일이 일어난 지 30 일이 지났으므로 우리의 친절한 이웃 로봇 (나야!)이 문을 닫을 것입니다.
저는 로봇 일 뿐이므로이 문제를 실수로 종료했다면 HUMAN_EMOTION_SORRY 입니다. 이 문제를 다시 열거 나 다른 것이 필요하면 새 문제를 만드십시오.
이 문제 나 다른 문제를 해결하는 가장 좋은 방법은 Pull Request를 여는 것입니다. PR 열기, 문제 분류 및 기여에 대한 자세한 정보는 gatsby.dev/contribute 를 확인하십시오!

Gatsby 커뮤니티에 참여해 주셔서 다시 한 번 감사드립니다! 💪💜

같은 것을 본다.

• 합리적으로 자주 발생합니다 (매일보고 있습니다).
• 거의 모든 모바일 사파리 또는 사파리.
• 거의 항상 / 이지만 다른 페이지는 거의 없습니다.
• Sentry는 Bugsnag와 동일한 스택 트레이스를 다음과 같은 탐색 경로로 제공합니다.
  

여기도 마찬가지입니다. / index 이외의 페이지의 경우.

장치
브랜드 | 화웨이
가족 | DRA-LX5

OS
이름 | 기계적 인조 인간
버전 | 8.1.0

브라우저
이름 | Chrome 모바일 WebView
버전 | 70.0.3538

SDK
이름 | sentry.javascript.browser
버전 | 5.12.1

히야!

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

많은 문제가 발생하므로 현재 30 일 동안 활동이 없으면 문제를 해결합니다. 여기서 마지막으로 업데이트 한 지 20 일이 지났습니다.
이 문제를 놓쳤거나 계속 열려고 싶다면 여기에서 답장 해주세요. 이 문제를 계속 열어두기 위해 "부실하지 않음"이라는 레이블을 추가 할 수도 있습니다.
이 문제 나 다른 문제를 해결하는 가장 좋은 방법은 Pull Request를 여는 것입니다. PR 열기, 문제 분류 및 기여에 대한 자세한 정보는 gatsby.dev/contribute 를 확인하십시오!

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

여전히 문제입니다.

이 문제도 받고 있습니다. gatsby develop 은 (는) 제대로 작동하지만 gatsby build 인해 응용 프로그램이 "오류 : 페이지 리소스에 대한 / 찾을 수 없음. 반응을 렌더링하지 않음"과 함께 중단됩니다. 빌드 자체가 성공하더라도 런타임에.

Typescript를 사용하고 있다는 사실 때문일까요?

gatsby clean 실행을 시도했습니다

업데이트 / 가능한 해결책 : ".env.production"파일이 아닌 ".env.development"파일 만 있었기 때문에 오류가 발생했습니다. 왜 이것이 모호하고 혼란스러운 오류를 일으키고 React가 렌더링하지 못하게했는지 모르겠습니다. 예상되는 동작이 gatsby develop 실행할 때 발생하는 동작과 동일한 동작이라고 생각합니다. gatsby develop 실행하고 .env.development 파일이 없으면 React는 여전히 렌더링되지만 중요한 값이 누락되어 내 앱이 충돌합니다.

나는 같은 문제가 있습니다. 내 앱은 AWS에서 호스팅되고 Cloudfront를 사용합니다. 존재하지 않는 모든 URL을 상태가 200 인 404.html 페이지로 리디렉션하는 정책이 있습니다. 이상하게 보이지만 우리 기능 중 하나에 정말 중요합니다. 따라서 my-test-site.com/some-not-existed-page window.pagePath 것을 입력하면 /404.html 이되지만 publicLoader.loadPage somewhy는 404.html 아닌로드하려고합니다. 페이지 콘텐츠이지만 /my-test-site.com/some-not-existed-page . 실제로 window.location.pathname 하지만 window.pagePath 는 사용하지 않습니다.

오늘 Sentry에서 동일한 오류 메시지를 받았습니다. 찾을 수 없습니다. React를 렌더링하지 않음

이 문제도 발생했습니다. 저에게는 pages/index.js 파일에서 자신의 구성 요소에 대해 명명 된 가져 오기를 사용할 때 재현 가능했습니다.

예
import Layout from "../components/Layout"; ✅
import { Layout } from "../components"; 🚫

components/index.js 는 다음과 같습니다.

import Layout from "./Layout"

export {
  Layout
};

이것은 MacOS catelina & chrome 버전 80.0.3987.149입니다.
"gatsby": "^2.20.13",

주목할 점은 내가 expo gatsby 변형을 사용하고 있다는 것입니다.

깨끗한 gatsby build 실행할 때도이 문제가 발생했으며 근본 원인은 acorn 패키지 취약점에 대한 내 package.json의 해결 방법이었습니다 (https://snyk.io/vuln/npm 참조). :도토리):

"resolutions": {
   "acorn": "^7.1.1"
}

이 해결 방법을 제거하면 문제가 해결되었습니다.

gatsby info 출력 :

  System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 81.0.4044.92
    Safari: 13.1
  npmPackages:
    gatsby: 2.20.20 => 2.20.20 
    gatsby-plugin-material-ui: 2.1.6 => 2.1.6 
    gatsby-source-graphql: 2.4.0 => 2.4.0 

여전히 많이 발생합니다 (지난 주 동안 4,500 회 이상) :

모바일 Safari의 Stacktrace :

.cache/production-app.js:128:12

126  publicLoader.loadPage(browserLoc.pathname).then(page => {
127    if (!page || page.status === PageResourceStatus.Error) {
128      throw new Error(
129        `page resources for ${browserLoc.pathname} not found. Not rendering React`
130      )
131    }

Chrome Mobile의 Stacktrace :

/app-ac76ae7860adc4ef4414.js:1:179819

빵 부스러기:

시간 | 유형 | 오류 | 정보
-| -| -| -
4ms 전 | 요청 | XMLHttpRequest 오류 | GET /page-data/app-data.json
5ms 전 | 요청 | XMLHttpRequest 오류 | GET /page-data/index/page-data.json
6ms 전 | 요청 | XMLHttpRequest 오류 | GET /page-data/app-data.json
7ms 전 | 요청 | XMLHttpRequest 오류 | GET /page-data/index/page-data.json
10ms 전 | 요청 | XMLHttpRequest 오류 | GET /page-data/app-data.json
10ms 전 | 요청 | XMLHttpRequest 오류 | GET /page-data/index/page-data.json

대부분은 Mobile Safari 및 Chrome Mobile에서 발생합니다.

개츠비 버전 : 2.20.13

이 솔루션을 확인하십시오.
https://github.com/gatsbyjs/gatsby/issues/11461#issuecomment -459732145

나는 gatsby-plugin-offline 사용하지 않기 때문에 서비스 워커가 없습니다.

진전이 있습니까? 문제가 발생하고 플러그인이 오프라인 상태이며 오류가 발생하는지 테스트하기 위해 플러그인을 비활성화 할 수 없습니다.

나는 이것이 오프라인 플러그인과 관련이 없다고 생각합니다. 우리는 이러한 오류를 많이보고 있으며 사용한 적이 없습니다.

재현하려면 :

• [더 이상 필요하지 않은 예제, 아래 참조]로 이동하여 콘솔의 오류 및 작동하지 않는 React를 확인합니다.
• 왼쪽 상단에 로고가있는 홈페이지로 이동합니다.
• 헤더에서 "Research"를 클릭하여 원래 페이지로 돌아갑니다. 이제 페이지가 작동하고 패널을 접을 수 있습니다.

이것을 어떻게 디버깅합니까? 404 또는 기타 네트워크 요청이 없으므로 무슨 일이 일어나고 있는지 이해할 수 없습니다. 로컬 버전은 다음과 같지만 빌드는 Netlify에서 발생합니다.

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 75.0
    Safari: 13.0.5
  npmPackages:
    gatsby: 2.21.1 => 2.21.1
    gatsby-image: 2.4.0 => 2.4.0
    gatsby-plugin-graphql-loader: 1.0.2 => 1.0.2
    gatsby-plugin-module-resolver: 1.0.3 => 1.0.3
    gatsby-plugin-page-creator: 2.3.0 => 2.3.0
    gatsby-plugin-react-helmet: 3.3.0 => 3.3.0
    gatsby-plugin-sharp: 2.6.0 => 2.6.0
    gatsby-plugin-typescript: 2.4.0 => 2.4.0
    gatsby-source-contentful: 2.3.1 => 2.3.1
    gatsby-transformer-remark: 2.8.0 => 2.8.0
    gatsby-transformer-sharp: 2.5.0 => 2.5.0

우리의 경우에는 기본 내보내기로 페이지가 있었고 페이지 파일에도 이름이 지정된 내보내기가있었습니다. 페이지 파일 외부에서 명명 된 내보내기를 참조하는 즉시 매우 혼란스러워졌습니다.

수정은 기본 실제 페이지 구성 요소 내보내기를 제외하고 페이지에서 모든 내보내기를 제거하는 것입니다.

@thekevinbrown 간헐적 인 오류가 발생

@ 문제가있는 페이지에서 시작하거나 새로 고칠 때마다

가능하다면 모호한 런타임 오류 대신 명확한 빌드 오류로 더 좋았을 것입니다.

@thekevinbrown 그래서 나는 당신의 문제 가이 문제와 관련이 없다고 생각합니다 (아무도 안정적으로 재현 할 수 없었던 간헐적 오류). 동일한 오류가 표시되지만 원인이 다릅니다 (고맙게도 당신은 쉽게 고쳤습니다).

prod 사이트에서이 오류가 발생하고 최신 Gatsby 버전 (2 일 전 출시)으로 업그레이드하면 Safari의 버그가 수정되었습니다.

최신 Gatsby 버전으로 업그레이드되었습니다. 여전히 문제가 발생 함

나는 전에 이것을 경험 한 적이 없습니다. 갑자기 매번 발생합니다. 프로덕션에서만 😢
이것은 20 시간 전 업데이트 후에 발생했습니다. 우리는 정기적으로 종속성을 업데이트합니다.
그래서 기본적으로 프로젝트는 다운되었고 어떻게 다시 작동 시킬지 모르겠습니다.

업데이트를 20 시간 전으로 되돌리려 고했습니다. 도움이되지 않았습니다.
8 일 전으로 되돌려도 도움이되지 않았습니다.

다음은 새로운 업데이트가 포함 된 프로젝트입니다 : https://vermehrungch-4utm3ymcd.now.sh/Vermehrung/
그리고 8 일 전의 마지막 작업 : https://vermehrungch-9l709pu84.now.sh/Vermehrung/

개츠비 종속성을 9 일 전의 상태로 되 돌리면 새로운 빌드가 다시 작동합니다 .😆

이제 gatsby 종속성이 원인을 분리하려고 시도합니다.

좋아, 우리의 경우 :

• 확실히 개츠비 자체가 원인입니다
• 2.20.36까지 작동하는 버전
• v2.21.2 및 v2.21.3에는 위의 오류가 있습니다 (v2.21.17 이전에 동일한 오류를 테스트했습니다).
• v2.21.0에는 다른 오류가 있습니다.
  idb-keyval-iife.min.js:1 Uncaught (in promise) DOMException: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing. at https://vermehrungch.gabriel-software.now.sh/idb-keyval-iife.min.js:1:353 at new Promise (<anonymous>) at https://vermehrungch.gabriel-software.now.sh/idb-keyval-iife.min.js:1:323 at async Object.handle (https://vermehrungch.gabriel-software.now.sh/sw.js:162:21)

업데이트 : gatsby v2.21.19에서 오류가 계속 발생합니다.

@barbalex 사이트를 저희와 공유해 주시겠습니까? 비공개 인 경우 [email protected] 으로 이메일을 보내

디버그 할 때 사이트에서이 오류가 발생합니다.

[].concat(function(e) {
                if (Array.isArray(e)) {
                    for (var t = 0, n = Array(e.length); t < e.length; t++) n[t] = e[t];
                    return n
                }
                return Array.from(e)
            }(Object.keys(it.propTypes)), ["children"]);

Stacktrace :

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Module.zJQU (VM54 component---src-pages-vermehrung-js-c3ca1cb1b4686475777d.js:13787)
    at c (webpack-runtime-2b4bd8eda0563b1ea7e6.js:1)

사이트는 다음과 같습니다.

• https://vermehrung.ch
• https://github.com/barbalex/vermehrung
• 메일로 전송 된 비밀번호를 사용하여 로그인 할 수도 있습니다

사이트가 개발 중입니다. 따라서 데이터를 편집 할 수도 있습니다.

Sentry에서 반복적으로 동일한 오류 메시지를 받았습니다.

우리는 개츠비 버전 "2.21.22"를 사용하고 있습니다.

동일한 문제가 발생하여 위에서 언급 한 v2.20.36으로 다운 그레이드하여 수정했습니다.

좋아, 우리의 경우 :

• 확실히 개츠비 자체가 원인입니다
• 2.20.36까지 작동하는 버전
• v2.21.2 및 v2.21.3에는 위의 오류가 있습니다 (v2.21.17 이전에 동일한 오류를 테스트했습니다).

2.21.12 버전이있는 다른 프로젝트에서이 문제를 다시 만났습니다. 이것은 프로덕션에서만 발생하므로 _ 정말 _ 나쁘다. 이 버그의 우선 순위를 지정하십시오.

https://www.voteamerica.com/ 에서 프로덕션에서 이것을보고

최근에 삭제 된 한 페이지에 대해 동일한 문제가 발생했습니다. https://intergiro.com/legal 은 예상대로 사용자 지정 404 페이지를 표시하지 않습니다 (데스크톱 Chrome, Gatsby 2.20.8). 프로덕션에서만 발생합니다.

제 경우에는 @Kanuny 의 의견이 내 문제를 간접적으로 해결했습니다. publicLoader.loadPage 에서 페이지 데이터 JSON을 가져 오려고 할 때 실수로 페이지 데이터 JSON을 HTML 파일로 리디렉션했습니다. 리디렉션을 수정 한 후 페이지 데이터 JSON이 제대로로드되고 모두 정상적으로 작동합니다.

버그가 갑자기 다시 사라졌습니다. 캐시 나 무언가에 링크 된 것 같습니다.

Firefox 및 Chrome 최신 버전의 2.22.12 버전에서도 오류가 계속 발생합니다.

고쳐주세요!

고쳐주세요!

@SoldierCorp 오픈 소스가 무엇인지 읽고 직접 수정 해보십시오.

@antoinerousseau 는 또한 도움이 필요한 사람이 도움을 요청하고 방법을 아는 사람이 도움을 제공하는 곳에서 서로 돕는 것입니다. 따라서 귀하의 의견이 적절하지 않은 것 같습니다.

@andrzejwp 예, "제발 고쳐주세요!"와 같은

다른 사람들은 기여자가 그들을 돕고 OSS 문제를 해결하기를 희망하는 데 필요한 영향에 대한 자세한 통찰력을 언급했습니다.

@antoinerousseau 문제에서 더 이상 제공되는 정보가 없기 때문에이 문제와 관련된 유용한 정보가 더 이상 없습니다. 그래서 그냥 발생합니다. 최신 버전.

더 많은 사람들이 여전히 문제를 겪고 있으며 아직 해결되지 않았다는 것을 Gatsby에게 알리는 것입니다.

그것이 당신을 괴롭히는 경우 죄송하지만 프레임 워크를 사용하고 혼자서 문제를 해결할 시간이없는 일반 사용자입니다.

제 경우에는 gatsby-plugin-ipfs ( gatsby build --prefix-paths && gatsby serve 실행하면 "Error / page resources for / not found. Not rendering React"가 발생하기 때문에 경로를 접두사로 지정할 때만 발생했습니다. 페이지).
그러나 index.jsx 페이지에서 페이지 쿼리를 실행하지 않았지만 useStaticQuery 후크에서 staticQuery가 포함 된 구성 요소가있었습니다.
이 구성 요소를 주석 처리하고 다시 빌드하면 오류가 사라집니다.
흥미롭게도이 구성 요소의 주석을 해제하고 다시 빌드하면 (사이트가 초기 상태로 돌아 감) 정상적으로 실행되고 "Error / page resources for / not found. Not rendering React"오류가 발생하지 않습니다. 빌드 캐시에 중요한 것이 포함되어 있다고 제안합니까?

그래서 이것이 왜 발생할 수 있는지에 대한 내 (거친) 생각은 다음과 같습니다.

• 정적 쿼리는 포함하지만 페이지 쿼리는 포함하지 않는 인덱스 페이지에 문제가 있습니까?
• 빌드 프로세스의 순서에 문제가 있습니다 (캐싱이 결과를 수정할 수 있기 때문에).
• 빌드 프로세스에서 run static queries 또는 Generating image thumbnails 일 수 있습니다. 이는 캐시로 인해 건너 뛸 수있는 유일한 단계이기 때문입니다.

실수로 페이지 데이터 JSON을 HTML 파일로 리디렉션했습니다.

여기에 비슷한 상황이 있습니다. 본질적으로 nginx location 지시어 정규식은 /page-data/items/page-data.json 일치하지 않아야 할 때도 일치했습니다. 정규 표현식의 시작 부분에 ^ 를 추가하면 의도하지 않은 일치를 피할 수 있습니다.

https://www.voteamerica.com/ 에서 프로덕션에서 이것을보고

또한 같은 문제에 직면하고 있습니다.

안녕하세요 개츠비 팀, 안녕하세요. loadPage 에서 반환 된 오류를 지정할 수 있습니까?이 문제에서 발생한 다양한 오류의 원인이 될 수 있습니까?

함수를 참조하십시오 :

이 함수는 app-data.json , page-data.json 및 JS 구성 요소 자체를로드하려고 시도하므로 네트워크 문제, 서버 구성 문제, 개발 문제, 구성 문제에 매우 취약합니다. 오류 메시지를 지정하면 근본적인 문제를 더 쉽게 해결할 수 있습니다.

(참고 : 저희 웹 사이트에서 마지막으로 발생한 문제는 순환 가져 오기 때문이었습니다.)

v2.23.12로 다시 시도했습니다. 동일한 결과 : https://vermehrungch-1j64x2olp.vercel.app/Vermehrung

2.20.36 이상의 모든 버전이 있기 때문에 우리에게 그것은 절대적으로 체계적으로 보입니다. gatsby를 사용하여 빌드 된 5 개의 앱마다. 그래서 우리는 그 이후로 업데이트가 차단되었습니다.

문제가되기 시작했습니다. 예를 들어 v3 (https://github.com/gatsbyjs/gatsby/issues/15601)에서 core-js를 사용하는 libs를 사용할 수 없습니다. 이 문제는 이제 해결되었습니다-업그레이드 할 수 있다면.

정보 / 테스트 / 무엇이든 도와 줄 수있는 방법이 있다면 기꺼이 할 것입니다.

@barbalex 앱에 다음 오류가 있습니다.

이 오류를 분명히 보여야합니다. PR을 추가해도됩니다.이 ATM을 수행 할 대역폭이 충분하지 않습니다.

이 문제는 lib가 서버 측에서 사용될 때 react-contextmenu로 인해 발생하는 것으로 보입니다 : https://github.com/vkbansal/react-contextmenu/issues/284 , 이는 빌드 프로세스 중에 트리거되는 것으로 보입니다.

뿡뿡

PR을 추가해도됩니다.이 ATM을 수행 할 대역폭이 충분하지 않습니다.

죄송합니다. 회색 세포가 충분하지 않은 것 같습니다 😢
아마도 @ b4stien 은?

2.23.21 버전에서 문제가 계속 발생합니다.

나는 이것에 대한 모든 해결책을 얻지 못했지만 오늘 아침에 처음 으로이 문제가 있음을 알리고 싶었습니다.

그리고 나는 그것을 "고칠"수 있었다.

이 사이트는 "Cloudways"라는 공급자를 통해 AWS에서 호스팅됩니다.

초기 테스트로 Netlify에 사이트를 배포했습니다. 모든 것이 잘 작동했습니다.

약간 파헤쳐 본 후 "Varnish"라는 것을 사용하는 서버 측 캐시 문제가있는 것 같습니다.

먼저 "제거"하려고했지만 아무 일도 일어나지 않았습니다.하지만 비활성화했다가 다시 활성화하면 효과가있었습니다.

이 사이트는 정기적 인 업데이트를 통해이 환경에서 약 18 개월 동안 잘 존재했으며,이 문제가 발생한 것은 이번이 처음이었습니다.

최근에 다음으로 업그레이드했습니다.
Gatsby CLI 버전 : 2.12.59

이것이 어떤 영향을 미칠 수 있었는지 확실하지 않지만 내가 생각할 수있는 유일한 변화입니다. 물론 호스팅 측면에 변화가 없다면.

바라건대 이것은 누군가에게 도움이되기를 바랍니다 🤷

편집하다:

"광택"캐시를 다시 활성화했을 때 5 분 이내에 문제가 다시 발생했습니다.

지금은이 기능을 비활성화했습니다.

우리의 경우 /pages 폴더에서 생성 된 모든 페이지는 작동하지만 createPages 생성 된 나머지 페이지는 반응하지 않습니다.
이 문제는 지역 및 CI 모두에서 발생합니다.

우리의 경우 createPages 생성 된 모든 페이지는 모든 페이지에서 /${locale}/ 접두사를 사용하여 국제화를 사용하고 있기 때문입니다.

우리의 경우 createPages 생성 된 모든 페이지는 모든 페이지에서 /${locale}/ 접두사를 사용하여 국제화를 사용하고 있기 때문입니다.

이것에 대한 해결책을 찾았습니까? 우리는 또한 많은 로케일로이 설정을 가지고 있습니다.

@kdichev 아니요 해결책을 찾지 못했습니다. gatsby 팀이 라이브러리 수준에서이 문제를 해결하기를 기다리고 있습니다.

나는 여전히 문제가 어디에 있는지 잘 모르겠습니다. 기꺼이 PR을 만들 겠지만 근본적인 문제가 어디에 있는지 찾아 내면 좋을까요?

안녕하세요, 저는 IE11을 사용하는 프로덕션에서이 문제에 직면하고 있습니다.

"gatsby": "^ 2.23.11"

또한 IE11의 모든 페이지에서 공백 (수화 없음) 결과가 표시됩니다.
페이지 리소스를 찾을 수 없습니다. 반응을 렌더링하지 않음

개츠비 v2.24.2

편집 : 이전 기능 버전 v2.22.11로 되돌 렸습니다. ie11은 해당 커밋에서 작동했으며 지금도 작동했지만 package-lock.json 및 npm ci를 유지할 때만 작동했습니다. 어떻게 든 이것이 잘못되었다고 생각하지 않으므로 관련 될 수있는 가능한 다운 스트림 변경 사항을 나열하고 있습니다.
(작동하는 버전-> 실패한 빌드 버전)
ie11 실패의 후보가 될 가능성이 큰 것 :
@ babel / core 7.10.0-> 7.10.5
@ core / js 2.6.11-> 3.6.5
gatsby-legacy-polyfills 새로운 dep 0.0.2

기타 덜 가능성 :
@ graphql-tools / schema 새로운 dep 6.0.14
@ graphql-tools / utils 새로운 dep 6.0.14
그런 다음 vscode diff 도구에서 모든 빨강-> 모든 녹색을 선별하는 인내심이 떨어졌습니다.

기타 참고 사항 : gatsby build && gatsby serve -H 0.0.0.0 오류를 재현하여 서버 환경 관련 항목을 배제했습니다.

편집 2 : 내 게시물에서 처음보고 된 fauly v2.24.2 빌드의 빌드 출력이 10mb에서 30mb로 변경되었습니다. 약 20 개의 app- {hash} .js 버전, 2 개의 commons- {hash} .js 및 다양한 수의 pages.js가 있습니다. 동일한 파일이 아닌 것으로 보이며 이전 빌드와 일치하도록 날짜가 지정되었습니다. 따라서 gatsby 빌드가 사용 가능한 모든 이전 버전을 확보하고 / public에 넣은 것처럼 보입니다.

누구든지 저장소를 공유 할 수 있습니까?

@roffelsaurus 2.23.22 를 사용해 볼 수 있습니까?
2.24.2는 ci / cd cypress 테스트에서 실패합니다.

누구든지 저장소를 공유 할 수 있습니까?

우리는 repo와 vars를 개인적으로 공유 할 수 있습니다. 괜찮다면 konstantin으로 이메일을 보내주세요. [email protected] 그리고 나는 우리의 gh에 당신을 초대 할 것입니다

@wardpeet 문제 # 25766과 관련된 액세스 권한을 부여한 저장소에서이 문제를 테스트 할 수 있습니다.

제 경우 문제는 import 주문 및 일부 라이브러리 (즉, react-leaflet )가 서버 측 렌더링 환경에서 처리되는 방식과 관련이 있습니다. 나중에 문제를 일으키는 전단지 자체보다 먼저 전단지 플러그인을 가져 왔습니다. 어디를보아야할지 알았을 때 빠르게 고칠 수있었습니다.

그러나 생성 된 오류 메시지 ( page resources for / not found. Not rendering React )가 엄청나게 혼란스럽고 세부 정보 부족 및 기타 오류가 그것이 의미하는 바를 깊이 파헤쳐 야했기 때문에 주요 문제라고 생각합니다.

이 문제가있는 다른 사람에게 : 어떻게 찾았습니까? 크롬에서 좋은 오래된 중단 점 및 디버깅. gatsby build && gatsby serve 에서는 모든 소스 맵이있는 프로덕션 환경을 로컬에서 볼 수 있습니다. 나는 어떤 청크를 디버깅 할 수 있었고 구성 요소가로드되지 않고 내부 가져 오기를 엉망으로 만들었습니다. 다소 느린 프로세스 였으므로 페이지를 계속해서 다시로드 할 것이므로 인내심을 가지십시오. 청크 이름 (제 경우에는 component---src-pages-index-js )과 할당 된 가져 오기를 찾습니다. 그것에 들어가서 그들 중 하나가 실패 할 것이므로 종속성을 관찰하십시오. 나는 각 경우마다 다를 것이라고 믿기 때문에 어느 곳에서도 좋은 해결책을 찾을 수 없습니다. 소스 맵은 배열에서 일련의 일반적인 약속 이상을 보여 주었기 때문에 유용했습니다.

이것은 주제의 핵심은 아니지만 아래에서 찾은 내용에 대한 세부 정보를 남길 것입니다. 그러나 아래는 리 액트 리플릿에만 해당 되며 마일리지는 다를 수 있습니다.

그래서 이것은 원래 방법입니다.

import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
import "leaflet-control-geocoder/dist/Control.Geocoder"
import L from "leaflet";

그리고 이것이 지금 보이는 모습입니다 :

import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
import L from "leaflet";
import "leaflet-control-geocoder/dist/Control.Geocoder"

물론 모든 플러그인은 일반적으로 플러그인되는 라이브러리 다음에 와야하므로 이는 오류입니다. react-leaflet (내 생각에) 디버그를 실행할 때 로딩 순서가 약간 변경되었으므로 개발 중에 문제가 보이지 않았습니다.

방금 내 앱에서 Uncaught (in promise) Error: page resources for /app/ not found. Not rendering React 을 디버깅했습니다. 제 경우에는 / app /은 반응 앱을 포함하는 클라이언트 전용 경로입니다. gatsby develop 에는 문제가 없었지만 gatsby serve 및 프로덕션 빌드를 실행할 때이 오류가 발생했습니다. 보고 된 빌드 오류가 없습니다.

문제는 @barbalex도 만난 react-contextmenu (https://github.com/vkbansal/react-contextmenu/issues/284)에서 발생

@rgembalik , 내가 이것을 디버깅 한 방법은 내 앱 구성 요소에서 모든 구성 요소를 제거한 다음 빌드를 중단하는 구성 요소를 찾을 때까지 한 번에 하나씩 다시 추가하는 것입니다.

나를 위해 나는 복제조차 할 수 없으며, 센트리 오류보고에서 많은 오류를 볼 수 있습니다. 그래서 내가 어떻게 알아낼 지 모르겠다

Sentry에서는 "/"이외의 모든 종류의 페이지에 대해서도 복제 할 수없는 오류와 함께 이러한 오류를 Sentry에서 많이 얻고 있습니다. Netlify에서 호스팅됩니다. 배포하는 동안 활성 세션과 관련이있을 수 있지만 확인하기는 어렵습니다.

@wardpeet 은이 동일한 오류를 유발하는 여러 가지 잠재적 원인이있는 것 같습니다. 우리는 Sentry 로그에서만 이러한 오류를 볼 수 있으며 재현 할 수 없었습니다. 오류와 함께 더 많은 정보를 포함하거나 더 세분화 된 여러 오류를 추가하여 우리 모두가 원인을 찾기 위해 더 많은 일을 할 수 있도록 할 수 있습니까?

https://www.gatsbyjs.com/ 에서이 오류가 발생하여 빈 페이지가 표시됩니다.

처음 페이지를로드 할 때 gatsbyjs.com에서이 오류가 발생했음을 확인할 수 있습니다.

나는 Gatsby가 후행 슬래시로 URL 경로를 처리하는 특별한 방법을 가지고 있음을 알아 냈습니다. 이것이 도움이 될 수 있을지 모르겠습니다.

이 문제도 있습니다.

저장소를 공유 할 수 없지만 이 페이지에 액세스하면 SVG가 올바르게로드되는 것을 볼 수 있습니다. 하지만 존재하지 않는 경로 (예 : https://rocketseat.com.br/test)로 이동 하면 오래된 버전의 코드 (SVG 대신 gatsby-image 사용)가 표시되고 콘솔에이 메시지 :

Error: page resources for /test not found. Not rendering React

[email protected]을 사용

_ 편집 : 이유는 모르겠지만 여기에 내 문제를 추가 한 후 이미지 문제가 해결되었지만 페이지 콘솔에서 동일한 오류가 계속 발생합니다 _

복제하기가 어렵습니다. 센트리 오류보고에 이러한 오류가 많이 표시됩니다.

@theskillwithin- 동일합니다. 센트리에있는 수천 개.

나는 같은 문제가 있습니다. 아주 이상한. 이 오류를 유발하는 다양한 원인이있는 것 같습니다.

또한이 오류는 다양한 브라우저와 다양한 페이지에서 발생합니다. 앞서 언급 한 가능한 원인 중 어떤 것과도 우리의 상황을 연관시킬 수없는 것 같습니다. 또한 개발 과정에서 복제 할 수없는 것 같습니다. 배포 된 웹 사이트에서만 발생합니다.

나는 같은 문제가 있습니다. 복제 할 수 없지만 센트리에 이러한 오류가 많습니다. 또한 다양한 브라우저
개츠비 버전 2.24.3

이것들은 내가 Sentry를 사용하고있는 프로덕션 사이트에서도 자주보고되고 있습니다. 자신을 복제 할 수 없습니다. 내가 보는 방식은 더 나은보고가 필요하다는 것입니다. 기이 한 점은 실제로 페이지 데이터를 찾는다는 것입니다.

200 상태와 AFAICT를 수신하고 있으므로 json이 잘못된 형식이 아니므로 fetchPageDataJson() 가 성공 응답을 반환한다고 가정합니다.
https://github.com/gatsbyjs/gatsby/blob/90e66c7fcdc7a75185bdaa336b0f9bdec9762585/packages/gatsby/cache-dir/loader.js#L137 -L151

이 정도면 성공한 것 같으므로 다음으로 볼 수있는 실패 지점은 구성 요소 자체를로드하는 것입니다.
https://github.com/gatsbyjs/gatsby/blob/90e66c7fcdc7a75185bdaa336b0f9bdec9762585/packages/gatsby/cache-dir/loader.js#L438 -L448
https://github.com/gatsbyjs/gatsby/blob/90e66c7fcdc7a75185bdaa336b0f9bdec9762585/packages/gatsby/cache-dir/loader.js#L235 -L241

작성중인 async-requires 에 문제가있을 수 있습니다. Webpack에서 처리하고 문제가 간헐적으로 발생하기 때문에 실제로 괜찮다고 생각합니다. 파일이 작성되는 방식에 문제가 있으면 빌드가 폭파 될 수 있습니다.

이것이 반입되는 모듈의 어딘가에서 일종의 구문 문제 였다면 100 % 실패 할 것이라고 상상합니다. 해당 모듈을로드하는 장치 / 브라우저와 호환되지 않는 모듈에서 사용중인 것이있을 수 있습니다. 특정 오류가 모호 해지고 있기 때문에 확실히 말하기는 어렵습니다.

내가 필요하다고 생각하는 것은 생성 된 오류를 먹지 않는 컴포넌트 로더입니다.

갖는 Promise.resolve() 덩어리가 존재하지 않는이 때 asyncRequires 오류가 나을 던져 의미합니다. 그 오류는 해당 페이지를 방문 할 때마다 발생하므로 원인을 쉽게 추적 할 수 있습니다.

catch 블록에서 null 를 반환하면 발생한 오류가 의미가 없음을 의미합니다. 모듈을 찾았지만 동적 가져 오기 중에 오류가 발생했습니다. 웹팩이 동적 가져 오기의 catch() 블록에서 오류를 반환하지 않습니까? 그렇지 않은 경우 Webpack으로 해결해야 할 문제 일 수 있습니다. devtools에서 잘못된 import() 를 실행하면 오류가보고된다는 것을 알고 있습니다. 가져 오는 자바 스크립트를 구문 분석 할 수 없음 / 실패를 기반으로 오류가보고되는지 여부는 또 다른 질문이며 일부 코드를 사용한 추가 테스트는 특정 브라우저에서 작동하지 않습니다.

@wardpeet 이전에 더 나은 오류보고를 언급했습니다. 그것이 작업 중입니까, 아니면 도움이 필요합니까?

브라우저 호환성과 관련하여 이러한 오류는 대부분 모바일 장치에서 생성됩니다.

그러나 Safari를 사용하는 MacOS X와 ​​Chrome을 사용하는 Windows 10에서도 이러한 오류가 발생하는 것을 보았습니다.

한 가지 공통점은 트래픽이 일반적으로 Facebook 또는 Google에서 발생하는 것으로 보인다는 것입니다. 그러나 그것은 우연 일 수 있습니다. 왜냐하면 그것들이 우리 트래픽의 대부분을 이끌 기 때문입니다.

_ 참고 : 제가 함께 일하고있는이 사이트는 실제로 [email protected] 하고 있으므로 링크 한 코드는 다른 위치에 있지만 로직 자체는 변경되지 않은 것 같습니다. 여전히 똑같은 일을하고 있고, 제가 확인한 잠재적 인 실패 지점은 똑같은 것 같습니다 ._

개츠비 @ 2.24.53

또한 bugsnag에서 오류가 자주 발생하지 않습니다. 페이지가 렌더링되는지 여부가 명확하지 않습니다. @wardpeet 도움이 된다면 bugsnag 에 대한 스택이 있습니다. 흥미롭게도이 경우 여러 번 재

로깅 된 오류에 몇 가지 추가 정보를 추가하여 문제를 찾을 수 있기를 바랍니다.

https://github.com/gatsbyjs/gatsby/issues/26706에 게시 된 다른 버그가 발생한 페이지에서 동일한 문제가 발생합니다.

제 경우에는 (적어도) 데스크톱 크롬에서 발생하며 페이지를 처음로드 할 때만 발생합니다. 새로 고침을 누르면 모든 것이 예상대로 렌더링됩니다.

그런 다음 incognito 모드를 사용하고 내가 생각할 수있는 모든 캐시를 지우려고해도 처음으로 복제하려고 시도하면 잠시 후까지 (때로는 매우 무작위로) 할 수 없습니다 (때로는 가능했습니다). 며칠) URL을 방문하여 동일한 오류를 발견했습니다 (다시 새로 고침하면 사라짐).

위의 링크 된 문제에 사용한 동일한 최소 저장소로 복제하려고하면 동일한 오류를 볼 수 없습니다 (적어도 지금 시도한 시간은 아님).

오류는 (이 경우) 석조 격자가 생성되지 않았기 때문에 표시됩니다. 제 경우에는 사용자가 페이지 새로 고침을 생각하지 않는 한 페이지를 파괴합니다 (그렇지 않은 것으로 의심됩니다)

사실 너무 무작위로 느껴져서 몇 주 동안 본 적이 있지만 항상 내 PC에 뭔가 있다고 생각했습니다

npm auidit fix 실행했는데 문제가 해결되었습니다.

수행원! 같은 문제가 있습니다.

안녕,

프로덕션에서만이 문제가 발생합니다. 특정 URL의 경우이 버그를 100 % 재현합니다. public 디렉토리의 트리 구조를 살펴 보겠습니다.

  icons
  page-data
  usages
    brainstorming
      page-data.json
    seminaries
      page-data.json

이러한 URL을 https://domain.com/usages/brainstorming 입력하면 https://domain.com/usages/seminaries 도 완벽하게 작동합니다. https://domain.com/doesnotexist 와 같은 알 수없는 URL을 입력하면 당연히 404 페이지가 있지만 https://domain.com/usages 와 같이 트리의 실제 폴더와 일치하는 URL에 도달하려고하면이 빈 페이지가 있습니다. 그리고이 오류.

당신에게 종을 울릴 수 있습니까?

베스트

@guillaumepotier 너도 nginx를 사용하게 될까?

잘못된 응답 헤더로 인해 발생할 수 있다고 생각합니다.

@ daydream05 예, 실제로 우리는 nginx를 사용하고 있습니다. 로그에서 수정되지 않은 콘텐츠 헤더 304 개와 응답 200 개를 확인했습니다.

AWS S3 버킷 사용

AWS S3에서 호스팅 (CloudFront CDN 사용)도 마찬가지입니다.

npm audit fix 실행했는데 문제가 해결되었습니다.

재미있는 @ liuuuk311. 나는 우리 프로젝트에서 그것을 시도했고 아마도 우리를 위해 문제를 해결했을 것입니다. 시간이 알려 주겠지 만 지금까지 48 시간이 지나면 로그에 발생이 없습니다.

편집 : 5 일 후, 여전히 발생하지 않습니다 ...

편집 : 10 일 후 다시 몇 번 발생했습니다.보고해서 죄송합니다. npm audit fix 실행해도 문제가 해결되지 않는 것 같습니다.

@wardpeet 진단에 도움이 될 수있는 추가 버그 스내그 데이터 ...

이것에 따르면 page-data.json 파일이 실제로 올바르게로드되는 것처럼 보입니다 ...

• 오늘이 일을 당황했기 때문에 여기서 부딪 히고 * 볼 것입니다.

제 경우에는 polyfill.io lib를 페이지에로드하는 문제를 해결했습니다.

<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1"></script>

@pedrofsantoscom 정적으로로드 된 스크립트가 gatsby.js의 문제를 어떻게 해결했는지 설명해주세요.

어제 같은 문제가있었습니다. 캐시를 로컬에서 지우면 현재 사용자를 위해 수정되었습니다. 따라서 Cloudflare에서 캐시를 지 웠고 이제 더 이상 보고서를받지 못합니다.
캐시 지우기는 우리의 해결책이었습니다.

Cloudflare를 사용하지 않고 AWS cloudfront CDN을 사용하며 각 배포 후 무효화됩니다. 나는 웹 서버가 시작된 후 그리고 일부 결과적인 페이지 재로드에서 실행을 시도하면서 https로 로컬 웹 서버를 실행하여 로컬에서 버그를 경험했지만 매번 그렇지는 않았습니다. 패턴이 보이지 않습니다. 가끔 발생합니다.

Cloudflare를 사용하지 않고 AWS cloudfront CDN을 사용하며 각 배포 후 무효화됩니다. 나는 웹 서버가 시작된 후 그리고 일부 결과적인 페이지 재로드에서 실행을 시도하면서 https로 로컬 웹 서버를 실행하여 로컬에서 버그를 경험했지만 매번 그렇지는 않았습니다. 패턴이 보이지 않습니다. 가끔 발생합니다.

그것이 우리를위한 해결책이었습니다. 캐시를 지 웠을 때 시간당 오류가 빠르게 줄어들었고 적어도 bugsnag에서 동일한 오류가 발생하지 않았습니다. 이것은 참으로 이상한 오류입니다.

동일한 오류 메시지가 있지만 Internet Explorer에서만 나타납니다. 다른 모든 브라우저는 이러한 종류의 오류 메시지를 표시하지 않았습니다.

Unhandled promise rejection Error: page resources for / not found. Not rendering React

내 반응 구성 요소에서 가져온 가져 오기로 문제를 추적했습니다. 어떤 경우에는 https://sap.github.io/ui5-webcomponents/ 에 대한 종속성이있었습니다. 이러한 종속성을 제거하면 문제가 사라졌습니다. 실제 근본 원인이 무엇인지 설명 할 수는 없지만 반응 컨트롤의 종속성으로 인해이 문제가 발생할 수 있음을 지적하고 싶습니다.

@Chaosbohne 은 gatsby.js 팀이 종속성 관리 및 보안을 관리하고 첫 번째 단계에서 모든 종속성 / devDependency 버전에서 ^ 제거하면 모든 문제를 방지 할 수있을 것 같습니다.

이 문제는 브라우저에 의존하지 않는다고 말할 수 있습니다. Sentry 로그를 기반으로 한 Chrome 및 Safari와 Mac의 로컬 Chrome 85, 86에서 본 적이 있습니다.

어떤 솔루션도 작동하지 않습니다. @KyleAMathews 이 문제로 인해 우리는 사업을 잃고 있습니다.이 문제는 3-4 일 이내에 발생하며 근본 원인을 찾을 수 없습니다. 이 문제에 대한 해결책을 찾도록 도와주세요.

@ R3coN 웹 사이트를 다시

@ R3coN 이 도움이 될 수 있다면 잘 작동하는 패키지 버전이 있습니다.

    "gatsby": "2.20.36",
    "gatsby-cli": "^2.12.54",
    "gatsby-image": "^2.4.13",
    "gatsby-plugin-exclude": "^1.0.2",
    "gatsby-plugin-google-analytics": "^2.3.11",
    "gatsby-plugin-manifest": "^2.4.18",
    "gatsby-plugin-offline": "^3.2.17",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-resolve-src": "^2.1.0",
    "gatsby-plugin-sass": "^2.3.12",
    "gatsby-plugin-sharp": "^2.6.19",
    "gatsby-plugin-use-query-params": "^1.0.1",
    "gatsby-source-filesystem": "^2.3.19",
    "gatsby-source-graphql": "^2.6.2",
    "gatsby-transformer-sharp": "^2.5.11",

@ shide1989 예, 이것이 문제를 해결하는 유일한 방법입니다. 웹 사이트를 다시 빌드합니다. 그러나 재 구축도 2-3 일 동안 문제를 해결 한 후 다시이 문제가 발생합니다. 우리는 Gatsby CLI 버전 : 2.12.67 및 Gatsby 버전 : 2.24.47을 사용 하고 있습니다 개츠비 버전 을 다운 그레이드하여 운을 시험해 볼 것입니다.

@ shide1989 댓글 주셔서 감사합니다. 하지만 버전을 다운 그레이드하면이 오류가 발생합니다.->

WebpackError :이 StaticQuery의 결과를 가져올 수 없습니다.

이전 버전 2.24.47에서 작동했습니다.

유감스럽게도 빌드 타임에 쿼리를 추출하는 데 useStaticQuery 후크가 사용되는 동일한 파일에 graphql 태그가 지정된 템플릿 리터럴이 없을 수 있습니다. (여기에 설명 된대로 : https://github.com/gatsbyjs/gatsby/issues/24526)

어쨌든 행운을 빕니다

그러나 동일한 코드가 gatsby 2.24.47에서도 작동한다고 말했습니다.

@ R3coN 이 문제는 부적절한 정적 캐싱으로 인해 발생할 수도 있습니다. 서버에 nginx 또는 s3를 사용하고 page-data.json을 무효화하지 않으면 데이터를 변경할 때마다 StaticQueries가 중단됩니다.

나는이 문제가 있었고 모든 page-data.json을 캐싱하고 있음이 밝혀졌습니다. 그렇게해서는 안됩니다. 모든 요청을 재 검증해야합니다.

https://www.gatsbyjs.com/docs/caching/

@ daydream05 댓글 주셔서 감사합니다. 예, CloudFront에서 S3를 사용하고 있습니다. Cloudfront로이를 달성하는 방법을 알고 있습니까?

@ daydream05 이미 cache-control : 'public, max-age = 0, must-revalidate'가 page-data.json 및 app-data.json에 추가되어 이러한 페이지가 캐시되지 않음을 의미합니다.

존재하지 않는 페이지 (404 페이지를로드하고 수화해야 함)에서도이 현상이 나타납니다.

로컬에서 내 개발 및 프로덕션 빌드는이 오류없이 작동하며 빌드 된 프로덕션 app-[hash].js 에서 해당 오류를 발생시키는 확인 중에 console.log 삽입하면 page 개체가 존재하며 예상대로 page.componentChunkName: ""component---src-pages-404-js" 를 포함합니다.

그러나 앱이 gatsby 클라우드에 배포되면 존재하지 않는 페이지가로드 될 때마다 오류가 발생합니다. SSR의 404 페이지가 브라우저에 표시되지만 오류가 발생하므로 React가 브라우저에서 실행되지 않습니다. 404 페이지가 직접로드되면 ( /404 경로를 방문하여) 오류없이 정상적으로 작동합니다.

지금까지 로컬에서 복제 할 수 없었기 때문에 진단하기가 어렵습니다.

최신 버전 사용 : "gatsby": "^2.24.91"

여기에 게시하여 react-md 을 사용하는 다른 사용자가 신속하게 사이트를 수정할 수 있도록하거나 이것이 Gatsby에서이 문제를 해결하는 데 도움이되기를 바랍니다.

react-md 사용하는 프로젝트 중 하나에서 동일한 오류가 발생했습니다.
모든 구성 요소를 제거한 후 문제를 제거 할 수 있습니다.

이를 테스트하기 위해 매번 제품을 배포해야했기 때문에이 문제가있는 특정 구성 요소를 정확히 찾아 내지 못했지만 범위를 좁혔습니다.

import Card from "react-md/lib/Cards/Card";
import CardTitle from "react-md/lib/Cards/CardTitle";
import CardText from "react-md/lib/Cards/CardText";
import CardActions from "react-md/lib/Cards/CardActions";
import { TextField, Button, Snackbar } from "react-md";

더 깊이 파고들 시간 이 있으면

404 페이지와 관련하여 동일한 패턴의 행동이 저에게 일어나고 있으므로 @aMoniker 의 문제를 확인할 수 있습니다.

로컬에서는 개발 및 프로덕션 빌드 모두 404 페이지에서 제대로 작동하지만 Gatsby Cloud에 배포하면 실제 /404 경로를 제외한 모든 알 수없는 페이지에서 문제가 발생합니다.

또한이 오류가 발생하여 브라우저 캐시를 삭제하여 수정했습니다. 그러나 모든 용도로 사용하도록 강요 할 수는 없으므로이를 필요로하지 않는 솔루션을 찾는 것이 좋습니다.

@ dejavu1987 우리는이 문제가 발생하는 프로젝트에 react-md를 사용하지 않습니다.

@MaciekBaron 브라우저 캐시를 여러 번 지우고 각 지우기 후에 페이지를 다시로드하여 로컬에서 오류를 재현했습니다.

이것은 앞서 언급했듯이 캐싱 문제인 것 같습니다. 캐시 헤더가 모두 올바르게 설정되면 서비스 워커에 문제가있을 수 있습니다.

이 플러그인을 사용해 보시겠습니까?
https://www.npmjs.com/package/gatsby-plugin-remove-serviceworker

저도이 문제에 부딪 혔습니다. 개발 중에는 모든 것이 잘 작동하지만 gatsby 빌드를 실행하고 웹 호스팅 업체에 공개 디렉토리를 배포하면이 오류 메시지로 인해 페이지가 작동하지 않습니다.

나는 매우 호기심이 많았고 공개 페이지 데이터 디렉토리를 조사했습니다. 특정 페이지 디렉토리가 존재하지만 소문자가 아니라 디렉토리가 대문자로되어 있음을 발견했습니다. 그것이 내가 오류 메시지를받은 문제였습니다.

그 후 처음에는 소문자로 변경했으며 찌르는 소리가 잘 작동합니다. 이전에 페이지 이름을 변경하고 여기에 무언가가 캐시되어 있기 때문에 이런 일이 발생한다고 생각합니다.

나는 또한이 문제에 부딪쳤다. 이 문제를 해결하는 방법을 찾았습니다. 그러나 나는 그것이 진정한 문제를 해결하지 못했다고 생각합니다.

이제 수정 방법을 설명하겠습니다.

이 문제는 테스트 또는 프로덕션 환경에서 발견되었습니다. 위에서 말한 것처럼 개발 중에 재현되지 않습니다. 테스트 나 프로덕션에서도 매번 발생하지는 않았습니다. 그리고 모든 스크립트가 미리로드되고 비동기 적으로 실행되는 것을 발견했습니다. 그래서 대본의 실행 순서 때문일 수 있습니다.

3G fast 로 설정하는 것과 같이 네트워크에서 네트워크 속도를 늦추면 거의 매번 문제가 발생했습니다. 이것은 내 추측을 확인했습니다.

내 추측을 정당화 하기 위해 다음과 같이

exports.onPreRenderHTML = ({ replacePostBodyComponents, getPostBodyComponents }) => {
    const postBodyComponents = getPostBodyComponents()
    postBodyComponents.forEach((component) => {
      if(component.type === 'script' && component.props) {
        delete component.props.async
      }
    })
    replacePostBodyComponents(postBodyComponents)
  }

다행히 작동합니다.

이 방법이 문제를 해결하는 데 도움이 될 수 있지만 좋은 방법이라고 생각하지 않습니다. 개츠비의 기능을 위반 한 것 같습니다. 스크립트가 비동기 적으로 실행되도록 설계 되었습니까?

이 방법으로 모든 문제를 해결할 수 있기를 바랍니다.

이 문제는 테스트 또는 프로덕션 환경에서 발견되었습니다. 위에서 말한 것처럼 개발 중에 재현되지 않습니다. 테스트 나 프로덕션에서도 매번 발생하지는 않았습니다. 그리고 모든 스크립트가 미리로드되고 비동기 적으로 실행되는 것을 발견했습니다. 그래서 대본의 실행 순서 때문일 수 있습니다.

이 방법이 문제를 해결하는 데 도움이 될 수 있지만 좋은 방법이라고 생각하지 않습니다. 개츠비의 기능을 위반 한 것 같습니다. 스크립트가 비동기 적으로 실행되도록 설계 되었습니까?

나는 당신이 옳다고 생각합니다. 이상한 이유로 인해이 문제가 다시 발생했습니다.
최신 버전은 거칠었지만 답변에 연결하면 의미가 있습니다.

그래서 최근에 레이아웃 구성 요소에 글꼴 아이콘 구성 요소를 추가하여이 문제를 재현했습니다.
주목해야 할 중요한 점은 글꼴 아이콘이 지금까지 다른 깊은 중첩 구성 요소에서 사용되었으며 페이지 구성 요소에서 호출 된 첫 번째 구성 요소 인 레이아웃 수준에있을 때만 문제를 일으키지 않았다는 것입니다.

내가 틀렸을 수도 있지만 실제 원인을 파악하는 데 좋은 시나리오가 될 수 있습니다.

@ dejavu1987 동의합니다. 실제 원인을 파악할 수있는 좋은 시나리오를 제공했을 수 있습니다.

또한 webpack이 코드를 다른 청크로 분할하지만 청크에는 종속성이있을 수 있으므로 async 스크립트를로드하고 실행하는 것이 적합한 지 궁금합니다.

주요 문제는 Gatsby가 페이지 로딩 중에 오류를 삼키고 매우 일반적인 page resources for / not found. Not rendering React 메시지를보고하는 것 같습니다. 이것이이 스레드에보고 된 다양한 잠재적 원인이있는 이유입니다.

내 문제는 Mobx 5가 IE11을 지원하지 않는다는 것이 밝혀졌습니다. Mobx가 이에 대한 멋진 오류 메시지를 제공하는 동안 내가받은 것은 Gatsby의 "페이지 리소스를 찾을 수 없습니다"라는 메시지뿐이었습니다.

페이지로드 실패를 유발 한 원래 오류 메시지를보고하는이 문제의 해결 방법으로 겸손하게 제안합니다. 뿡뿡

나를 위해 고친 것은 404 페이지에서 200을 반환하도록 S3를 설정했다는 것입니다. 404 상태 코드를 반환하도록 변경했을 때 작동했습니다.

네, 이것도 찾았습니다. 그러나 내 문제는 더 광범위했습니다. Cloudfront 404 결과에서 부적절하게 캐싱했습니다. Cloudfront와 S3간에 404 결과를 얻은 이유는 CodePipeline을 통해 S3에 배포하면 Build Artifact ZIP 파일의 압축이 풀린다 고 생각하지만 특정 순서로 수행하지 않기 때문입니다. 따라서 몇 분 동안 아직없는 새 .JS 파일 (새 해시 포함)을 가리키는 새 .HTML 파일을 가질 수 있습니다. 해시 된 자산 파일에 대한 캐싱을 처리하는 것이 무엇이든 404 결과에 캐시하지 않아야합니다. 이는 CDN 캐시를 플러시해야만 수정할 수 있기 때문입니다.

그런데 HTML 파일이 S3에 마지막으로 배포되었는지 확인하는 방법을 알아 낸 사람이 있습니까?

데이비드
https://ewebinar.com

2020 년 10 월 21 일 오후 12시 40 분에 Vince P. [email protected] 은 다음과 같이 썼습니다.

@ R3coN https://github.com/R3coN 이 문제는 부적절한 정적 캐싱으로 인해 발생할 수도 있습니다. 서버에 nginx 또는 s3를 사용하고 page-data.json을 무효화하지 않으면 데이터를 변경할 때마다 StaticQueries가 중단됩니다.

나는이 문제가 있었고 모든 page-data.json을 캐싱하고 있음이 밝혀졌습니다. 그렇게해서는 안됩니다. 모든 요청을 재 검증해야합니다.

https://www.gatsbyjs.com/docs/caching/ https://www.gatsbyjs.com/docs/caching/
—
이 스레드를 구독했기 때문에이 메시지가 전송되었습니다.
이 이메일에 직접 답장하거나 GitHub https://github.com/gatsbyjs/gatsby/issues/19618#issuecomment-713298516 에서 보거나 하세요 .

PWA 테스트를 사용하거나 사용하지 않고 모바일 테스트에서 Chrome Lighthouse Audit 문제를 재현했다고 덧붙일 수 있습니다. 모바일 테스트는 네트워크 및 CPU 제한을 사용하므로 비동기 스크립트가 순서대로로드되지 않거나 30 개 중 하나가 실패하는 경우가 자주 발생할 수 있습니다.

저는 3D로 작업하고 있으며 webpack 및 gatsby.js 로 localhost 에서도 페이지를 다시로드하면 정적 모델 gtlf 대한 네트워크 요청이 실패하는 경우가 자주 발생합니다. 파일. 그중 하나가 실패했습니다. 모든 앱이 손상되었습니다 (ErrorBoundary가 설정되지 않은 경우).

여기에 동일한 패턴이있을 수 있지만 적절한 오류 처리가 없을 수 있습니다.

프로덕션에 S3 및 CloudFront를 사용하고 있습니다. 비슷한 문제가 있었지만 제 경우에는 Cloudfront에서만 콘솔에서 Can't render React 오류가 발생했습니다. 이것은 프로덕션 S3에서 파일을 변경 한 후 발생하기 시작했습니다. 놀랍게도 생산 원점을 위해 등대를 다시 실행 한 후 해결 된 문제입니다.

이것은 일반 모드의 내 장치에서만 발생했습니다. 제 경우에는 전체 캐시, 쿠키, 로컬 스토리지, 세션 스토리지 및 서비스 워커를 청소하는 것이 더 일찍 도움이되지 않았습니다.

따라서 lighthouse로 제작 원점을 프로파일 링하고 파일이 변경된 경우이 문제도 발생할 수 있습니다 (제 경우에는)

내 요점은 10 개에서 1 개 정도의 등대로 재현 할 수 있고 마지막 배치는 오래 전이었습니다.

나는 개츠비가이 문제를 해결할 수 없을 것이라고 생각한다. 왜냐하면 이것은 모든 사람에게 일어나고 있지만 그 이유는 다르기 때문이다. 빈 페이지가 너무 자주 발생하거나 백엔드 개츠비 페이지에서 무언가를 변경할 때마다 빈 페이지가되고 오류가 발생하며 그 오류도 매번 다릅니다. 나는 우리가 gatsby 사용을 중단하고 다른 신뢰할 수있는 프레임 워크로 전환해야한다고 생각합니다.

재현 할 수있는 방법이 있으면 오류를 수정할 수 있지만 그렇지 않습니다. 이 오류는 무작위로 발생하며 때로는 배포 후 하루에 발생하며 때로는 배포 후 3-4 일 후에 발생합니다. 하지만 일어난다.

@antoinerousseau 뭐 찾았 어? 누구든지이 문제를 적어도 디버깅하는 방법을 단계별로 말해 줄 수 있습니까? 나는 내 쪽에서 모든 것을 시도했지만 웹 사이트를 배포 한 후 1-2 일이 지났다. 나에게 너무 무작위로 발생하기 때문에이 문제가 언제 발생하는지 아는 방법을 알려주는 사람이 있습니까?

나를 위해 고친 것은 404 페이지에서 200을 반환하도록 S3를 설정했다는 것입니다. 404 상태 코드를 반환하도록 변경했을 때 작동했습니다.

S3 또는 Cloudfront?

제 경우에는 Azure에서 기본적으로 사용하는 404 페이지에 문제가있었습니다. 차단 오류 였고 콘솔에서 볼 수 있었던 유일한 것은
Error / page resources for / not found. Not rendering React

사용자 지정 404를 사용하기 시작한 이후로 문제가 사라졌습니다.

Netlify에 앱을 배포 할 때도 똑같습니다. Locally Gatsy Build와 Gatsby Serve가 잘 작동합니다 .. 이것은 훨씬 더 이상합니다 ..

@atapas Netlify 지원팀에 문의 해 주시겠습니까? 그들이 자신의 편에서 뭔가를 명확히 할 수 있을까요?

@atapas Netlify 지원팀에 문의 해 주시겠습니까? 그들이 자신의 편에서 뭔가를 명확히 할 수 있을까요?

응 나는 했어. 감사!

아마도 더 나은 스택 추적이나 명확한 오류 메시지가 여기에 도움이 될 것입니다. 어쨌든 응답 감사합니다.

@atapas 나는 팀의 일원이 아니며 당신과 같은 버그를 겪고 있습니다.

Netlify에 앱을 배포 할 때도 똑같습니다. Locally Gatsy Build와 Gatsby Serve가 잘 작동합니다 .. 이것은 훨씬 더 이상합니다 ..

나는 완전히 다른 맥락에서 해결책을 찾았습니다. Netlify가 Auth0이 내 앱에서 작동하도록 설정 한 환경 변수를 무시했기 때문에 오류가 발생했습니다.

도메인 : process.env.AUTH0_DOMAIN,
clientID : process.env.AUTH0_CLIENTID,
redirectUri : process.env.AUTH0_CALLBACK,

나중에 여기 에서 "민감한 변수없이 배포"에 대해 읽고 문서에서 언급 한대로 수정했습니다.

내가받은 오류에 놀랐고 솔루션이 ..에 도착했지만 효과가있어 기뻤습니다.

@atapas 나는 팀의 일원이 아니며 당신과 같은 버그를 겪고 있습니다.

@ JustFly1984 , 정말 고맙습니다. 나는 Netlify 문서를 살펴 보았고 위의 주석에서 언급 한 해결책을 알아낼 수있었습니다.

나는 이것을 크롬에서만 얻고있다. Safari는 훌륭하게 작동합니다. 방금 프로젝트에 오프라인 및 매니페스트 플러그인을 추가했습니다. Gatsby develop 또는 gatsby build & gatsby serve 로 로컬에서 재현 할 수 없습니다. Netlify에서 호스팅하고 있습니다.

나에게 React 구성 요소 외부 의이 코드 블록과 React 구성 요소의 전역 변수를 참조하면 오류가 발생했습니다. 제거하면 문제가 해결되었습니다.

let deferredprompt = null;
let updateAvailable = false;
if (
  typeof window !== "undefined" &&
  window.hasOwnProperty("BeforeInstallPromptEvent")
) {
  window.addEventListener("beforeinstallprompt", (event) => {
    deferredprompt = event;
    event.preventDefault();
  });
}

if (typeof window !== "undefined" && window.isUpdateAvailable) {
  window.isUpdateAvailable.then(
    (isAvailable) => (updateAvailable = isAvailable)
  );
}