Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error: [vds]: expected <audio> or <video> in default slot. Received: <DIV>. #674

Closed
simon-olsen opened this issue Oct 17, 2022 · 6 comments
Closed

Error: [vds]: expected <audio> or <video> in default slot. Received: <DIV>. #674

simon-olsen opened this issue Oct 17, 2022 · 6 comments

Comments

@simon-olsen
Copy link

Been testing out Vidstack with one of my Next.js projects and whether I try to use the <Video> or <Hls> element, I get the following error:

Error: [vds]: expected <audio> or <video> in default slot. Received: <DIV>.

I also tried a fresh install of Next.js and I get the same thing.

Steps to reproduce:

  1. Install a fresh Next.js app locally with yarn create next-app --typescript
  2. Update the index.tsx to the following content...
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { Hls, Media } from "@vidstack/player-react";
import "@vidstack/player/hydrate.js";

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Vidstack test</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Vidstack test</h1>
        <Media>
          <Hls controls poster="https://media-files.vidstack.io/poster.png">
            <video
              controls
              src="https://media-files.vidstack.io/hls/index.m3u8"
              preload="none"
              data-video="0"
            />
          </Hls>
        </Media>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home

Other things I've tried:

  1. Making the component a stand-alone component and dynamically importing it
import dynamic from "next/dynamic";

const VidstackPlayer = dynamic(() => import("components/PlayerVidstack"), {
  ssr: false,
});

The HLS stream works, but not without closing the error on the screen first.

Any ideas on how I can solve this?
@mihar-22
Copy link
Member

Hey @simon-olsen!

I'm not entirely sure why that error is occurring but we're aware of multiple issues with the React integration at the moment. We're currently working on tooling that will enable us to completely rebuild the React integrations and have proper SSR support. It's mostly a hack right now to get Web Components with Lit to SSR and integrate with React.

I recommend holding out a little longer for our new integrations before giving Vidstack a real shot. Sorry your first experience was rough! I can ping you here when they're ready or you can close the issue out and wait for a Twitter/Discord announcement.

@simon-olsen
Copy link
Author

OK thanks for letting me know @mihar-22. Keen to help out with any testing of future releases.

@ScottAgirs
Copy link

I'm holding my breath on this too ")

@MokDevelopment
Copy link

:) are there any updates ?

@mihar-22
Copy link
Member

mihar-22 commented Jan 22, 2023 •
edited
Loading

Massive React updates dropping tomorrow - including out of the box Next.js support (SSR + React 18)

@mihar-22
Copy link
Member

Happy to report the latest release has focused on bringing React 18 and Next.js 13 support!

Release notes: #722

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ScottAgirs @mihar-22 @simon-olsen @MokDevelopment