SSR ReferenceError: document is not defined

[biigpongsatorn]

SSR ReferenceError: document is not defined

[benjamin-richardson]

I got this to work in Nuxt by using lazy-loading of the component, as well as wrapping it in the <no-ssr> built-in component of Nuxt.

I have my globally registered component nuxt/components/common/Loader.vue:

<template>
  <no-ssr>
    <vue-element-loading :active="active" :is-full-screen="isFullScreen" spinner="spinner" color="#8d655a" />
  </no-ssr>
</template>

<script>
export default {
  name: 'Loader',
  components: {
    VueElementLoading: () => {
      if (process.client) {
        return import('vue-element-loading');
      }
    },
  },
  props: {
    active: { type: Boolean, default: false },
    isFullScreen: { type: Boolean, default: false },
  },
};
</script>

For my solution, I was already wrapping the component anyway as I want it to be used consistently across my project with only a couple options available.

[Sitronik]

Hi, @runyasak

Fixed build netlify with rollup-plugin-uglify. Please merge and publish 😉

[Sitronik]

up 😌

[eadortsu]

Has this issue been fixed.??
it is really needed for me

[Sitronik]

Has this issue been fixed.??
it is really needed for me

Hello, Yes of course but the creators of the repository still haven't done the merge.

I fixed in this PR

[eadortsu]

I just used your code version in your PR @Sitronik , it worked... thanks

[Sitronik]

I just used your code version in your PR @Sitronik , it worked... thanks

You are welcome, I am glad that i could help you