HTMLVideoElement is not defined error in Next.js

Phaser 3
1

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.

image
image853×134 11.2 KB

1 Like
2

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

3

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
4

Hi Mike,

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

Thanks

5

I have an error HTMLVideoElement is not defined when I run the prod command. Everything works in dev mode. I use ssr: false

import React from 'react';
import dynamic from 'next/dynamic';

const DynamicComponentWithNoSSR = dynamic(
    () => import('./game/index.jsx'),
    {ssr: false}
);

export default () => <DynamicComponentWithNoSSR/>;

Any ideas.

UPD: I found a solution for myself. I didn’t think that the scene class should be done separately from the page so that the text doesn’t consider it a page :slight_smile: