Error deploy on vercel in my webproject nextJS

55 Views Asked by At

I have a new project in next.JS in which I display a tiled map with phaserJS.

But when I deploy my project I get this error on vercel (on my localhost I have no problem)

here is my code on Home.js :

const Home = () => {
    const gameContainer = useRef(null);
    const gameInstance = useRef(null);
    const loadingMessage = useRef(null);
    const notify = (text) => toast(text);

    useEffect(() => {
        import('phaser').then(Phaser => {
            const SceneMain = require('../scenes/SceneMain').default;
            const config = {
                type: Phaser.AUTO, parent: gameContainer.current, width: "75%",
                height: "84%",
                scene: [SceneMain],
                physics: {
                    default: 'arcade', arcade: {}
                }
            };

            gameInstance.current = new Phaser.Game(config);
            gameContainer.current.style.borderRadius = '15px';
            gameContainer.current.style.overflow = 'hidden';
            gameContainer.current.addEventListener('click', () => {
                gameInstance.current.input.keyboard.enabled = true;
            });
            gameInstance.current.scene.scenes.forEach(scene => {
                scene.events.on('create', () => {
                    const mapWidth = 2208;
                    const mapHeight = 1408;

                    scene.cameras.main.setBounds(0, 0, mapWidth, mapHeight, true);
                    scene.cameras.main.setZoom(Math.min(gameInstance.current.scale.width / mapWidth, gameInstance.current.scale.height / mapHeight));
                    scene.cameras.main.centerOn(mapWidth / 2, mapHeight / 2);

                    loadingMessage.current.style.display = 'none';
                });
            });

            return () => {
                gameInstance.current.destroy(true);
            };
        });
    }, []);

and here is code in my sceneMain.js :

export class SceneMain extends Phaser.Scene {
    constructor() {
        super("SceneMain");
    }

    preload() {
        this.load.image("tiles", "/assets/tileset.png");
        this.load.tilemapTiledJSON('map', "/assets/othman_map.json");
        this.load.spritesheet('character', '/assets/perso.png', { frameWidth: 32, frameHeight: 32 });
    }
    
    create() {
        const map = this.make.tilemap({key: "map", tileWidth: 16, tileHeight: 16});
        const tileset = map.addTilesetImage("tiles1", "tiles");
        const layer = map.createLayer("Calque de Tuiles 1", tileset, 0, 0);
        const colision = map.createLayer("Collision", tileset, 0, 0)
        this.player = this.physics.add.sprite(785,655,"character").setFrame(5);
    ...
    }
    
    update() {
    ...
    }
}
export default SceneMain;

when i deploy on vercel i have this erreur : ReferenceError: HTMLVideoElement is not defined

01:11:39.365 | at Object.<anonymous> (/vercel/path0/node_modules/phaser/src/polyfills/requestVideoFrame.js:3:1) 01:11:39.366 | at Module._compile (node:internal/modules/cjs/loader:1256:14) 01:11:39.366 | at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) 01:11:39.366 | at Module.load (node:internal/modules/cjs/loader:1119:32) 01:11:39.367 | at Module._load (node:internal/modules/cjs/loader:960:12) 01:11:39.367 | at Module.require (node:internal/modules/cjs/loader:1143:19) 01:11:39.367 | at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28) 01:11:39.367 | at require (node:internal/modules/cjs/helpers:119:18) 01:11:39.367 | at Object.<anonymous> (/vercel/path0/node_modules/phaser/src/phaser.js:7:1) 01:11:39.368 | at Module._compile (node:internal/modules/cjs/loader:1256:14) 01:11:39.368 |   01:11:39.368 | > Build error occurred 01:11:39.368 | Error: Failed to collect page data for /scenes/SceneMain 01:11:39.368 | at /vercel/path0/node_modules/next/dist/build/utils.js:1258:15 01:11:39.368 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { 01:11:39.369 | type: 'Error' 01:11:39.369 | } 01:11:39.393 | Error: Command "npm run build" exited with 1

if you have any idea how to solve this error, I'd love to hear from you.

Thanks soo much in advance for your help!

i have trie to add this code in home.js but it's the same :

if (typeof HTMLVideoElement !== 'undefined') {

0

There are 0 best solutions below