Phaser is not defined at new PIXI.CanvasRenderer

[LucioBrucio]

Hi all, i'm facing with this problem on some chrome browser (updated), can some one suggest where i must check the error? I use typescript with webpack.

Can some one tell me how to figure out this error? The code work well also in internet explorer!!! The problem is only on chrome windows. 

This is my webpack configuration:

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


const { CheckerPlugin } = require('awesome-typescript-loader')
var definePlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
})
module.exports = {
    entry: {
        app: [
            //'babel-polyfill',
            path.resolve(__dirname, 'app/index.ts')
        ],
        vendor: ['pixi', 'p2', 'phaser']
    },
    watch: true,
    devtool: 'cheap-source-map',
    output: {
        pathinfo: true,
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: '[name].js'
    },
    module: {
        rules: [{
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                loader: "awesome-typescript-loader"
                    //loader: "babel-loader?presets[]=es2015!awesome-typescript-loader"
            },
            {
                test: /\.css$/,
                loader: 'css-loader'
            },
            { test: /pixi\.js/, use: ['expose-loader?PIXI'] },
            { test: /phaser-split\.js$/, use: ['expose-loader?phaser'] },
            { test: /p2\.js/, use: ['expose-loader?p2'] }
        ]
    },
    plugins: [
        new CheckerPlugin(),
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }),
    ],
    resolve: {
        alias: {
            'phaser': phaser,
            'pixi': pixi,
            'p2': p2
        },
        extensions: [".tsx", ".ts", ".js", ".jsx"]
    }
};

[drhayes]

Are you actually requiring Phaser somewhere in your bundle? I wonder if the "right" Phaser stuff isn't getting stuck on the global object? In your console, what happens if you "console.log(Phaser);" yourself, on your page?

[LucioBrucio]

Hi Drhayes i actually found a workaround, defining window.Phaser after the import in my index.ts

 

import 'pixi';
import Phaser from 'phaser';
window['Phaser'] = Phaser;
import 'p2';

This solved my problem, but is what i'm calling 'porkaround'...

I cannot understand why this bug happens only in some chrome, for example in windows chrome and mac os chrome of my colleague, not in my mac os chrome (same version of course).

 Many thanks

[ldd]

It is entirely possible that the chrome plugins of your coworker are messing up with this.

Have you tried running it in incognito mode, or under a different profile?

[LucioBrucio]

Hi ldd, i had some different try to understand what's happening. I run in incognito mode, different browser, different computers and also on several mobile device. The problem is facing only on windows chrome e in mac os chrome of my 2 colleagues (even if they update chrome version). I develop the mini game in my mac os chrome and works like a charm...

Many thanks.