Next.js Discord

Discord Forum

Nextjs + Phaser 3

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
Does anyone have experience mixing phaser and nextjs?
I'm getting ReferenceError: HTMLVideoElement is not defined seems like a SSR error, but I'm loading the phaser game on a client component, so I'm not sure

'use client'

import React, { useEffect, useState } from 'react'
import Phaser from 'phaser'

const PhaserExample= () => {

    useEffect(() => {
        let config = {
            type: Phaser.AUTO,
            parent: "phaser-example-canvas-container",
            width: 600,
            height: 300,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
        };

        let game = new Phaser.Game(config);

        return () => {
            console.log("destroying game!")
            game.destroy(true)
        }
    }, [])

    return (
        <></>
    )
}

export default PhaserExample


Next.js 13
Answered by Australian Freshwater Crocodile
const Game = dynamic(() => import("@/components/PhaserExample"))
Lazy Loading the component worked
src: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading
View full answer

1 Reply

Australian Freshwater CrocodileOP
const Game = dynamic(() => import("@/components/PhaserExample"))
Lazy Loading the component worked
src: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading
Answer