I have not been able to get Phaser 2 to work with Quasar framework

[Chinemelu]

I am using Phaser 2 and I am trying to get it working with quasar framework, but I just keep stumbling into errors. I suspect it may be a webpack configuration issue, coupled with package incompatibility issues. 

The relevant section of my `quasar.conf.js` file is as follows
 

const webpack = require('webpack');
const path = require('path');

const phaserModule = path.join(__dirname, '/node_modules/phaser/');
const p2 = path.join(phaserModule, 'build/custom/p2.js');
const phaser = path.join(phaserModule, 'build/custom/phaser-split.js');
const pixi = path.join(phaserModule, 'build/custom/pixi.js');

module.exports = function (/* ctx */) {
  return {
      ....
      extendWebpack(cfg) {
        cfg.resolve.extensions = ['.js', '.vue', '.json'];
        cfg.resolve.alias.p2 = p2;
        cfg.resolve.alias.pixi = pixi;
        cfg.resolve.alias.phaser = phaser;
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules|quasar)/,
        });
        cfg.module.rules.push({
          test: /\.(frag|vert)$/,
          // loader: 'gl-fragment-loader'
          loader: 'raw-loader',
        });
        cfg.module.rules.push({
          test: /pixi\.js/,
          loader: 'expose-loader',
          options: {
            exposes: {
              globalName: 'PIXI',
              moduleLocalName: 'PIXI',
              override: false,
            },
          },
        });
        cfg.module.rules.push({
          test: /phaser-split\.js$/,
          loader: 'expose-loader',
          options: {
            exposes: {
              globalName: 'Phaser',
              moduleLocalName: 'Phaser',
              override: false,
            },
          },
        });
        cfg.module.rules.push({
          test: /p2\.js/,
          loader: 'expose-loader',
          options: {
            exposes: {
              globalName: 'p2',
              moduleLocalName: 'p2',
              override: false,
            },
          },
        });
        cfg.plugins.push(new webpack.DefinePlugin({
          //  Required by Phaser: Enable the WebGL and Canvas renderers.
          WEBGL_RENDERER: true,
          CANVAS_RENDERER: true,
        }));
      },
    },
  };
};

My `package.json` file is as follows (Please ignore the use of Phaser and Phaser-ce. I know one can be used in place of the other, but I have been trying different configurations)

 

{
  ...
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "amazon-cognito-identity-js": "^4.5.4",
    "axios": "^0.18.1",
    "core-js": "^3.6.5",
    "cross-fetch": "^3.0.6",
    "phaser": "^2.4.6",
    "phaser-ce": "^2.18.0",
    "quasar": "^1.0.0",
    "vue-paystack": "^2.0.4",
    "vue-social-sharing": "^3.0.5",
    "vue-worker": "^1.2.1"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.0",
    "@quasar/quasar-app-extension-dotenv": "^1.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-vue": "^6.1.2",
    "expose-loader": "^1.0.0",
    "raw-loader": "^4.0.2",
    "script-loader": "^0.7.2"
  },
   ...
}

My gameplay page is as follows

    <template>
      <div>
        <div :id="containerId"></div>
      </div>
    </template>

    <script>
    /* eslint-disable no-unused-vars */
    import 'pixi';
    import 'p2';
    import Phaser from 'phaser';
    /* eslint-enable no-unused-vars */

    export default {
      name: 'game',
      data() {
        return {
          game: null,
          containerId: 'gameScreen',
        };
      },
      props: {
        width: {
          type: Number,
          default: document.body.clientWidth,
        },
        height: {
          type: Number,
          default: document.body.clientHeight,
        },
      },
      mounted() {
        const self = this;
        if (this.game === null) {
          debugger;
          this.game = new Phaser.Game(this.width, this.height, Phaser.CANVAS, this.containerId, {
            preload: function preload() {
              self.preload(this);
            },
            create: function create() {
              self.create(this);
            },
            update: function update() {
              self.update(this);
            },
          });
        }
      },
      methods: {
        preload(game) {
          ...
        },
        create(game) {
          ...
        },
        upload(game) {
          ...
        }
      },
    };
    </script>

 

The most recent error (there have been many) is shown below