HTMLVideoElement is not defined error in Next.js

I made small game called spin wheels by using Next.js.
When runing the codes, there is a 500 error (HTMLVideoElement is not defined).
Is there someone who can solve this problem?
Thank you.

1 Like

This is usually a sign that Phaser shouldn’t be running on the server side. :slight_smile:

Hey! I also faced this issue. You need to make a separate Game component, where you import phaser library. Then just dynamically import it into the main component.

Game.tsx

import { Game as PhaserGame } from "phaser";
import gameConfig from "@/game";

export default function Game() {
    const parentEl = useRef<HTMLDivElement>(null);

    let [game, setGame] = useState<PhaserGame | null>(null);

    useEffect(() => {
      if (!parentEl.current) return;
  
      const newGame = new PhaserGame({ ...gameConfig, parent: parentEl.current, width: parentEl.current.offsetWidth, height: parentEl.current.offsetHeight });
      
      setGame(newGame);

      return () => {
        newGame?.destroy(true, true);
        console.log("🐲 DESTROY 🐲");
      };
    }, []);

    return (
        <div ref={parentEl} className="gameContainer w-screen h-1/2 block" />
    );
}

Page.tsx - component where you want to show your game.

'use client'
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
  () => import('@/components/Game'),
  { ssr: false }
);

export default function Home() {
  return (
    <main>
      <div className="absolute top-0 w-full h-full">
        <DynamicComponentWithNoSSR/>
      </div>
    </main>
  );
}

2 Likes

Hi Mike,

Do you have a repo with this?
What dependencies are you using here?

Thanks