I have a new project in next.JS in which I display a tiled map with phaserJS.
But when I build my project I get this error :
npm run build :
> sneakers-world@0.1.0 build
> next build && next export
▲ Next.js 14.1.0
- Environments: .env
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
Collecting page data .ReferenceError: HTMLVideoElement is not defined
at Object.<anonymous> (C:\Users\utilisateur\WebstormProjects\SneakersWorld\node_modules\phaser\src\polyfills\requestVideoFrame.js:3:1)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at mod.require (C:\Users\utilisateur\WebstormProjects\SneakersWorld\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:176:18)
at Object.<anonymous> (C:\Users\utilisateur\WebstormProjects\SneakersWorld\node_modules\phaser\src\phaser.js:7:1)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
> Build error occurred
Error: Failed to collect page data for /scenes/SceneMain
at C:\Users\utilisateur\WebstormProjects\SneakersWorld\node_modules\next\dist\build\utils.js:1258:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
}
Collecting page data .
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;
