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

如何解决Next.js (React) + Phaser: ReferenceError: navigator is not defined

我正在尝试使用 phaser 和 ion-phaser/react 在 Next.js 应用程序中构建包含游戏的页面。这是我的 pages/game.js（使用此处 https://github.com/proyecto26/ion-phaser 中的 React 示例）：

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",

解决方法

可能这个包不适合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 中）