安装phaser-ui后script引入报错：Super expression must either be null or a function, not undefined

这个错误的核心原因是phaser-ui依赖的Phaser核心库未正确加载，或者组件继承的父类不存在，以下是具体解决步骤：

1. 保证Phaser核心库优先加载 #

phaser-ui是基于Phaser的扩展库，必须在它之前加载Phaser核心文件。如果用本地npm安装的文件，按如下顺序引入：

<!-- 先引入Phaser核心 -->
<script src="./node_modules/phaser/dist/phaser.min.js"></script>
<!-- 再引入phaser-ui -->
<script src="./node_modules/phaser-ui/dist/phaser-ui.min.js"></script>

如果用CDN，要确保两者版本兼容，比如：

<script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/phaser-ui@latest/dist/phaser-ui.min.js"></script>

2. 检查phaser-ui的浏览器适配性 #

phaser-ui默认可能是为模块化环境（Webpack/Vite）设计的，直接用script标签引入ES模块会导致依赖解析失败。可以：

• 下载phaser-ui的UMD构建版本（通常在dist目录下带umd或min.js后缀的文件）
• 用打包工具将phaser-ui和依赖打包成浏览器可直接运行的文件

3. 验证版本兼容性 #

查看phaser-ui的package.json中peerDependencies字段，确认它要求的Phaser版本，安装对应版本的Phaser再重新安装phaser-ui：

# 示例：若phaser-ui要求Phaser^3.70.0
npm install phaser@3.70.0
npm install phaser-ui

4. 确认组件使用时机 #

不要在Phaser场景初始化完成前实例化phaser-ui组件，确保代码在create或init生命周期钩子中调用：

class MyScene extends Phaser.Scene {
    create() {
        // 在此处创建phaser-ui组件
        const button = new PhaserUI.Button(this, 100, 100, 'btn-texture', () => {
            console.log('按钮点击');
        });
    }
}

内容的提问来源于stack exchange，提问作者alaamer