NextJS 13.5.4 canvas duplicate with PhaserJS

[golden birch]

I'm using NextJS 13.54 with PhaserJS, the canvas now rendered twice and the game scene become looping instance, but when I downgrade to NestJS 13.4.19 everything is normal.

[acoustic hare]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[golden birch]

this with NextJS 13.5.4 :

and this with NextJS 13.4.19 :

[half jay]

I tried using Phaser with nextjs 13 once already and it worked fine. When I get home I will check what version I was using

In the meanwhile can you show how you're implementing it?

Because I created a "client?" component and loaded it using next/dynamic.
Only way it worked without problems

Oh nvm, i think you saw my answer I posted in the phaser server 😅

[half jay]

I was in version 13.4.12 when I tried and worked

[half jay]

Answer:

How to run phaser in next.js 13:
Create a Game component that creates the Phaser.Game instance, and return it with the game container:
return <div id='game-container'></div>

in your page (where you want to import the game component, you use Lazy Loading (https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to import the component
const Game = dynamic(() => import("@/components/Game"))

How to solve duplicate canvas problem:

In next.js 13.4 Strict mode was enabled by default, making things like useEffect run twice
So you need to disable Strict mode: https://nextjs.org/docs/app/api-reference/next-config-js/reactStrictMode

Example of the game component:

'use client'

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

import Phaser from 'phaser'
import HelloWorldScene from './scenes/HelloWorldScene'

const Game = () => {

    const [game, setGame] = useState<Phaser.Game | undefined>()

    useEffect(() => {
        const config = {
            type: Phaser.AUTO,
            parent: "game-canvas-container",
            width: 1920,
            height: 1080,
            scale: {
                mode: Phaser.Scale.FIT,
            },
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: [HelloWorldScene]
        };

        const game = new Phaser.Game(config);
        setGame(game);

        return () => {
            game?.destroy(true)
        }
    }, [])

    return (
        <div id='game-canvas-container'></div>
    )
}

export default Game

[acoustic hare]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1161602310426869780 message)