[!] RollupError: "default" is not exported when attempting to import plugin into phaser3-typescript-project-template

[ClementineAccount]

Summary

When attempting to install using Typescript and npm install, I was unable to solve the "default is not exported" error when using: https://github.com/photonstorm/phaser3-typescript-project-template#phaser-3-typescript-project-template

I had the error when following these instructions: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-overview/#install-from-npm-package and using this main file:

import * as Phaser from 'phaser';
import RexUIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';

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

class Demo extends Phaser.Scene {

    rexUI: RexUIPlugin;  // Declare scene property 'rexUI' as RexUIPlugin type
    constructor() {
        super({
            key: 'examples'
        })

    }

    preload() { }

    create() {
        var buttons = this.rexUI.add.buttons({
            x: 400, y: 300,
            orientation: 'x',

            buttons: [
                createButton(this, 'A'),
                createButton(this, 'B'),
            ],

            space: { item: 8 }

        })
            // Add a titile child, which is not part of buttons
            .add(createButton(this, 'Title'),
                {
                    index: 0
                }
            )
            // Add a footer child, which is not part of buttons
            .add(createButton(this, 'Footer'))
            .layout()
            .drawBounds(this.add.graphics(), 0xff0000)

        var print = this.add.text(0, 0, '');
        buttons
            .on('button.click', function (button, index, pointer, event) {
                print.text += `Click button-${button.text}\n`;
                buttons.setButtonEnable(false)
                setTimeout(() => {
                    buttons.setButtonEnable(true)
                }, 1000);
            })
            .on('button.out', function () {
                print.text += 'Pointer-out\n';
            })
            .on('button.over', function () {
                print.text += 'Pointer-over\n';
            })
            .on('button.down', function () {
                print.text += 'Pointer-down\n';
            })
            .on('button.up', function () {
                print.text += 'Pointer-up\n';
            })

    }

    update() { }
}

var createButton = function (scene, text) {
    return scene.rexUI.add.label({
        width: 100,
        height: 40,
        background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 20, COLOR_LIGHT),
        text: scene.add.text(0, 0, text, {
            fontSize: 18
        }),
        space: {
            left: 10,
            right: 10,
        }
    });
}

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    scene: Demo,
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: RexUIPlugin,
            mapping: 'rexUI'
        }]
    }
};

var game = new Phaser.Game(config);

The full error message as follows:

rollup v3.20.2
bundles ./src/game.ts → dist/game.js...
(!) Circular dependency
node_modules/phaser3-rex-plugins/templates/ui/tweaker/TweakerShell.js -> node_modules/phaser3-rex-plugins/templates/ui/tweaker/methods/Methods.js -> node_modules/phaser3-rex-plugins/templates/ui/tweaker/methods/AddFolder.js -> node_modules/phaser3-rex-plugins/templates/ui/tweaker/builders/CreateFolder.js -> node_modules/phaser3-rex-plugins/templates/ui/tweaker/gameobjects/utils/CreateTweaker.js -> node_modules/phaser3-rex-plugins/templates/ui/tweaker/TweakerShell.js
[!] RollupError: "default" is not exported by "node_modules/phaser3-rex-plugins/node_modules/eventemitter3/index.js", imported by "node_modules/phaser3-rex-plugins/plugins/utils/eventemitter/EventEmitter.js".
https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module
node_modules/phaser3-rex-plugins/plugins/utils/eventemitter/EventEmitter.js (1:7)
1: import EE from 'eventemitter3';
          ^
2: 
3: class EventEmitter extends EE {
    at error (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:274:30)
    at Module.error (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:13820:16)
    at Module.traceVariable (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:14205:29)
    at ModuleScope.findVariable (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:12708:39)
    at ChildScope.findVariable (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:7451:38)
    at Identifier.bind (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:8601:40)
    at ClassDeclaration.bind (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:6247:23)
    at Program.bind (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:6243:28)
    at Module.bindReferences (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:13816:18)
    at Graph.sortModules (C:\Global\Projects\Game Development\Game A Week\Week 3 (2)\phaser3-typescript-project-template\node_modules\rollup\dist\shared\rollup.js:25202:20)

[ClementineAccount]

I attempted this fix but it did not resolve it: https://stackoverflow.com/questions/61237208/rollup-error-default-is-not-exported-by-node-modules-react-index-js

[ClementineAccount]

I was able to get that same example file working with this template: https://github.com/yandeu/phaser-project-template#how-to-use

(after I updated it to use Phaser 3.6)

[rexrainbow]

Sorry I can't solve this rollup setting issue.

[gzjayvan]

Try adding @rollup/plugin-commonjs and @rollup/plugin-node-resolve plugins to your rollup build configuration?

[rexrainbow]

@gzjayvan They were already added