Phaser: Uncaught ReferenceError: PIXI is not defined

[LasTshaMAN]

I'm trying to start working on a new game using Angular2 for my front-end and Phaser as my game engine, the language of my choice is Typescript. I am also using Webpack and it's "webpack-dev-server" for hot file reloading during my development.

When I tried to insert some Phaser code into my "Angular2" infrastructure I got some errors:

1. On the browser console I have an error message "_Uncaught ReferenceError: PIXI is not defined_".
2. While running Webpack I get a warning:
   "_WARNING in ./~/phaser/build/phaser.js
   Critical dependencies:
   53:397-404 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
   @ ./~/phaser/build/phaser.js 53:397-404_".

Maybe these two are not related, the first one doesn't allow me to continue using Phaser and it looks like some kind of an internal bug (considering how user unfriendly the error message is).

I've downloaded Phaser typings for using it's Typescript API, and I'm trying to import Phaser like this:
import * as Phaser from 'phaser';
I am attaching some screens for you to take a look at. Hope, you can help :)

[paralin]

Put before you import phaser:

import 'pixi.js/bin/pixi.js';
import 'p2';

[LasTshaMAN]

Ok, now I've found instructions (Phaser Github) on how to use Phaser with Webpack and pixi & p2 dependencies.

But it doesn't quite work, because now I get "_Uncaught ReferenceError: p2 is not defined_" instead of the old one.
I tried to add p2 and Phaser to loaders as well:
{ test: /p2.js/, loader: "script" }, { test: /phaser-split.js/, loader: "script" }

It looks like global variables Phaser, PIXI and p2 are defined now. But I get the errors on the screen below:

[nexiuhm]

The webpack documentation might be outdated. This should work however using webpack expose loader.

Webpack config:

var phaserModulePath = path.join(__dirname, '/node_modules/phaser/');

module.exports = {
    ...
    module: {
        loaders: [
            { test: /pixi\.js/, loader: 'expose?PIXI' },
            { test: /phaser-split\.js$/, loader: 'expose?Phaser' },
            { test: /p2\.js/, loader: 'expose?p2' },
        ]
    },
    resolve: {
        alias: {
            'phaser': path.join(phaserModulePath, 'build/custom/phaser-split.js'),
            'pixi': path.join(phaserModulePath, 'build/custom/pixi.js'),
            'p2': path.join(phaserModulePath, 'build/custom/p2.js')

        }
    }
    ...
}

[photonstorm]

Closing this as a solution has been given. If someone wants to update the Phaser CE readme then please go ahead.

[saeidalidadi]

I got the same error in my console. also all required dependencies which have been said are included in bundle file.

[tbillington]

What's the argument for having a non-standard install like this as the default ? Broken out of the box requiring special webpack config doesn't feel very user friendly.

[photonstorm]

Because Phaser 2 was never written with modules, to be modular, or with any kind of bundler in mind (it copied three.js). So when someone wants to try and shoehorn it into webpack, this is how it needs to be done.

Phaser 3 is 100% modular and is _built_ with webpack as standard.

[oliverbenns]

Webpack 2 config here: https://github.com/oliverbenns/phaser-starter/blob/master/webpack.config.js

[alex-walker]

To overcome this error I updated the "scripts" in .angular-cli.json to have the following

"scripts": [
        "../node_modules/phaser-ce/build/custom/pixi.js",
        "../node_modules/phaser-ce/build/custom/p2.js",
        "../node_modules/phaser-ce/build/custom/phaser-split.js"
      ],

[olgeorge]

Slight elaboration on @nexiuhm's solution for ES6 and Webpack 2/3/4:

First, install expose-loader: npm i expose-loader --save

Then, modify webpack config:

const phaserModulePath = path.join(__dirname, '/node_modules/phaser/');

module.exports = {
    ...
    module: {
        rules: [
            { test: /pixi\.js/, loader: 'expose-loader?PIXI' },
            { test: /phaser-split\.js$/, loader: 'expose-loader?Phaser' },
            { test: /p2\.js/, loader: 'expose-loader?p2' },
        ]
    },
    resolve: {
        alias: {
            'phaser': path.join(phaserModulePath, 'build/custom/phaser-split.js'),
            'pixi': path.join(phaserModulePath, 'build/custom/pixi.js'),
            'p2': path.join(phaserModulePath, 'build/custom/p2.js'),
        }
    }
    ...
}

Finally, in your ES6 module where you use Phaser, import all three of p2, pixi and phaser (otherwise you still might see "PIXI is not defined"):

import 'pixi';
import 'p2';
import Phaser from 'phaser';

const game = new Phaser.Game(...);

ESlint and/or your IDE might complain that it's unable to resolve path to module p2 and pixi (as they are not real dependencies in package.json), but al least it works.