Next.js（React）+ Phaser：ReferenceError：navigator未定义。

Question

我正在尝试使用phaser和ion-phaser/react来在Next.js应用程序中构建带有游戏的页面。这是我的pages/game.js（使用此处的React示例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;

运行 next dev 并访问页面会出现以下错误：

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)

为什么navigator未定义？

这些是我在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",

- Filipe Aleixo

Answer 1

这个包可能不适用于服务器端渲染(SSR)。它似乎在没有检查浏览器API的可用性的情况下调用了navigator，并在服务器端抛出错误。

如果这个包是React组件，那么您可以尝试使用next/dynamic进行导入（使用ssr: false将其从SSR中排除）：

import dynamic from 'next/dynamic'

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

如果这不起作用，那么您需要使用常规的非Next.js动态import()来导入整个模块（在useEffect中可能）。

- Danila

Answer 2

我不得不像这样使用useEffect：

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

- user14185