SSR ReferenceError: document is not defined

Sitronik commented 3 years ago

Hi everyone I faced problem in vue ssr project When I import vue-element-loading I get this error in ssr:

ReferenceError: document is not defined
    at /Users/denis/Documents/projects/project-ssr/node_modules/vue-element-loading/node_modules/vue-runtime-helpers/inject-style/browser.js:6:14
    at /Users/denis/Documents/projects/project-ssr/node_modules/vue-element-loading/lib/vue-element-loading.min.js:6:84
    at Object.<anonymous> (/Users/denis/Documents/projects/project-ssr/node_modules/vue-element-loading/lib/vue-element-loading.min.js:6:160)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Module._compile (/Users/denis/Documents/projects/project-ssr/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Object.newLoader [as .js] (/Users/denis/Documents/projects/project-ssr/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at r (/Users/denis/Documents/projects/project-ssr/node_modules/vue-server-renderer/build.dev.js:9315:16)
    at eval (webpack-internal:///vue-element-loading:1:18)
    at Object.vue-element-loading (main.js:1566:1)
    at __webpack_require__ (main.js:21:30)
    at eval (webpack-internal:///../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js?!./vue/blog/index.vue?vue&type=script&lang=js&:14:49)

And in client: 500 | Internal Server Error

Fixed it all, please merge and publish to npm Made the module even better I hope it will not be difficult for you to allocate a few minutes for this Thanks

Sitronik commented 3 years ago

Hi, @runyasak

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

Sitronik commented 3 years ago

up 😌

eadortsu commented 3 years ago

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

Sitronik commented 3 years ago

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 commented 3 years ago

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

Sitronik commented 3 years ago

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

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

benjamin-richardson commented 2 years ago

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.

biigpongsatorn / vue-element-loading

SSR ReferenceError: document is not defined #46