search

redxtech / vue-plyr

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.
Other
769 stars 136 forks source link

Nuxt SSR - The client-side rendered virtual DOM tree is not matching server-rendered content #442

Open vin-ni opened 3 years ago

vin-ni commented 3 years ago

I get that error when using plyr in a component.

Unfortunately this forces a full client side render of the page. Any ideas how this could be fixed?

Full Error: [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

My implementation:

    <div v-if="videoplayer" class="plyr-video-wrapper">
      <vue-plyr ref="plyr">
        <video controls crossorigin playsinline :data-poster="poster">
          <source :src="videoHighRes.url" type="video/mp4" />
        </video>
      </vue-plyr>
    </div>

Thank you!

zpzyyzp commented 3 years ago

https://github.com/redxtech/vue-plyr/issues/443#issuecomment-895682966 Maybe this will help you.

vin-ni commented 3 years ago

I will test it. Thanks!

vin-ni commented 2 years ago

<client-only> solves it, but is rather a hack i believe. How could I do true ssr? It seems it used to work some time. The demos are also broken though.

lustremedia commented 2 years ago

I ran into the same issue with the newer 7.0 version. 6 was not giving me that error, plus the css build process is not working, so I am just not going to use this module any longer ... :-(