nuxt document is not defined

Nuxt에서 component를 표시할 때 생기는 문제다. 처음 로딩 했을 때는 정상적으로 컴포넌트가 정상적으로 보이는데 새로고침을 하는 경우 “document is not defined” 라는 에러 메시지가 출력되고 정상적으로 페이지가 표시되지 않는다.

구글링한 결과 stackoverflow에서 다음과 같은 답변을 확인할 수 있었다.

It's a common error when you start a Nuxt project ;-)

The Choices.js lib is available only for client-side! So Nuxt tried to renderer from server-side, but from Node.js window.document doesn't exist, then you have an error.
nb: window.document is only available from the browser renderer.

Since Nuxt 1.0.0 RC7, you can use <no-ssr> element to allow your component only for client-side.

<template>
  <div>
    <no-ssr placeholder="loading...">
      <your-component>
    </no-ssr>
  </div>
</template>
take a look at the official example here: https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue
https://stackoverflow.com/questions/46058544/document-is-not-defined-in-nuxt-js

Leave a Reply