Title: I have browser errors when trying to get Phaser 2 to work on Quasar
Tags: javascript;vue.js;phaser-framework;webpack-4;quasar-framework
Question: 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)
```{
  ...
  &quot;dependencies&quot;: {
    &quot;@quasar/extras&quot;: &quot;^1.0.0&quot;,
    &quot;amazon-cognito-identity-js&quot;: &quot;^4.5.4&quot;,
    &quot;axios&quot;: &quot;^0.18.1&quot;,
    &quot;core-js&quot;: &quot;^3.6.5&quot;,
    &quot;cross-fetch&quot;: &quot;^3.0.6&quot;,
    &quot;phaser&quot;: &quot;^2.4.6&quot;,
    &quot;phaser-ce&quot;: &quot;^2.18.0&quot;,
    &quot;quasar&quot;: &quot;^1.0.0&quot;,
    &quot;vue-paystack&quot;: &quot;^2.0.4&quot;,
    &quot;vue-social-sharing&quot;: &quot;^3.0.5&quot;,
    &quot;vue-worker&quot;: &quot;^1.2.1&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@quasar/app&quot;: &quot;^2.0.0&quot;,
    &quot;@quasar/quasar-app-extension-dotenv&quot;: &quot;^1.0.5&quot;,
    &quot;babel-eslint&quot;: &quot;^10.0.1&quot;,
    &quot;eslint&quot;: &quot;^6.8.0&quot;,
    &quot;eslint-config-airbnb-base&quot;: &quot;^14.0.0&quot;,
    &quot;eslint-loader&quot;: &quot;^3.0.3&quot;,
    &quot;eslint-plugin-import&quot;: &quot;^2.20.1&quot;,
    &quot;eslint-plugin-vue&quot;: &quot;^6.1.2&quot;,
    &quot;expose-loader&quot;: &quot;^1.0.0&quot;,
    &quot;raw-loader&quot;: &quot;^4.0.2&quot;,
    &quot;script-loader&quot;: &quot;^0.7.2&quot;
  },
   ...
}

```
My gameplay page is as follows


```<template&gt;
  <div&gt;
    <div :id="containerId"&gt;</div&gt;
  </div&gt;
</template&gt;

<script&gt;
/* 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&gt;```



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



Here is the accepted answer: I figured it out for anyone who has the same challenge as me. I only really needed the ```phaser-ce``` and ```expose-loader``` packages. I removed the ```phaser```, ```raw-loader``` and ```script-loader``` packages. My updated ```Package.json``` file looks like this


```"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-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"
  },```



Some changes were made in the ```quasar.conf.js``` file, though. I changed the globalName property of the ```options.exposes``` object of the expose-loader. The ```moduleLocalName``` property is optional, and so, I removed it. The updated file looks like this:


```/*
 * This file runs in a Node context (it's NOT transpiled by Babel), so use only
 * the ES6 features that are supported by your Node version. https://node.green/
 */

// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
/* eslint-env node */
/* eslint func-names: 0 */
/* eslint global-require: 0 */

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

const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/');
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: /pixi\.js/,
          loader: 'expose-loader',
          options: {
            exposes: {
              globalName: 'window.PIXI', // changed
              override: false,
            },
          },
        });
        cfg.module.rules.push({
          test: /phaser-split\.js$/,
          loader: 'expose-loader',
          options: {
            exposes: {
              globalName: 'window.Phaser', // changed
              override: false,
            },
          },
        });
        cfg.module.rules.push({
          test: /p2\.js/,
          loader: 'expose-loader',
          options: {
            exposes: {
              globalName: 'window.p2', // changed
              override: false,
            },
          },
        });
        cfg.plugins.push(new webpack.DefinePlugin({
          //  Required by Phaser: Enable the WebGL and Canvas renderers.
          WEBGL_RENDERER: true,
          CANVAS_RENDERER: true,
        }));
      },
    ...
    },
  };
};```



The biggest changes were made in the ```gameplay.vue``` file. The updated file is as follows


```<template&gt;
  <div&gt;
    <div id="gameScreen"&gt;</div&gt;
  </div&gt;
</template&gt;

<script&gt;
/* 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',
      game: null,
      width: null,
      height: null,
    };
  },
  mounted() {
  // putting this here ensured the accurate width and height were calculated
    this.width = document.body.clientWidth;
    this.height = document.body.clientHeight;
    const self = this;
    if (this.game === null) {
      // this.width and this.height were returning undefined
      this.game = new Phaser.Game(self.width, self.height, Phaser.CANVAS, "gameScreen", {
        preload: function preload() {
          self.preload(this);
        },
        create: function create() {
          self.create(this);
        },
        update: function update() {
          self.update(this);
        },
      });
    }
  },
  methods: {
   // notice the game object, as opposed to the game parameter. This caused the program to silently break. The `this` parameter passed in the functions belong to the Phaser.Game instance and thus `this.game` also had the same properties in some cases as `this`, causing the silent bug.
    preload({ game }) {
      ...
    },
    create({ game }) {
      ...
    },
    upload({ game }) {
      ...
    }
  },
};
</script&gt;```



It works perfectly now.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:07/04/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><vue.js><phaser-framework><webpack-4><quasar-framework>', 'Title': 'I have browser errors when trying to get Phaser 2 to work on Quasar', 'ViewCount': 203, 'id': 68241633, 'user_AboutMe': '', 'user_AccountId': 10154495.0, 'user_DisplayName': 'Tony', 'user_Reputation': 1344.0, 'user_Views': 82.0, 'user_id': 7499991.0}}