Phase 3 with Typescript: Error “Property ‘rexUI’ does not exist on type ‘Scene’”

[dtturcotte]

@rexrainbow I have a question regarding the original post in this thread related to RexUIPlugin with Typescript: “Property ‘rexUI’ does not exist on type ‘Scene’” - the issue is in the first code block listed below.

Versions

Phaser: 3.55.2
Typescript: 4.6.4
Package Manager: Webpack v4.31.0

EDIT: RexUI seems to work if I use it directly in the scene, but if I pass the scene to another instantiated class, let's say npc.ts (below), it doesn't.

Code

npc.ts (where RexUI is used):

import 'phaser'

class Npc extends Phaser.Physics.Arcade.Sprite {
    public scene: Phaser.Scene

    constructor(scene: Phaser.Scene, x: number, y: number, texture: string, name: string) {
        super(scene, x, y, texture)
        this.scene = scene
        this.scene.add.existing(this)
        this.scene.physics.add.existing(this)
        this.addTooltip()
    }

    addTooltip() {
	var content = `[area=Phaser]Phaser[/area] is a [area=fast]fast[/area], free, ...`
	this.scene.input.setTopOnly(false)
        const GetValue = Phaser.Utils.Objects.GetValue
        var createTextBox = function(scene: Phaser.Scene, x: number, y: number, config: any) {
            var wrapWidth = GetValue(config, 'wrapWidth', 0)
            var fixedWidth = GetValue(config, 'fixedWidth', 0)
            var fixedHeight = GetValue(config, 'fixedHeight', 0)
            // ISSUE HERE: "Property 'rexUI' does not exist on type 'Scene'
            var textBox = scene.rexUI.add.textBox({
                ...
            })
        }
        ...
    }
    ...
}

exploration.ts (Scene)

import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js'
import Npc from '../sprites/npc'

class ExplorationScene extends Phaser.Scene {
    public rexUI: UIPlugin

    constructor() {
        super('exploration-scene')
    }

    preload() {}

    create() {
        let npcs = ['npc'].map(npcToLoad => {
			return new Npc(this, 400, 300, '', npcToLoad)
		})
	    NpcsController.setNpcs(npcs)
     }
}

game.ts:

import 'phaser'
import ExplorationScene from './js/scenes/exploration'
import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js'

var game = null
const config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'game',
    scene: [
        ExplorationScene,
    ],
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        orientation: Phaser.Scale.Orientation.LANDSCAPE,
    },
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            gravity: {
                y: 0
            }
        }
    },
    plugins: {
        scene: [
            {
                key: 'rexUI',
                plugin: UIPlugin,
                mapping: 'rexUI'
            },
        ]
    },
}

export class Game extends Phaser.Game {
    constructor(config: object) {
      super(config)
    }
}

window.addEventListener('load', () => {
    game = new Game(config)
})