search

antonreshetov / vue-ssr-boilerplate

Vue SSR Boilerplate - Vuex & vue-router, server-side data pre-fetching, docker
MIT License
90 stars 11 forks source link

document is not defined #18

Open matheusliraofficial opened 3 years ago

matheusliraofficial commented 3 years ago

I'm struggling with this issue when I try to load my project in the browser.

error during render : /favicon.ico ReferenceError: document is not defined at addStyle (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:3180:22) at addStylesToDom (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:3164:20) at addStylesClient (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:3118:3) at Object.8e2e (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:5849:14) at webpack_require (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:30:30) at Object.dd71 (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:8991:509) at webpack_require (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:30:30) at Module.fb15 (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:13077:75) at __webpack_require__ (/Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:30:30) at /Users/matheuslira/IdeaProjects/ingresso-prime-ssr/node_modules/v-calendar/lib/components/date-picker.umd.js:94:18

irakliShengelia commented 3 years ago

Solution for NUXT

This is happening because Vcalendar is not meant to be rendered on the server side. At least that's what I've read.

What solved the issue for me was:

Step 1. Add a plugin in {ROOT_DIRECTORY}/plugins/vcalendar.js with following contents:

import Vue from 'vue'
import VCalendar from 'v-calendar'

// Use v-calendar & v-date-picker components
Vue.use(VCalendar, {
  // Options here
})

Step 2. Include the newly created plugin in the {ROOT_DIRECTORY}/nuxt.config.js as follows:

 plugins: [
    // Any Other Plugins Here
    //Make sure to specify ssr: false, this disables the plugin in server side rendering
    { src: '~/plugins/vcalendar.js', ssr: false}
  ],

This solved a similar issue for me

matheusliraofficial commented 3 years ago

This solution is only for nuxt.js

irakliShengelia commented 3 years ago

This solution is only for nuxt.js

Sorry, I was actually having a same issue on Nuxtjs and I was looking for a solution. Once I found it, just had a little brainfart and thought this was in the nuxt repository 😁 My apologies.