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') {