Nuxt.js中使用vue-star-rating组件时遭遇document is not defined错误的求助

Hey there, let's work through that frustrating document is not defined error you're hitting with vue-star-rating in your Nuxt.js review page. I've looked over your code and spotted a few potential issues—here's how to resolve them:

Why This Error Happens #

vue-star-rating relies on browser-specific APIs like document which don't exist during Nuxt's server-side rendering (SSR) phase. Even with <client-only>, if the component is imported/registered on the server, it'll still try to access document and throw the error.

Step 1: Correct Component Import/Registration #

Let's make sure the StarRating component is only loaded on the client side. Try one of these approaches:

Option A: Dynamic Import in Component #

Replace your static import with a dynamic client-side import in your component's components section:

export default {
  components: {
    // Dynamically import only on client
    StarRating: () => import('vue-star-rating').then(m => m.default)
  },
  // ... rest of your code
}

Keep wrapping the component in <client-only> in your template:

<client-only>
  <star-rating v-model="rating"></star-rating>
</client-only>

Option B: Fix the Plugin Registration #

Your plugin file has a small issue—vue-star-rating is a component, not a Vue plugin, so use Vue.component() instead of Vue.use():

// plugins/vue-star-rating.js
import Vue from 'vue'
import StarRating from 'vue-star-rating'

// Register as a global component
Vue.component('StarRating', StarRating)

Your nuxt.config.js entry is correct, but double-check it's in the plugins array:

export default {
  plugins: [
    { src: '~/plugins/vue-star-rating.js', mode: 'client' }
  ]
}

Step 2: Check for Other SSR Conflicts #

If the error still persists, try wrapping the component registration in a process.client check to ensure it only runs in the browser:

export default {
  data() {
    return { /* your data */ }
  },
  mounted() {
    if (process.client) {
      const StarRating = require('vue-star-rating').default
      this.$options.components.StarRating = StarRating
    }
  },
  // ... rest of your code
}

Bonus: Fix Backend Route Issues #

I noticed a couple of bugs in your Express review routes that might cause issues later:

1. Extra comma in GET route:

   // Remove the trailing comma in the URL
   router.get('/reviews/:productID', async(req, res) => {
     // ... rest of your code
   })
   

2. Incorrect Product.update syntax:
   Your current update call won't link the review to the product. Replace it with:

   // Push the new review ID to the product's reviews array
   await Product.findByIdAndUpdate(req.params.productID, {
     $push: { reviews: review._id }
   })
   

Give these steps a try—most likely the dynamic import or corrected plugin registration will fix the document is not defined error. Let me know if you run into any other snags!

内容的提问来源于stack exchange，提问作者Edin Osmic