Getting warnigns and errors with Node@v16.17.0, Nuxt@3.0.0-rc.11 and vue-responsive-video-background-player@2.3.1

[fguerzoni]

Thank you for this great component.
I was evaluating it in a minimal project. It works but I got some errors running the DEV version (yarn dev) that I would like to solve before moving on.

This is my App.vue, videos and images are in the public folder :

<template>
  <video-background
    src="/videos/roadster-loop-imperial.mp4"
    overlay="linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(251, 148, 158, 0.22), rgba(251, 148, 158, 0.42))"
    :sources="[
        {src: '/videos/accessories-hero-desktop.mp4', res: 991, autoplay: true},
        {src: '/videos/power-hero-mobile.mp4', res: 575, autoplay: true, poster: '/images/hero-mobile@2.jpg'}
    ]"
    style="max-height: 400px; height: 100vh;"
  >
    <div class="d-flex justify-content-center align-items-center h-50 px-2">
        <h4
            class="text-white text-center d-md-none"
            style="font-weight: 600;"
        >
            Vue Responsive Background Player
        </h4>
        <h1
            class="text-white d-none d-md-block"
            style="font-weight: 600;"
        >
            Vue Responsive Background Player
        </h1>
    </div>
  </video-background>
</template>

and this is my package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.11"
  },
  "dependencies": {
    "vue-responsive-video-background-player": "^2.3.1"
  }
}

Provided that I'm using Nust3, I've also created as suggested in the README the video-bg.client.ts file in the plugins folder.

1. in the console, when I load the page in chrome the first time, I get:

[Vue warn]: Failed to resolve component: video-background
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.

2. In the console, when I reload the page in chrome:

 ERROR  [unhandledRejection] Cannot set headers after they are sent to the client                                                                                                                   07:02:42
  at new NodeError (node:internal/errors:387:5)
  at ServerResponse.setHeader (node:_http_outgoing:603:11)
  at sendError (node_modules/h3/dist/index.mjs:72:13)
  at nodeHandler (node_modules/h3/dist/index.mjs:550:15)

3. In the chrome console:

[Vue warn]: Hydration node mismatch:
- Client vnode: section 
- Server rendered DOM: <!---->  
  at <VideoBackground src="/videos/roadster-loop-imperial.mp4" overlay="linear-gradient(0deg, rgba(0, 0, 0, 0.88), rgba(251, 148, 158, 0.22), rgba(251, 148, 158, 0.42))" sources= (2) [{…}, {…}]  ... > 
  at <App key=1 > 
  at <NuxtRoot>

4. again in the chrome console

runtime-core.esm-bundler.js:4593 Hydration completed but contains mismatches.
hydrate2 @ runtime-core.esm-bundler.js:4593
mount @ runtime-core.esm-bundler.js:4421
app.mount @ runtime-dom.esm-bundler.js:1625
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60

I really don't know how to solve those issues,
please give me a hint
regards

[pmochine]

#8 (comment) Have you tried this solution?

Edit: Ok I'm sorry you have.

I wonder, could you perhaps create a minimalistic version of your project with the bare minimum and upload this to github, so I could download it and work on it?

[fguerzoni]

funnel.zip
Thank you for the quick reply.
Attached you'll find the project that was already minimalistic.
Regards

[daliborjelinek]

Hi, I currently facing the same issue. Did you manage to solve that somehow?

[fguerzoni]

No, sorry. I've quit Nuxt in the meanwhile for other reasons
But I'm still curious about the solution.
Regards

[Ashrakk]

I have the same issue! cannot find a solution at the moment. :/ the solution might be the plugin itself OR.. in Nuxt.. i have a bare minimum implementation too, i can see the video and it works in a development environment, but i still get the warning and errors

[Ashrakk]

This fixed the issue.. lol

Add <ClientOnly> tags before video-background tags in Nuxt. apparently, using .client in the file extension is not enough

Example:

<template>
   <ClientOnly>
       <video-background 
       src = "example.mp4"
       >
       <h1 style="color: white;">Hallo welcome!</h1>
       </video-background>
   </ClientOnly>
</template>

EDIT:

I also had it to reappear after some days of development.. dont know the reason but, this also fixed the problem on the define of the plugin, i had to add components: { 'VideoBackground' }:

import { defineNuxtPlugin } from "#app";
import { Plugin } from "vue-responsive-video-background-player";

export default defineNuxtPlugin((nuxtApp) => 
{
  nuxtApp.vueApp.use(Plugin);
  components: {
      'VideoBackground'
  };
});

[william-seaton]

Adding ClientOnly also fixed it for me, it appears the extension isn't working.