WEBGL_RENDERER is not defined error

Phaser 3
1

I’m using Webpack to install Phaser and rex plugins. Just did:

npm install phaser --save
npm install npm install git+https://github.com/rexrainbow/phaser3-rex-notes.git --save

To test it I run: npx webpack, which results in a successful build. But when I get to the index.html in the browser, I get the following error:

ReferenceError: WEBGL_RENDERER is not defined [Learn More] [index.js] [...]

I import them in the game config like this:

import Phaser from "phaser";
// THE BELOW LINE BREAKS THE GAME WHEN USED
import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js';
import Main from "./scenes/main.js";

let config = {
    type: Phaser.AUTO,
    width: 800,
    heigth: 600,
    physics: {
        default: "arcade",
        arcade: {
            gravity: {y: 0},
            debug: true
        }
    },
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        }]
    },
    scene: [Main]
};

let game = new Phaser.Game(config);

If I remove the import UIPlugin from 'phaser3-rex-plugins/... and its references in the config, it works OK.

What am I doing wrong? Any idea on how to do to be able to use the UIPlugin?

Edit: I saw this post, but I don’t know how to apply the suggested solution to my project.

2

You shouldn’t have to define WEBGL_RENDERER yourself now, so it’s weird you’re getting that error.

ReferenceError: WEBGL_RENDERER is not defined [Learn More] [index.js] […]

What are the contents of this line (where the error occurs)?

3

Sorry for the late response, it has been a while since I posted the question and received your answer, but now I had time to write here. I finally opted to adding the variables at index.html as a workaround:

<script>
    // This is necessary to work. DON'T REMOVE
    let WEBGL_RENDERER = true;
    let CANVAS_RENDERER = true;
</script>
<!-- Below is where Phaser.Game() is called -->
<script src="index.js"></script>

The error I got was this:

ReferenceError: WEBGL_RENDERER is not defined index.js line 15494 > eval:12:5
    <anonymous> webpack:///./node_modules/phaser3-rex-plugins/plugins/gameobjects/shape/roundrectangle/RoundRectangleRender.js?:12
    js http://localhost:5000/index.js:15494
    __webpack_require__ http://localhost:5000/index.js:20
    <anonymous> webpack:///./node_modules/phaser3-rex-plugins/plugins/gameobjects/shape/roundrectangle/RoundRectangle.js?:7
    js http://localhost:5000/index.js:15470
    __webpack_require__ http://localhost:5000/index.js:20
    <anonymous> webpack:///./node_modules/phaser3-rex-plugins/templates/ui/roundrectangle/RoundRectangle.js?:2
    js http://localhost:5000/index.js:16557
    __webpack_require__ http://localhost:5000/index.js:20
    <anonymous> webpack:///./node_modules/phaser3-rex-plugins/templates/ui/roundrectangle/RoundRectangleFactory.js?:2
    js http://localhost:5000/index.js:16569
    __webpack_require__ http://localhost:5000/index.js:20
    <anonymous> webpack:///./node_modules/phaser3-rex-plugins/templates/ui/ui-plugin.js?:3
    js http://localhost:5000/index.js:16881
    __webpack_require__ http://localhost:5000/index.js:20
    <anonymous> webpack:///./src/app.js?:4
    js http://localhost:5000/index.js:17023
    __webpack_require__ http://localhost:5000/index.js:20
    <anonymous> http://localhost:5000/index.js:84
    <anonymous> http://localhost:5000/index.js:87