# Error when i build my code in NextJS

**URL:** <https://phaser.discourse.group/t/error-when-i-build-my-code-in-nextjs/13946>\
**Category:** Phaser 3\
**Created:** [February 2, 2024, 7:19pm UTC](https://phaser.discourse.group/t/error-when-i-build-my-code-in-nextjs/13946 "2024-02-02T19:19:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigdata](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bigdata](https://phaser.discourse.group/u/bigdata)\
**Post date:** [February 2, 2024, 7:19pm UTC](https://phaser.discourse.group/t/error-when-i-build-my-code-in-nextjs/13946/1 "2024-02-02T19:19:28Z")

</div>

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 :

```javascript
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 :

```javascript
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 :

```javascript
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;

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 2, 2024, 9:16pm UTC](https://phaser.discourse.group/t/error-when-i-build-my-code-in-nextjs/13946/2 "2024-02-02T21:16:49Z")

</div>

👋

> [@bigdata](#):
>
> `ReferenceError: HTMLVideoElement is not defined`

This is usually a sign that you need to turn off server-side rendering. 🙂

---

<div class="post-metadata">

**Author:** ![bigdata](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bigdata](https://phaser.discourse.group/u/bigdata)\
**Post date:** [February 3, 2024, 7:58pm UTC](https://phaser.discourse.group/t/error-when-i-build-my-code-in-nextjs/13946/3 "2024-02-03T19:58:20Z")

</div>

but i use this project in pages in server NextJS

---

<div class="post-metadata">

**Author:** ![bigdata](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@bigdata](https://phaser.discourse.group/u/bigdata)\
**Post date:** [February 3, 2024, 10:00pm UTC](https://phaser.discourse.group/t/error-when-i-build-my-code-in-nextjs/13946/4 "2024-02-03T22:00:23Z")

</div>

it is not possible to use phaser on nextJS pages ?  
while the pages are on the frontend in nextJS !

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 3, 2024, 10:39pm UTC](https://phaser.discourse.group/t/error-when-i-build-my-code-in-nextjs/13946/5 "2024-02-03T22:39:22Z")

</div>

Turn it off for the Phaser game component.

> **[Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c)**
>
> How to disable SSR for Non-SSR Friendly Components in Next.js