Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

need SSR usage example

See original GitHub issue

I’m rendering my pages on server side and I found a problem that only occurs on first page render. When I’m trying to access a page with StarRating I get the following error:

Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined" found in
---> <StarRating>
          <Component> at ../src/components/Component.vue
             <App> at ../src/App.vue

Call stack gives much more info

ReferenceError: document is not defined
at o (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:116:1)
at r (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:100:1)
at t.exports (../node_modules/vue-star-rating/dist/webpack:/~/vue-style-loader/lib/addStylesClient.js:54:1)
at Object.e (../node_modules/vue-star-rating/dist/webpack:/src/star-rating.vue?3ff3:8:1)
at e (../node_modules/vue-star-rating/dist/webpack:/webpack/bootstrap 1d3fc18262fd606c10d8:19:1)
at VueComponent.r (../node_modules/vue-star-rating/dist/webpack:/src/star-rating.vue:2:1)

Due to vue-style-loader page you need to build server side files with target: 'node' to prevent this from happening.
After a short research I solved this problem by changing import to

import StarRating from 'vue-star-rating/src'

Maybe it’s worth adding in to prevent inexperienced users like me from this error

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:10
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

onlyureicommented, Oct 6, 2017

FYI for people using Nuxt and are ok with only rendering this component client-side, there is the <no-ssr> wrapper component since rc-7:

Add <no-ssr> component (from vue-no-ssr), it allows you to render component only for client-side, see example template on client side

bundaycommented, Feb 24, 2021

For nuxt, this worked for me:

  1. I created a rating.js under the plugins folder with the following content
import Vue from 'vue'
import StarRating from 'vue-star-rating'

Vue.component('star-rating', StarRating)
  1. In the plugins array in the nuxt.config.js file, I added { src: '~/plugins/rating.js', mode: 'client' }
  2. Then in my .vue component files, I called <star-rating> </star-rating>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Client-side vs. Server-side vs. Pre-rendering for Web Apps
An SSR solution is something we used to do a lot, many years ago, but tend to forget in favor of a client-side...
Read more >
What's Server Side Rendering and do I need it? - Medium
Welcome to SSR powered React application! ... a new express server instance, and letting it know we want to use the pug template...
Read more >
Learn SSR for NEXT.JS in 10 Minutes (Server Side Rendering ...
Want coding problems (with solutions!) delivered to your inbox daily!?Sign Up Here: Join the ...
Read more >
What is server-side rendering and how does it improve site ...
SSR increases complexity, which may or may not be worth it for you. You'll have to write universal code that runs both on...
Read more >
SSR vs SSG in Next.js – a practical overview for CTOs and devs
When to use SSR? SSR is recommended for apps in which you have to pre-render frequently updated data from external sources. This technique...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found