Gatsby: 창이 정의되지 않았습니다.

예, 개발 중에 반응 구성 요소는 window 가 정의된 브라우저에서만 실행됩니다. 빌드할 때 Gatsby는 window 가 정의되지 않은 서버에서 이러한 구성 요소를 렌더링합니다. 일반적으로 React에서 이에 대한 해결책은 componentDidMount window 에만 액세스하거나 액세스하기 전에 window 가 존재하는지 확인하는 것입니다. 이 작업을 수행하지 않는 타사 라이브러리의 경우 수행한 작업이 훌륭해 보입니다.

내가없는 것 @KyleAMathews 취득하는 componentDidMount 화재에 html.js 또는 _template.jsx 사용하여 gatsby develop , 어쩌면 그것은에 안, 또는 내가하고 있어요 뭔가 잘못?

@hitchcott 귀하의 빌드에 대해 조금 더 공유할 수 있습니까? 방금 semantic-ui를 gatsby 프로젝트에 설치했지만 CSS가 작동하지 않습니다. 내 페이지에 CSS를 로드하는 방법을 잘 모르겠습니다. React는 인라인 스타일이 맞다고 가정하지만 어떻게 알 수 있습니까? 또한 gulp 대신 LESS 빌드를 수행하도록 webpack을 구성해야 한다고 가정합니다. webpack-lessloader를 방금 설치하셨습니까?

@Maxhodges — 스타일에 대해 "알고 있는" 것은 React가 아니라 Webpack입니다. Webpack은 번들로 제공되는 JS 파일의 어딘가에 컴파일된 파일을 가져오거나 필요로 하기 때문에 알고 있습니다.

예를 들어, _template.js 파일에서 기본 styles.css 를 가져오기 때문에 Webpack이 번들을 빌드할 때 이러한 스타일이 포함됩니다. 프로덕션에 있을 때 외부 참조 파일( 예를 보려면 여기 cssLink 참조 ).

Gatsby는 이미 기본 Webpack 구성에 하나를 포함하고 있으므로 추가 LESS 로더가 필요하지 않습니다.

문서 사이트 설치에 대한 Gatsby GitHub 페이지의 지침을 따랐던 분들을 위해...
import { colors } from 'utils/colors'
문제를 만드는 사람이고 이것을 주석 처리한 후 ${colors.bg} 사이트가 멋지게 발전했습니다.

이 경우 더 나은 오류 메시지를 표시할 수 있습니까? 어디에서 오류를 찾을 수 있는지 모르겠습니다.

Failed at generating HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
      throw err;
      ^
Error: ReferenceError: window is not defined
    at Object.defineProperty.value (render-page.js:44529:79)
    at __webpack_require__ (render-page.js:30:30)
    at Object.exports.__esModule (render-page.js:42560:24)
    at __webpack_require__ (render-page.js:30:30)
    at Object.defineProperty.value (render-page.js:42533:51)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:80:19)
    at __webpack_require__ (render-page.js:30:30)
    at Object.assign.i (render-page.js:50:18)
    at render-page.js:53:10
error Command failed with exit code 1.

정말 좋은 생각이네요! 현재 1.0을 열심히 누르고 있으므로 이것을 얻지 못할 것입니다.
곧, 하지만 지금은 public/render-page.js를 줄 번호로 엽니다.
거기에 표시(44529)하고 어떤 코드가 문제를 일으키는지 확인하십시오.

2017년 5월 17일 수요일 오전 11:45 Thomas Seberechts [email protected]
썼다:

이 경우 더 나은 오류 메시지를 표시할 수 있습니까? NS
어디에서 오류를 찾을 수 있는지 모릅니다.

HTML 생성 실패

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
오류를 던지다;
^^
오류: ReferenceError: 창이 정의되지 않았습니다.
Object.defineProperty.value에서 (render-page.js:44529:79)
__webpack_require__에서 (render-page.js:30:30)
Object.exports.__esModule에서(render-page.js:42560:24)
__webpack_require__에서 (render-page.js:30:30)
Object.defineProperty.value에서 (render-page.js:42533:51)
__webpack_require__에서 (render-page.js:30:30)
개체에서.(렌더 페이지.js:80:19)
__webpack_require__에서 (render-page.js:30:30)
Object.assign.i에서 (render-page.js:50:18)
render-page.js:53:10에서
오류 명령이 종료 코드 1과 함께 실패했습니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.

이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
.

효과가 있었다! 고마워.

팁: 이 문제를 해결하려면 typeof window !== 'undefined' && window.whaterver-you-need 를 입력하세요.

componetDidMount 사용할 때 오류가 사라집니다.

비슷한 문제가 있지만 브라우저에서 일부 redux 상태를 유지하기 위해 localStorage를 사용하고 있습니다. store.js 파일에서 window.localStorage 를 사용할 수 없는 경우 이 문제를 어떻게 우회합니까?

😢

감사 해요!

@그레고르스키

const windowGlobal = typeof window !== 'undefined' && window

그러면 windowGlobal.localStorage

예, 이것은 효과가 있었지만 https://www.npmjs.com/package/localstorage-memory를 사용하여 로컬 스토리지를 조롱해야 했습니다.

const windowGlobal = typeof window !== 'undefined' && window;
const localAdapter = windowGlobal ?
  adapter(windowGlobal.localStorage) :
  adapter(memoryStorage)
;

https://www.npmjs.com/package/redux-localstorage 사용

componentDidMount window 에만 액세스

타사 js에 대한 요지.

// index.js
import React from "react";
import Link from "gatsby-link";

// import "uikit/dist/js/uikit";
// Third party JS access `window` without
// `typeof window !== "undefined"` check

class Template extends React.Component {
  componentDidMount() {
    import("uikit/dist/js/uikit")
      .then((uikit) => {
        this.uikit = uikit;
      })
      .catch((error) => console.error(error));
  }
  render() {
    // ...
  }
}

// ...

@CallMeLaNN 제안이 저에게

WebpackError: 요소가 정의되지 않았습니다.

componentDidMount 내부에 가져오기를 넣는 것이 효과가 있었습니다.

 componentDidMount() {
    try {
      this.UIkit = require("uikit/dist/js/uikit");
      this.Icons = require("uikit/dist/js/uikit-icons");
      this.UIkit.use(this.Icons);
    } catch (e) {
      console.error(e);
    }
  }

예, 개발 중에 반응 구성 요소는 창이 정의된 브라우저에서만 실행됩니다. Gatsby는 빌드할 때 윈도우가 정의되지 않은 서버에서 이러한 구성 요소를 렌더링합니다. 일반적으로 React에서 이에 대한 해결책은 componentDidMount의 창에 액세스하거나 액세스하기 전에 창이 존재하는지 확인하는 것입니다. 이 작업을 수행하지 않는 타사 라이브러리의 경우 수행한 작업이 훌륭해 보입니다.

이것을 조기에/눈에 띄게 드러내는 것이 매우 도움이 될 것입니다. 처음으로 빌드를 시도하고 있으며 이것이 문제가 될 줄 몰랐기 때문에 지금 수정해야 할 많은 문제가 있습니다. 긴급하게 배포해야 하기 때문에 특히 스트레스가 많습니다. 제안서를 제출하고 있는데 사이트가 온라인이어야 합니다.

저는 Github Pages에만 배포하려고 하므로(적어도 지금은) SSR이 필요하지 않습니다. 클라이언트용으로만 구축할 수 있는 방법이 있습니까?

Gatsby v2에서는 es6과 commonjs 가져오기 중에서 선택해야 하는 것 같습니다. webpack 4와 관련된 이유로 더 이상 혼합할 수 없습니다.

그것이 사실이고 이미 es6 가져오기를 사용하고 있다고 가정하면 @jfaeldon의 솔루션이 여기에서 사용할 솔루션이고 @hitchcott의 솔루션은 더 이상 작동하지 않을 것입니다.

누군가 그것을 확인할 수 있습니까?

@joshwcomeau는 전적으로 동의합니다. 또한 브라우저에서만 dev를 실행하고 node.js에서 빌드하는 것은 좋은 생각이 아니라고 생각합니다. 그 차이가 너무 커서 DEV와 PROD 환경에서 최대한 비슷한 환경을 만들고 싶기 때문에 gatsby도 똑같이 하고 dev와 build를 최대한 비슷한 환경에서 실행해야 한다고 생각합니다.

그래서 브라우저에서 빌드를 실행할 수 있습니까? 나는 SSR이 필요하지 않습니다.

안녕하세요,
여기에서 동일한 문제가 발생하고 있습니다. Coverflow는 gatsby 개발에서는 잘 작동하지만 빌드에서는 오류가 발생합니다.
WebpackError: 창이 정의되지 않았습니다.

     - react-coverflow.js:1 Object.<anonymous>
       ~/react-coverflow/dist/react-coverflow.js:1:330

     - main.js:1 Object.<anonymous>
       ~/react-coverflow/main.js:1:1

'react-coverflow'에서 Coverflow 가져오기;
'라듐'에서 { StyleRoot } 가져오기

클래스 팀은 React.Component {를 확장합니다.

세우다(){
반품(

displayQuantityOfSide={2}
항해
무한 스크롤
표제 활성화
활성={0}
미디어={{
' @미디어 (최대 너비: 720px)': {
너비: '100%',
높이: '200px'
},
' @미디어 (최소 너비: 720px)': {
너비: '100%',
높이: '400px',
}
}}
>

  </Coverflow>
</StyleRoot>
)

}
}

기본 팀 내보내기;

몇 개의 패키지를 설치한 후 이 오류가 발생했습니다. 따라서 패키지 중 하나에 있어야 합니다. 하지만 문제가 있는 위치를 찾을 수 없습니다. 누구든지 어떤 npm 패키지가 될 수 있는지 더 잘 파악하는 방법에 대한 팁이 있습니까? 오류는 실망스러울 정도로 일반적입니다.

반응 구현이 더 나을까요?
https://react.semantic-ui.com/ 및 https://github.com/pretzelhands/gatsby-starter-semantic-ui

@wmlutz 내가 제공할 수 있는 가장 간단한 설명은 개발 중인 프로젝트를 빌드하기 위해 gatsby develop 를 발행하거나 프로덕션 빌드를 위해 gatsby build && gatsby serve 를 발행할 때 내부적으로 Gatsby가 생성하기 때문입니다. 페이지와 CSS, 링크 등. 그러나 명심해야 할 것은 이것이 클라이언트 측이 아니라 서버 측, 노드 측에서 수행된다는 것입니다. 따라서 노드는 클라이언트 전용이므로 해당 특정 API에 액세스할 수 없습니다. 그리고 일부 패키지는 기본적으로 Gatsby와 잘 작동하지 않습니다. "멋지게 플레이"하려면 일부 변경이 필요할 수 있습니다.

@jonniebigodes - 감사합니다. 이제 _이유_를 이해한 것 같습니다. 내 것은 이제 _what_입니다. 나는 어리석게도 많은 일을 했고 어떤 패키지가 문제를 일으키는지 파악하는 데 어려움을 겪고 있습니다. 좀 더 자세한 오류 보고와 함께 gatsby build 방법이 없습니까?

@jonniebigodes - 문제를 일으키는 패키지를 알아냈습니다. react toasts . 내 다음 문제는 그것을 고칠 방법을 알아내는 것입니다.

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      ToastsStore.error("There was an error: " + result.msg)
    }
  }

@wmlutz 아래 코드 블록과 같은 것입니다. react 는 초기 정적 번들이 수신된 후 로드됩니다. 따라서 사용자가 _handleSubmit window 도달하면 존재하게 됩니다.

react toasts 가 window 에서 import window 를 호출하면 여전히 오류가 발생할 수 있습니다.

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      if (window) ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      if (window) ToastsStore.error("There was an error: " + result.msg)
    }
  }

같은 문제입니다. 다른 Toast 라이브러리를 찾거나 직접 만들겠습니다. 날 죽이면 안 돼.

@joserocha3 해당 코드는 개발 모드에서만 작동합니다. 프로덕션 빌드에 대한 호출이 실행되면 error Building static HTML failed 단계에서 실패합니다. Gatsby가 가져오기를 검사하고 문제의 패키지를 찾으면 이 패키지가 node.js 및 @wmlutz에 고유하지 않은 일부 API를 사용하고 있기 때문에 실패할 것입니다. 해당 패키지의 코드는 매우 간단하고 너무 많은 문제를 일으키지 않아야 합니다. 귀하의 경우에 조정합니다. 리포지토리를 분기하고 코드를 확인하고 자신에게 적합한 구성 요소 집합을 만드는 것이 어떻습니까?

나는 포크에 대해 @jonniebigodes 에 동의합니다. repo 소스는 몇 개의 파일에 불과합니다. 문제가 되는 호출은 ToastsContainer.tsx 의 document 참조입니다.

또는 위에서 언급한 https://github.com/gatsbyjs/gatsby/issues/309#issuecomment -387039877을 시도

그 원인은 엄격 모드, UMD 및 번들링이 작동하는 방식입니다.

patch-package 를 사용하는 경우 포크가 필요하지 않습니다.

또한 https://github.com/webpack/webpack/issues/6677 및 연결된 문제를 참조

그것은 당신이 사용하는 코드 tgat와 그들이 적절한 검사를 수행하는지 또는 umd 타겟을 전혀 사용하고 전역 objscts를 정의하는지에 달려 있습니다.

안녕하세요 여러분, 여전히 동일한 문제가 발생합니다. 내 프로젝트에서 창 기능을 사용하지 않았지만 여전히 동일한 오류가 발생합니다.

오전 1:09:03: 빌드 시작 준비
11:09:05 AM: 빌드 이미지 버전: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:09:05 AM: 빌드 이미지 태그: v3.3.2
11:09:05 AM: 빌드봇 버전: 75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06 AM: 캐시된 종속성 가져오기
11:09:06 AM: 194.6MB 캐시 다운로드 시작
11:09:07 AM: 1.636969993초 후에 캐시 다운로드 완료
11:09:07 AM: 캐시 추출 시작
11:09:17 AM: 9.693656527초에 캐시 추출 완료
11:09:17 AM: 11.478174001초 후 캐시 가져오기 완료
11:09:17 AM: 리포지토리 빌드 준비 시작
11:09:17 AM: Git 참조 준비 pull/21/head
오전 11:09:18: netlify.toml을 찾았습니다. 사이트 구성 재정의
11:09:18 AM: 빌드 스크립트 시작
11:09:18 AM: 종속성 설치
11:09:19 AM: 캐시된 노드 버전 복원 시작
11:09:22 AM: 캐시된 노드 버전 복원 완료
11:09:23 AM: v10.16.0이 이미 설치되어 있습니다.
11:09:24 AM: 현재 노드 v10.16.0(npm v6.9.0) 사용 중
11:09:25 AM: Ruby 버전 2.6.2 시도, 환경에서 읽기
11:09:27 AM: 루비 버전 2.6.2 사용
11:09:27 AM: PHP 버전 5.6 사용
11:09:27 AM: 캐시된 노드 모듈 복원 시작
11:09:27 AM: 캐시된 노드 모듈 복원 완료
11:09:27 AM: 캐시된 얀 캐시 복원 시작
11:09:27 AM: 캐시된 얀 캐시 복원 완료
11:09:28 AM: Yarn 버전 1.9.4를 사용하여 NPM 모듈 설치
11:09:29 AM: 원사 설치 v1.9.4
11:09:29 AM: 경고 package.json: 라이센스 필드 없음
11:09:29 AM: 경고 package-lock.json을 찾았습니다. 프로젝트에 Yarn 이외의 도구에서 생성된 잠금 파일이 있습니다. 동기화되지 않은 잠금 파일로 인한 확인 불일치를 피하기 위해 패키지 관리자를 혼합하지 않는 것이 좋습니다. 이 경고를 지우려면 package-lock.json을 제거하십시오.
11:09:29 AM: 경고 [email protected]: 라이센스 필드 없음
11:09:29 AM: [1/4] 패키지 해결 중...
11:09:31 AM: [2/4] 패키지를 가져오는 중...
11:09:31 AM: (node:1201) [DEP0005] DeprecationWarning: Buffer()는 보안 및 사용성 문제로 인해 더 이상 사용되지 않습니다. 대신 Buffer.alloc(), Buffer.allocUnsafe() 또는 Buffer.from() 메서드를 사용하십시오.
11:10:04 AM: info [email protected]: "linux" 플랫폼은 이 모듈과 호환되지 않습니다.
오전 11:10:04: 정보 "[email protected]"은 선택적 종속성이며 호환성 검사에 실패했습니다. 설치에서 제외합니다.
11:10:04 AM: [3/4] 종속성 연결 중...
오전 11:10:04: 경고 "gatsby > [email protected]"에 잘못된 피어 종속성 "graphql@^0.12.0 || ^0.13.0"이 있습니다.
오전 11:10:04: 경고 "gatsby > [email protected]"에 잘못된 피어 종속성 "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0"이 있습니다.
11:10:04 AM: 경고 "gatsby > [email protected]"에 잘못된 피어 종속성 "graphql@^0.13.0"이 있습니다.
오전 11:10:04: 경고 "gatsby-plugin-netlify > [email protected]"에 충족되지 않은 피어 종속성 "webpack@>=4.4.0"이 있습니다.
오전 11:10:04: 경고 "gatsby-plugin-sass > [email protected]"에 충족되지 않은 피어 종속성 "webpack@^3.0.0 || ^4.0.0"이 있습니다.
오전 11:10:04: 경고 " > [email protected]"에 충족되지 않은 피어 종속성 "webpack@^2.0.0 || ^3.0.0 || ^4.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-auth@^2.0.4"가 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-util@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-auth@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-util@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-auth@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-util@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-auth@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-util@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에는 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.8.2"가 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-util@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-immutable-proptypes@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-lib-util@^2.0.4"가 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-immutable-proptypes@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "moment@^2.11.2"가 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에는 충족되지 않은 피어 종속성 "react-immutable-proptypes@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-immutable-proptypes@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-immutable-proptypes@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.5"가 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-immutable-proptypes@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.6"이 있습니다.
11:10:04 AM: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-immutable-proptypes@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-emotion@^9.2.5"가 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.7.6"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "react-immutable-proptypes@^2.1.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > [email protected]"에 충족되지 않은 피어 종속성 "netlify-cms-ui-default@^2.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-date > [email protected]"에 충족되지 않은 피어 종속성 "moment@>=2.16.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > [email protected]"에 충족되지 않은 피어 종속성 "immutable@>=3.8.1"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.8.2"가 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > [email protected]"에 잘못된 피어 종속성 "slate@^0.32.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > [email protected]"에 충족되지 않은 피어 종속성 "immutable@^3.8.1"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > [email protected]"에 잘못된 피어 종속성 "slate@^0.33.3"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > [email protected]"에 충족되지 않은 피어 종속성 "slate-schema-violations@^0.1.7"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > [email protected]"에 충족되지 않은 피어 종속성 "immutable@>=3.8.1"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > [email protected]"에 충족되지 않은 피어 종속성 "immutable@>=3.8.1"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-core > redux-notifications > [email protected]"에 잘못된 피어 종속성 "redux@^2.0.0 || ^3.0.0"이 있습니다.
오전 11:10:04: 경고 "netlify-cms > netlify-cms-widget-markdown > slate-react > [email protected]"에 충족되지 않은 피어 종속성 "immutable@>=3.8.1"이 있습니다.
오전 11:10:04: 경고 " > [email protected]"에 잘못된 피어 종속성 "react@^16.8.3"이 있습니다.
11:10:21 AM: [4/4] 신선한 패키지 제작 중...
11:10:26 AM: 56.59초 만에 완료되었습니다.
11:10:26 AM: Yarn을 사용하여 설치된 NPM 모듈
11:10:26 AM: 경고 package.json: 라이센스 필드 없음
11:10:26 AM: 캐시된 go 캐시 복원 시작
11:10:26 AM: 캐시된 go 캐시 복원 완료
11:10:27 AM: GOOS 설정 안됨;
오전 11:10:27: GOARCH 설정 안됨;
오전 11:10:27: 내보내기 GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
오전 11:10:27: 내보내기 PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
11:10:27 AM: 버전 >&2;
오전 11:10:27: 내보내기 GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
11:10:27 AM: go1.12 linux/amd64 버전으로 이동
11:10:27 AM: 누락된 명령 설치
11:10:27 AM: 실행 디렉토리 확인
11:10:27 AM: 사용자 명령 실행: npm run build
오전 11:10:27: > [email protected] 빌드 /opt/build/repo
11:10:27 AM: > run-p 빌드:**
오전 11:10:28: > [email protected] build:app /opt/build/repo
11:10:28 AM: > npm run clean && gatsby 빌드
오전 11:10:28: > [email protected] clean /opt/build/repo
11:10:28 AM: > rimraf .cache 공개
11:10:32 AM: 환경 구성 사용: '프로덕션'
11:10:32 AM: 성공 열기 및 gatsby-configs 검증 — 0.059초
11:10:32 AM: 플러그인 로드 성공 — 0.454초
11:10:34 AM: PreInit에서 성공 — 1.665초
11:10:34 AM: 이전 빌드에서 html 및 css 파일 삭제 성공 — 0.008초
11:10:34 AM: 캐시 초기화 성공 — 0.011초
11:10:34 AM: gatsby 파일 복사 성공 — 0.035초
오전 11:10:34: PreBootstrap에서 성공 — 0.009초
11:10:51 AM: 성공 소스 및 변환 노드 — 17.231초
11:10:52 AM: 성공 구축 스키마 — 0.896초
오전 11:10:55: createPages 성공 — 2.772초
오전 11:10:55: createPagesStatefully 성공 — 0.062초
오전 11:10:55: PreExtractQueries에서 성공 — 0.006초
11:10:56 AM: 업데이트 스키마 성공 — 0.712초
11:10:56 AM: 구성 요소에서 쿼리 추출 성공 — 0.166초
11:10:57 AM: graphql 쿼리 실행 성공 — 1.068초 — 1460/1460 1368.43 쿼리/초
11:10:57 AM: 페이지 데이터 쓰기 성공 — 0.035초
11:10:57 AM: 리디렉션 데이터 쓰기 성공 — 0.001초
11:10:57 AM: PostBootstrap에서 성공 — 0.010초
11:10:57 AM: 정보 부트스트랩 완료 - 28.304초
오전 11:12:14: 프로덕션 JavaScript 및 CSS 번들 빌드 성공 — 76.329초
오전 11:12:14:
11:12:14 AM: gatsby-plugin-purgecss:
11:12:14 AM: 이전 CSS 크기: 305.33KB
오전 11:12:14: 새 CSS 크기: 305.33KB(-0.00%)
11:12:14 AM: ~0.00KB의 CSS 제거됨
오전 11:12:14:
11:12:23 AM: 오류 정적 HTML 빌드 실패
오전 11:12:23: 도움이 필요하면 HTML 빌드 디버깅에 대한 문서 페이지를 참조하십시오. https://gatsby.app/debug-html
오전 11:12:23: 48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
오전 11:12:23: 49 | }
오전 11:12:23: > 50 | }(창문));
오전 11:12:23: | ^^
오전 11:12:23: 51 |
오전 11:12:23:
11:12:23 AM: WebpackError: ReferenceError: 창이 정의되지 않았습니다.
오전 11:12:23:
오전 11:12:23: - index.js:50 Object../node_modules/youtube-iframe/index.js
오전 11:12:23: [lib]/[youtube-iframe]/index.js:50:2
오전 11:12:23:
11:12:23 AM: - 부트스트랩:19 __webpack_require__
오전 11:12:23: lib/webpack/ 부트스트랩:19 :1
오전 11:12:23:
오전 11:12:23: - MediaAutoTrack.js:15 Object../node_modules/@aws-amplify/analytics/lib/Providers/AmazonPersonalizeHelper/MediaAutoTrack.js
오전 11:12:23: [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/MediaAu toTrack.js:15:27
오전 11:12:23:
11:12:23 AM: - 부트스트랩:19 __webpack_require__
오전 11:12:23: lib/webpack/ 부트스트랩:19 :1
오전 11:12:23:
오전 11:12:23: - index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/Amazon PersonalizeHelper/index.js
오전 11:12:23: [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/index.js:7:10
오전 11:12:23:
11:12:23 AM: - 부트스트랩:19 __webpack_require__
오전 11:12:23: lib/webpack/ 부트스트랩:19 :1
오전 11:12:23:
오전 11:12:23: - AmazonPersonalizeProvider.js:52 Object../node_modules/@aws-amplify/analytics /lib/Providers/AmazonPersonalizeProvider.js
오전 11:12:23: [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeProvider.js:52:33
오전 11:12:23:
11:12:23 AM: - 부트스트랩:19 __webpack_require__
오전 11:12:23: lib/webpack/ bootstrap:19 :1
오전 11:12:23:
오전 11:12:23: - index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/index.js js
오전 11:12:23: [lib]/[@aws-amplify]/analytics/lib/Providers/index.js:7:35
오전 11:12:23:
11:12:23 AM: - 부트스트랩:19 __webpack_require__
오전 11:12:23: lib/webpack/ 부트스트랩:19 :1
오전 11:12:23:
오전 11:12:23: - index.js:33 Object../node_modules/@aws-amplify/analytics/lib/index.js
오전 11:12:23: [lib]/[@aws-amplify]/analytics/lib/index.js:33:10
11:12:24 AM: '사이트 구축' 단계 중 실패: 빌드 스크립트에서 0이 아닌 종료 코드 반환: 1
오전 11:12:23:
11:12:23 AM: - 부트스트랩:19 __webpack_require__
오전 11:12:23: lib/webpack/ 부트스트랩:19 :1
오전 11:12:23:
11:12:24 AM: 로깅 종료, 58개의 메시지 보류 중

내 서버 측에서 netlify를 사용하고 있습니다.

당신이 창 패키지를 사용하고 있지 않다고 확신한다면 아마도 그럴 것입니다.

webpack에서 빈 창을 정의해야 합니다.

매우 간단하지는 않지만 올바른 방향으로 이끌 것입니다.

https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack

이 문제가 왜 종료되었는지 잘 모르겠습니다. 사실 이 문제는 개츠비에 관한 한 가장 중요한 문제일 것이며, 이에 대한 전체 철학이 바뀌고 고쳐져야 할 것입니다.

브라우저와 SSR 로직이 결합된 것은 정말 안 좋은 일입니다. 개발 단계에서 한 버전의 코드를 실행하고 프로덕션 단계에서 분기한다는 사실은 말할 것도 없습니다. 이것은 정말 나쁘다. 왜 그런 빌드를 만들까요? 이 둘 사이의 유일한 차이점은 개발 및 예를 들어 소스 맵 등의 디버깅 기능을 활성화해야 한다는 것입니다. 이것은 실제로 Gatsby를 사용하는 것을 어렵고 매력적으로 만듭니다.

제 생각에는 이것을 다시 열고 이 문제의 우선 순위를 지정해야 합니다. 이 문제로 인해 사람들은 창에 의존하는 수천 개의 모듈을 말 그대로 포기하고 모든 모듈을 componentDidMount에서 가져올 수 있는 것은 아닙니다(예: 모듈과 같은 HOC).

동의하지 않지만 이것이 골칫거리입니다. 윈도우 변수 주변의 로직으로 작성된 라이브러리는 SSR 사용에 적합하지 않다고 주장할 수 있습니다. 해당 라이브러리 자체는 창이 정의되어 있고 SSR 모드에서 작동하는지 확인해야 합니다.

당신이 만들고 있는 더 깊은 요점에 대한 다른 의견은 없습니다. 그것은 유지 관리자에게 더 적합한 철학적 토론입니다.

모든 존경심을 가지고 당신이 쓴 것은 의미가 없습니다. "브라우저 전용" 라이브러리를 구축하는 사람이 창 개체가 있는지 확인하는 이유는 무엇입니까? 이 작업을 수행하는 전체 NPM 레지스트리에서 단일 라이브러리의 이름을 지정하거나 가리킬 수 있습니까? 아니면 사람들이 작성한 모든 라이브러리가 잘못 작성되었다는 말입니까?

아니면 사람들이 이것을 필요로 하는 "Gatsby"라는 프레임워크가 있다고 생각해야 합니까? 한쪽 또는 다른 쪽 끝에서 Gatsby를 사용할 수 있어야 하며 해당 끝은 완전히 분리되어야 합니다. 이것이 유일한 요점입니다. 그것에 대해 철학적인 것은 없습니다.

설계상 Gatsby는 정적 사이트 생성기입니다. 이를 수행하기 위해 수행하는 대부분의 작업은 컴파일 시간에 브라우저 외부에서 수행됩니다. 단순히 "클라이언트" 또는 "브라우저" 도구가 아닙니다.

서버 측 렌더링은 정의에 따라 "창"이 아닌 "서버" 측에서 수행됩니다.

Gatsby의 컴파일은 Webpack으로 이루어지며, webpack은 기본적으로 창 변수를 연결하지 않습니다. 내 경험에 따르면 웹팩에서 작동하도록 클라이언트 라이브러리를 조정하는 방법은 한 가지뿐입니다. 이로 인해 Gatsby 구성 자체가 "창"에 의존하는 모든 라이브러리를 수정하는 간단한 원샷 솔루션을 제공할 수 없게 됩니다.

FWIW 나는 도구의 어느 부분이 당신이하고 싶은 일을 방해하는지 논의하기 위해 도구의 부분을 분리하는 것이 합리적이라고 생각합니다.