Next.js (React) + Phaser: ReferenceError: navigator is not defined

Question

I'm trying to use phaser along with ion-phaser/react to build a page with a game in a Next.js app. This is my pages/game.js (using the React example from here https://github.com/proyecto26/ion-phaser):

import React, { Component } from 'react'
import Phaser from 'phaser'
import { IonPhaser } from '@ion-phaser/react'

class App extends Component {
  state = {
    initialize: false,
    game: {
      width: "100%",
      height: "100%",
      type: Phaser.AUTO,
      scene: {}
    }
  }
  render() {
    const { initialize, game } = this.state
    return (
      <IonPhaser game={game} initialize={initialize} />
    )
  }
}

export default App;

Running next dev and visiting the page gives the following error:

ReferenceError: navigator is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
init
file:///C:/git_projects/game/node_modules/phaser/src/device/OS.js (69:14)
Object.<anonymous>
file:///C:/git_projects/game/node_modules/phaser/src/device/OS.js (186:18)
Module._compile
internal/modules/cjs/loader.js (1063:30)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1092:10)
Module.load
internal/modules/cjs/loader.js (928:32)
Function.Module._load
internal/modules/cjs/loader.js (769:14)
Module.require
internal/modules/cjs/loader.js (952:19)
require
internal/modules/cjs/helpers.js (88:18)
Object.<anonymous>
file:///C:/git_projects/floam/node_modules/phaser/src/device/index.js (32:9)
Module._compile
internal/modules/cjs/loader.js (1063:30)

Why is navigator not defined?

These are my relevant package versions in package.json:

"next": "^9.5.5",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"phaser": "^3.55.2",
"@ion-phaser/react": "^1.3.0",

You seem to be in the situation where importing the package crashes the server, which is the one described in this question. Yours is older but the other answer is clearer about the underlying issue: a crash happening as soon as you import the module server-side. I've crafted a complete answer covering all use situations there: stackoverflow.com/a/77556387/5513532 — Eric Burel
– Eric Burel, Commented Dec 28, 2023 at 14:02
Does this answer your question? "window not defined" or "document not defined" when importing module in Next.js — Eric Burel
– Eric Burel, Commented Dec 28, 2023 at 14:02

Danila · Accepted Answer · 2021-07-02 14:28:32Z

4

Probably this package is not suitable for SSR. It seems like it calls navigator without checking availability of the browser api and it throws an error on server side.

If this package is React component then you can try to use next/dynamic to import it (use ssr: false to exclude it from SSR):

import dynamic from 'next/dynamic'

const Phaser = dynamic(
  () => import('@ion-phaser/react'),
  { ssr: false }
)

If this does not work then you need to use regular non-Next.js dynamic import() to import the whole module (in useEffect probably)

answered Jul 2, 2021 at 14:28

Danila

19k2 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user14185 · Accepted Answer · 2022-02-13 15:41:43Z

2

I had to use useEffect, like so:

useEffect(async () => (window.Phaser = await import(`phaser`)), []);

answered Feb 13, 2022 at 15:41

user14185

493 bronze badges

Collectives™ on Stack Overflow

Next.js (React) + Phaser: ReferenceError: navigator is not defined

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related