Error when loading the plugin with Phaser3 TypeScript template

[chenweize1998]

Hi! I'm encountering an issue while using the Phaser3 TypeScript template. I replace the content of game.ts with the simple example add-to-layer from your examples repository. The only change I made was changing the import path for UIPlugin to phaser3-rex-plugins/templates/ui/ui-plugin. However, when building with Rollup, I received the following warnings:

(!) Unresolved dependencies
https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
phaser3-rex-plugins/templates/ui/ui-plugin (imported by "src/game.ts")
(!) Missing global variable name
https://rollupjs.org/configuration-options/#output-globals
Use "output.globals" to specify browser global variable names corresponding to external modules:
phaser3-rex-plugins/templates/ui/ui-plugin (guessing "UIPlugin")

Furthermore, when running the application in the browser, I encountered the following error:

Uncaught ReferenceError: UIPlugin is not defined.

I'm using Phaser 3.60.0 and phaser3-rex-plugins 1.60.1.

As a beginner in Phaser3, I have spent some time trying to identify and resolve the issue, but unfortunately, I haven't been successful. I would greatly appreciate any guidance or insights you can provide to help me resolve this problem. Thank you in advance for your assistance!

[rexrainbow]

rollup.config.dev.mjs might need some modified to allow phaser3-rex-plugins been compiled. My workaround is copy 'phaser3-rex-plugins' folder to src folder, then it can be compiled.

Here is the test code after fixing some typescript bugs like, the file name ought to be .d.ts not .ts.

import * as Phaser from 'phaser';
import { Label, RoundRectangle } from './phaser3-rex-plugins/templates/ui/ui-components';

const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;

export default class Demo extends Phaser.Scene {
    constructor() {
        super('demo');
    }

    preload() {

    }

    create() {
        for (var i = 0; i < 5; i++) {
            let card = CreateCard(
                this,
                200 + i * 80,
                250 + i * 40,
                `Card-${i}`
            )

            card
                .setInteractive()
                .on('pointerdown', function () {
                    this.children.bringToTop(card.getData('layer'));
                }, this)
        }
    }

    update() { }
}

var CreateCard = function (scene: Demo, x: number, y: number, name: string) {
    const layer = scene.add.layer().setName(name);

    const background = new RoundRectangle(scene, {
        radius: 20,
        color: COLOR_PRIMARY,
        strokeColor: COLOR_LIGHT, strokeWidth: 2
    })

    const text = scene.add.text(0, 0, name, {
        fontSize: '24px'
    })

    const icon = new RoundRectangle(scene, {
        width: 160, height: 160, radius: 10,
        color: COLOR_DARK,
    })

    const label = new Label(scene, {
        x: x, y: y,
        width: 200, height: 300,
        orientation: 'y',
        background: background,
        text: text,
        icon: icon,
        space: {
            left: 20, right: 20, top: 20, bottom: 20,
            icon: 10, text: 10,
        },
        name: name
    })

    label
        .setData('layer', layer)
        .addToLayer(layer)
        .layout();

    return label;
}

const config = {
    type: Phaser.AUTO,
    backgroundColor: '#333333',
    width: 800,
    height: 600,
    scene: Demo
};

const game = new Phaser.Game(config);

You can grab source code (\plugins and \templates folders) downloaded from this repo and put it on /src/phaser3-rex-plugins.

I tested typescript before in this project, which use webpack to compile ts/js code. It seems that rollup has another issue.

[chenweize1998]

Thank you for your reply! I just cloned this repo and copied the /plugins and /templates to /src, and I modified the game.ts to what you have posted. However, I still cannot run the code successfully. The errors are as follows:

(!) Plugin typescript: @rollup/plugin-typescript TS2304: Cannot find name 'Live2DCubismCore'.
src/phaser3-rex-plugins/plugins/gameobjects/live2d/framework/src/live2dcubismframework.ts: (93:7)

93       Live2DCubismCore.Logging.csmSetLogFunction(s_option.logFunction);
         ~~~~~~~~~~~~~~~~

src/phaser3-rex-plugins/plugins/gameobjects/live2d/framework/src/live2dcubismframework.ts: (100:31)

100       const version: number = Live2DCubismCore.Version.csmGetVersion();

...... (Here I omit a lot. All the messages here point to some codes in `phaser3-rex-plugins/plugins/gameobjects/live2d/framework/src/live2dcubismframework.ts` and `phaser3-rex-plugins/plugins/gameobjects/live2d/framework/src/model/cubismmoc.ts`)

(!) Plugin typescript: @rollup/plugin-typescript TS2503: Cannot find namespace 'Live2DCubismCore'.

...... (Again a lot of messages related to the two files)

(!) Circular dependency
src/phaser3-rex-plugins/templates/ui/tweaker/TweakerShell.js -> src/phaser3-rex-plugins/templates/ui/tweaker/methods/Methods.js -> src/phaser3-rex-plugins/templates/ui/tweaker/methods/AddFolder.js -> src/phaser3-rex-plugins/templates/ui/tweaker/builders/CreateFolder.js -> src/phaser3-rex-plugins/templates/ui/tweaker/gameobjects/utils/CreateTweaker.js -> src/phaser3-rex-plugins/templates/ui/tweaker/TweakerShell.js

Did you modify rollup.config.dev.mjs as well? (I'm using rollup 3.20.2) Also, the console of browser has an error

Uncaught SyntaxError. Invalid or unexpected token

[rexrainbow]

These messages could be ignored, enter command npm run watch then you can see the result on browser.

[chenweize1998]

I did run npm run watch, but see nothing on the browser😢

[rexrainbow]

Might try this more simpler test code, which only uses a RoundRectangle shape game object.

import * as Phaser from 'phaser';
import { RoundRectangle } from './phaser3-rex-plugins/templates/ui/ui-components';

class Demo extends Phaser.Scene {
    constructor() {
        super('demo');
    }

    preload() {

    }

    create() {
        const background = new RoundRectangle(this, {
            x: 400, y: 300,
            width: 200, height: 100,
            radius: 20,
            color: 0x333333,
            strokeColor: 0xffffff, strokeWidth: 2
        })
        this.add.existing(background);
    }

    update() { }
}

const config = {
    type: Phaser.AUTO,
    backgroundColor: '#333333',
    width: 800,
    height: 600,
    scene: Demo
};

const game = new Phaser.Game(config);

Show the error message on console if it still failed.

[chenweize1998]

It still fails. The terminal where I run npm run watch prints the same error message. And the console in browser prints:

Uncaught Reference error: Phaser is not defined at SetStretchMode.js:1:23 at game.ts:35:36

where game.ts:35:36 is

const game = new Phaser.Game(config);

and SetStretchMode.js:1:23 is

const IsPlainObject = Phaser.Utils.Objects.IsPlainObject;
const GetValue = Phaser.Utils.Objects.GetValue;

var SetStretchMode = function(mode) {
    if (IsPlainObject(mode)) {
        this.stretchMode.edge = parseMode(GetValue(mode, 'edge', 0));
        this.stretchMode.internal = parseMode(GetValue(mode, 'internal', 0));
    } else {
        mode = parseMode(mode);
        this.stretchMode.edge = mode;
        this.stretchMode.internal = mode;
    }
    return this;
};

var parseMode = function (mode) {
    if (typeof (mode) === 'string') {
        mode = EXTENDMODE[mode];
    }
    return mode;
}

const EXTENDMODE = {
    scale: 0,
    repeat: 1,
}

export default SetStretchMode;

[rexrainbow]

I found that I added browser: true, to nodeResolve plugin's setting

        ...
        //  Parse our .ts source files
        nodeResolve({
            browser: true,
            extensions: [ '.ts', '.tsx' ]
        }),
        ...

Before that, I also add "tslib": "^2.5.0" to package.json.

[chenweize1998]

Great! I confirm that it works normally now! I'm really grateful for your patient guidance! After struggling for a long time without finding a solution, it really means a lot to me to receive your help. I can't express how thankful I am! Thank you!