v0.4 does not work or SSR

[frandiox]

Hi! First of all, thank you for this library. I've been using it for long before 0.4 and was working perfectly. I just updated to 0.4.7 and I'm getting "document is not defined" around this line: https://github.com/Lunrtick/vue-bulma-accordion/blob/master/dist/vue-bulma-accordion.umd.js#L283

I'm using this on Vuepress, which renders everything at build time using Node and obviously document object is not defined. A possible solution is wrapping bulma-accordion in <ClientOnly> so it doesn't render at build time, but then all the text shown in the accordion cannot be indexed by search engines. I guess this is related to Rollup but there should be a way to avoid calling undefined objects in SSR 🤔

Thanks!

[Lunrtick]

Hey frandiox, glad to hear that it's been helpful for you!

I have looked into this - it does seem like a problem with Rollup, as you suggested. The pertinent issue is here. There is a possible workaround, as documented here, though that seems pretty irritating to have to deal with.

I will give it some thought, and see if I can figure an alternative out - if you have any suggestions, I'd also love to hear them!

[HugoHeneault]

I had this issue too with nuxt. Made me downgrade to 0.3.3 which works great too! 🍻

[drbarto]

I also downgraded to 0.3.3, luckily we don't need the new features of 0.4.x yet. Any ETA when this issue could be resolved?

[jemjov41]

i had this issue too, did you using nuxt?,

i resolve this by adding BulmaAccordion and BulmaAccordionItem into plugins,

~plugins/vue-global-components.js file:

import {
    BulmaAccordion,
    BulmaAccordionItem
  } from 'vue-bulma-accordion'

Vue.component('BulmaAccordion', BulmaAccordion);  
Vue.component('BulmaAccordionItem', BulmaAccordionItem);"

and add it in nuxt.config.js

plugins:[
    {
      src: '~plugins/vue-global-component.js',
      ssr: false
    }]

last dont forget to remove local import at spesific file

[Lunrtick]

I've just published 0.5, which changes some implementation details and uses parcel instead of rollup. I don't use SSR much, but from my testing it seems to have fixed the problem (occasionally I saw an HTML mismatch during testing, couldn't figure out why).

I would love to get a hand from someone who uses SSR!

[HugoHeneault]

Hey there! So I'm using SSR and with 0.5.2 it's working fine. Awesome! 👏

With nuxt when you first load a page containing the accordion and initial-open-items it's opening on page ready (I think).

But when you navigate to the page with nuxt/vue rendering client side the items don't open.

Is it SSR related or shall I open another issue?

[HugoHeneault]

I also have the error:

The client-side rendered virtual DOM tree is not matching server-rendered content. 

What coud I do to help you?

[Lunrtick]

With nuxt when you first load a page containing the accordion and initial-open-items it's opening on page ready (I think).

But when you navigate to the page with nuxt/vue rendering client side the items don't open.

Is it SSR related or shall I open another issue?

It seems to be SSR related, so let's keep it here (:

[Lunrtick]

I also have the error:

The client-side rendered virtual DOM tree is not matching server-rendered content. 

What coud I do to help you?

When I got that error, I compared the client rendered html character by character with the SSR'd html - they seem to be identical. My intuition says I'm doing something that SSR doesn't like (maybe the inline styles or something), but I don't have any experience with it, so I don't know.

This Stackeroverflow answer may help with debugging the issue - I will look into it locally as well.