Gatsby은 Jamstack 앱용으로 사전 제작된 마크업을 만드는 데 사용할 수 있는 가장 인기 있는 정적 사이트 생성기 중 하나입니다. 개발자 커뮤니티의 삶을 편안하게 만들어주는 수많은 플러그인 생태계를 제공하는 React 기반 프레임워크입니다. 저는 몇 년 동안 Gatsby를 사용해 왔으며 몇 가지 결함을 제외하고는 Gatsby에 대한 경험이 매우 좋습니다.

우리는 내가 직면했고 운 좋게도 그에 대한 합리적인 해결책을 찾은 그러한 결함에 대해 이야기할 것입니다. 유용하게 사용하시길 바랍니다.

'창이 정의되지 않음' 오류는 무엇입니까?

두 가지 환경에서 Gatsby 기반 애플리케이션을 실행할 수 있습니다.

gatsby develop : 핫 리로딩이 가능한 개발 환경입니다. 이 환경에서는 localstorage,와 같은 모든 브라우저별 API 또는 window, document, 등과 같은 전역 API가 잘 작동합니다.

gatsby build : 배포 가능한 아티팩트를 생성하기 위해 응용 프로그램을 빌드하는 환경입니다. gatsby serve 명령을 사용하여 배포 가능한 아티팩트에서 로컬로 앱을 실행할 수도 있습니다. development 환경과 달리 build 환경은 nodejs 를 기반으로 합니다.

nodejs 환경에는 window , document 등과 같은 브라우저 전역이 없습니다. 따라서 소스 코드에 이에 대한 참조가 있는 경우 window is not defined 오류와 함께 빌드 실패가 발생할 가능성이 더 큽니다.

Please note: You may also face this error when you use a client-side library(maybe, an npm) that contains a reference to window, document, etc.

'창이 정의되지 않음' 오류를 수정하는 방법은 무엇입니까?

이 오류를 수정/무시하는 방법에는 여러 가지가 있습니다. 자신에게 가장 적합한 것을 사용하는 것이 좋습니다.

창이 정의되어 있는지 확인

브라우저 전역 객체window가 정의되어 있는지 확인하고 이를 기반으로 관련 코드 블록을 실행할 수 있습니다.

const isBrowser = typeof window !== "undefined"

변수 isBrowser는 환경에서 window 개체를 사용할 수 있는지 확인하는 데 도움이 됩니다. 이를 사용하여 브라우저의 로컬 저장소에서 항목을 가져오는 메서드를 확인하고 호출해 보겠습니다.

export const isAuthenticated = () => {
  if (!isBrowser) {
    return;
  }

  return window.localstorage.getItem("isLoggedIn") === "true"
}

다음과 같이 간단한 util 함수로 작성하는 것도 고려할 수 있습니다.

// utils.js

export const isBrowser = () => typeof window !== "undefined" 

그런 다음 다른 곳에서 사용하십시오.

import { isBrowser } from './utils'; 

if (!isBrowser) {
    return;
}

// ... other code

useEffect 후크 또는 componentDidMount 메소드 사용

Gatsby는 React 기반 프레임워크입니다. 문제가 있는 코드가 구성 요소의 렌더링 기능에 있는 경우 해당 코드를 useEffect 후크 또는 componentDidMount 수명 주기 메서드로 이동합니다. 브라우저에 있지 않으면 코드가 실행되지 않도록 합니다.

구성 수준에서 처리

구성 수준에서 이 오류를 수정/무시할 수도 있습니다. 이 솔루션은 window 개체에 따라 타사 모듈/라이브러리/npms에 더 적합합니다. webpack 구성을 사용자 정의하여 서버 렌더링 중에 이러한 모듈을 더미 모듈로 교체할 수 있습니다.

그렇게 하려면 gatsby-node.js 파일을 열고 파일 끝에 다음을 추가하십시오.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /offending-module/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

단어offending-module를 실제 모듈 이름으로 바꿔야 합니다. 예를 들어 Gatsby와 함께 auth0을 사용하는 경우 위 구성에서 모듈 이름을 auth0-js로 언급할 수 있습니다. Webpack의 null 로더를 사용하여 빌드 중에 효과적으로 무시합니다auth0-js.


이 기사가 도움이 되었기를 바랍니다. 이 기사가 마음에 들었거나 도움이 되었으면 연결합시다. 공유 생각, 팁 및 코드 사례에서 저를 찾을 수 있습니다. 당신은 또한 좋아할 수 있습니다,

JAMstack for All: An Introduction

JAMstack vs traditional monolithic workflow

What is a Static Site Generator and how to select one?

How to build a serverless app with Gatsby, Netlify and FaunaDB

추신 나는 커피 ☕를 좋아합니다.