LucioBrucio

Phaser is not defined at new PIXI.CanvasRenderer

Recommended Posts

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. 

Schermata 2017-02-16 alle 17.59.58.png

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"]
    }
};

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.