Error when rendering `BackgroundVideo` component

[chricarp]

Hi all, as the title says I'm encountering a client side issue when rendering the BackgroundVideo component. This seems to be a problem correlated with a difference between what is rendered on the server and what is rendered on client.

The problem

Next gives this error:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'onError')

Call Stack
eval
node_modules/hls.js/dist/hls.mjs (24580:0)

Investigating in the console we can see this other error:

Warning: Extra attributes from the server: data-video
    at video
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@mux/mux-video-react/dist/index.mjs:8:407)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next-video/dist/components/players/background-player.js:17:9)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next-video/dist/components/video.js:24:9)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next-video/dist/components/background-video.js:15:11)
    at WrapBackgroundVideo (webpack-internal:///(app-pages-browser)/./src/components/WrapBackgroundVideo.tsx:14:11)
    at div
    at MotionComponent (webpack-internal:///(app-pages-browser)/./node_modules/framer-motion/dist/es/motion/index.mjs:49:65)
    at div
    at MotionComponent (webpack-internal:///(app-pages-browser)/./node_modules/framer-motion/dist/es/motion/index.mjs:49:65)
    at MotionConfig (webpack-internal:///(app-pages-browser)/./node_modules/framer-motion/dist/es/components/MotionConfig/index.mjs:32:25)
    at RootLayoutInner (webpack-internal:///(app-pages-browser)/./src/components/RootLayout.tsx:275:11)
    at RootLayout (webpack-internal:///(app-pages-browser)/./src/components/RootLayout.tsx:526:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:295:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:159:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:100:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:436:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:128:11)
    at RSCComponent
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:144:11)

The code

I use the BackgroundVideo component without embedding the content inside, I take care of putting it behind the content myself, I don't think this could create the issue (I even tried to use it just like the docs say, like using it to wrap my content that needs to be displayed over it, but it didn't change the error).

'use client'

import BackgroundVideo from 'next-video/background-video';
import landingVideo from '/videos/landing.mp4?thumbnailTime=0';
import clsx from 'clsx';

export function WrapBackgroundVideo({
  className,
}: {
  className?: string
}) {
  return (
    <BackgroundVideo
      src={landingVideo}
      className={clsx(
        'next-video-container-absolute -z-50 -top-14 w-full',
        className
      )}
      disableTracking
    />
  )
}

Also, I notice that when loading the page, the thumbnail appears to be out of place before the video is loaded.

Conclusion

I'm trying to understand what I'm doing wrong on this. If anyone can help it would be greatly appreciated.

Thanks!

[luwes]

thanks for the report!

1. I've seen the first hls.js onError bug as well, luckily it's only appearing in next dev. In production there is no error.

2. The hydration data-video mismatch I haven't seen, it's not an attribute next-video sets.

3. The out of place thumbnail is difficult to debug, do you have an example online? maybe it's the CSS classes. It's not an issue in our demo: https://next-video-demo.vercel.app/background-video

[chricarp]

Hi @luwes, thanks again for responding.

I've resolved the issue about the out of place thumbnail, it was my fault on how I was trying to "retrofit" the next-video component without doing too much refactor. At the end with a bit of rework I was able to completely adapt it to my website and have the thumbnail in the right position while the video is loading.

About the actual issue reported, as you said, I'm also seeing the errors (both of them) only on dev. When I'm building and running of a prod build the errors do not show up anymore.

Is there a plan to fix this errors from showing up also on next dev? If not, do you have any idea on why it could be happening? I would like to help getting this fixed since my company website will be using this library 😀

Again, thank you so much for your help!

[babyPrince]

Happening with import MuxVideo from '@mux/mux-video-react' during dev only as well. Exactly the same error

[daniel-bogart]

Getting the same issue. But only when I use BackgroundVideo. NextVideo works fine.

Next.js (14.2.3)

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'onError')

Call Stack
eval
node_modules/hls.js/dist/hls.mjs (24569:1)

[luwes]

fixed in https://github.com/video-dev/hls.js/issues/6201 we'd need to upgrade hls.js in mux-video-react