Phaser: Module parse failed in Phaser 3.0.0 Beta 20 Release

Created on 5 Feb 2018  路  10Comments  路  Source: photonstorm/phaser

Hi
Firstly, thank you for all your hard work on phaser 3! Looking amazing.
I think I found a bug though.
Running in brand new Angular 4 with nothing else in it, I installed via "npm install phaser@beta".
Here is my code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Phaser } from 'phaser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 

  config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: {
        preload: this.preload,
        create: this.create
    }
  };

  game = new Phaser.Game(this.config);

  carrot: any;

  preload() : void{
    this.game.load.image('carrot', 'assets/carrot.png');
  }

  create() : void{
    this.carrot = this.game.add.sprite(400, 300, 'carrot');
  }

}

I get a compilation error:

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/BitmapMask.frag
Module parse failed: /home/doug/Desktop/phaser test/my-app/node_modules/phaser/src/renderer/webgl/shaders/BitmapMask.frag Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_BITMAP_MASK_FS
| 
| precision mediump float;
 @ ./node_modules/phaser/src/renderer/webgl/pipelines/BitmapMaskPipeline.js 5:21-58
 @ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
 @ ./node_modules/phaser/src/boot/CreateRenderer.js
 @ ./node_modules/phaser/src/boot/Game.js
 @ ./node_modules/phaser/src/phaser.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/BitmapMask.vert
Module parse failed: /home/doug/Desktop/phaser test/my-app/node_modules/phaser/src/renderer/webgl/shaders/BitmapMask.vert Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_BITMAP_MASK_VS
| 
| precision mediump float;
 @ ./node_modules/phaser/src/renderer/webgl/pipelines/BitmapMaskPipeline.js 4:21-58
 @ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
 @ ./node_modules/phaser/src/boot/CreateRenderer.js
 @ ./node_modules/phaser/src/boot/Game.js
 @ ./node_modules/phaser/src/phaser.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/FlatTint.frag
Module parse failed: /home/doug/Desktop/phaser test/my-app/node_modules/phaser/src/renderer/webgl/shaders/FlatTint.frag Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_FLAT_TINT_FS
| 
| precision mediump float;
 @ ./node_modules/phaser/src/renderer/webgl/pipelines/FlatTintPipeline.js 6:21-56
 @ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
 @ ./node_modules/phaser/src/boot/CreateRenderer.js
 @ ./node_modules/phaser/src/boot/Game.js
 @ ./node_modules/phaser/src/phaser.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/FlatTint.vert
Module parse failed: /home/doug/Desktop/phaser test/my-app/node_modules/phaser/src/renderer/webgl/shaders/FlatTint.vert Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_FLAT_TINT_VS
| 
| precision mediump float;
 @ ./node_modules/phaser/src/renderer/webgl/pipelines/FlatTintPipeline.js 5:21-56
 @ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
 @ ./node_modules/phaser/src/boot/CreateRenderer.js
 @ ./node_modules/phaser/src/boot/Game.js
 @ ./node_modules/phaser/src/phaser.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/ForwardDiffuse.frag
Module parse failed: /home/doug/Desktop/phaser test/my-app/node_modules/phaser/src/renderer/webgl/shaders/ForwardDiffuse.frag Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_FORWARD_DIFFUSE_FS
| 
| precision mediump float;
 @ ./node_modules/phaser/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js 5:21-62
 @ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
 @ ./node_modules/phaser/src/boot/CreateRenderer.js
 @ ./node_modules/phaser/src/boot/Game.js
 @ ./node_modules/phaser/src/phaser.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/TextureTint.frag
Module parse failed: /home/doug/Desktop/phaser test/my-app/node_modules/phaser/src/renderer/webgl/shaders/TextureTint.frag Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_TEXTURE_TINT_FS
| 
| precision mediump float;
 @ ./node_modules/phaser/src/renderer/webgl/pipelines/TextureTintPipeline.js 5:21-59
 @ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
 @ ./node_modules/phaser/src/boot/CreateRenderer.js
 @ ./node_modules/phaser/src/boot/Game.js
 @ ./node_modules/phaser/src/phaser.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/TextureTint.vert
Module parse failed: /home/doug/Desktop/phaser test/my-app/node_modules/phaser/src/renderer/webgl/shaders/TextureTint.vert Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_TEXTURE_TINT_VS
| 
| precision mediump float;
 @ ./node_modules/phaser/src/renderer/webgl/pipelines/TextureTintPipeline.js 4:21-59
 @ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
 @ ./node_modules/phaser/src/boot/CreateRenderer.js
 @ ./node_modules/phaser/src/boot/Game.js
 @ ./node_modules/phaser/src/phaser.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

I played with a previous development of phaser a few months back, and this didn't happen. So I don't think I've got anything wrong.

Thanks very much!

Doug

picture DouglasLapsley

Most helpful comment

@DouglasLapsley I don't think you are importing Phaser correctly.

Normally, Phaser exports itself into the global scope (ie. It assigns itself to window.Phaser). So Phaser should just be available everywhere as long as it has been required/imported at least once. But in your excerpt you have this:

import { Phaser } from 'phaser';

This effectively is the same as this:

var Phaser = require('phaser').Phaser;

This overshadows the global Phaser with a module-level variable of the same name, and assigns it the value of the global Phaser's own Phaser property, (ie. var Phaser = Phaser.Phaser)

But, Phaser doesn't have another Phaser nested inside of it. So you end up with var Phaser = undefined. This is why you are getting an error about the CANVAS property.

The solution is to use any ONE of the following alternatives, according to your preference:

import 'phaser';
import Phaser from 'phaser';
require('phaser');
var Phaser = require('phaser');

This is the way Phaser has always worked when used in module-based projects, AFAIK, and is not related to the 3.0 changes.

picture bradharms on 6 Feb 2018
👍2

All 10 comments

This looks like the same issue as #3202.

bradharms picture bradharms on 5 Feb 2018

Thank you, this does appear to be related. I just ran...

ng eject

...on the project to generate the "webpack.config.js" file so that I could add the block for the vert and frag files:

{
        "test": [ /\.vert$/, /\.frag$/ ],
        "use": 'raw-loader'
},

It's not ideal for me to have to eject the project though :(

I don't suppose there is any other way to do this?

The project does now compile. However, when I run it I get a console error:

vendor.bundle.js:81353 Uncaught ReferenceError: WEBGL_RENDERER is not defined
    at Object../node_modules/phaser/src/gameobjects/sprite/SpriteRender.js (vendor.bundle.js:81353)
    at __webpack_require__ (bootstrap 783f205e6dfd30f0add6:54)
    at Object../node_modules/phaser/src/gameobjects/sprite/Sprite.js (vendor.bundle.js:81202)
    at __webpack_require__ (bootstrap 783f205e6dfd30f0add6:54)
    at Object../node_modules/phaser/src/gameobjects/sprite3d/Sprite3D.js (vendor.bundle.js:81398)
    at __webpack_require__ (bootstrap 783f205e6dfd30f0add6:54)
    at Object../node_modules/phaser/src/cameras/sprite3d/Camera.js (vendor.bundle.js:60067)
    at __webpack_require__ (bootstrap 783f205e6dfd30f0add6:54)
    at Object../node_modules/phaser/src/cameras/sprite3d/index.js (vendor.bundle.js:61664)
    at __webpack_require__ (bootstrap 783f205e6dfd30f0add6:54)

And I just get a blank screen. For reference "../node_modules/phaser/src/gameobjects/sprite/SpriteRender.js" looks like this:

var renderWebGL = require('../../utils/NOOP');
var renderCanvas = require('../../utils/NOOP');

if (WEBGL_RENDERER)
{
    renderWebGL = require('./SpriteWebGLRenderer');
}

if (CANVAS_RENDERER)
{
    renderCanvas = require('./SpriteCanvasRenderer');
}

module.exports = {

    renderWebGL: renderWebGL,
    renderCanvas: renderCanvas

};

Any ideas please?

DouglasLapsley picture DouglasLapsley on 5 Feb 2018
👍2

See #3121. You need to either define those constants using webpack.DefinePlugin() or else set them as globals prior to requiring Phaser for the first time.

bradharms picture bradharms on 5 Feb 2018

Thanks, that's very helpful. I'll check that out tomorrow :)

DouglasLapsley picture DouglasLapsley on 5 Feb 2018

Thanks again bradharms. I added DefinePlugin() to the webpack.config.js file as follows:

```
"plugins": [
new NoEmitOnErrorsPlugin(),
new DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true)
}),
new CopyWebpackPlugin([
{
"context": "src",
"to": "",
...

Now the app compiles, but I am getting another console error.

main.ts:14 TypeError: Cannot read property 'CANVAS' of undefined
at new AppModule (app.module.ts:20)
at _createClass (core.es5.js:9527)
at _createProviderInstance$1 (core.es5.js:9503)
at initNgModule (core.es5.js:9456)
at new NgModuleRef_ (core.es5.js:10553)
at createNgModuleRef (core.es5.js:10537)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12822)
at NgModuleFactory_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13830)
at core.es5.js:4497
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

However, even if I got this working, I don't think that I would continue down this path.  I REALLY don't want to have to eject my angular project as it makes it all a lot more of a pain to work with.

So, hacky as it is, I decided not to use npm but to include the compiled phaser.min.js directly.  It works, and was done as follows:

1. Created new angular project
2. Added /assets/libs/phaser/phaser.min.js and /assets/carrot.png
3. Added the following to .angular-cli.json file

 ```
   "scripts": [
        "assets/libs/phaser/phaser.min.js"
      ],
  1. Updated app.component.html to

<div id="phaser-example"></div>

  1. Updated app.component.ts to:
import { Component } from '@angular/core';

declare var Phaser: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  PhaserObj: any;
  game: any;
  carrot: any;

  config: any = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: {
        preload: function(){
          this.load.image('carrot', 'assets/carrot.png');
        },
        create: function(){
          this.carrot = this.add.sprite(400, 300, 'carrot');
        },
        update: function(){
          this.carrot.x += 1;
        }
    }
  };

  constructor() {   
    this.game = new Phaser.Game(this.config);
  }  

}

I hope this helps someone else out there :)

DouglasLapsley picture DouglasLapsley on 6 Feb 2018

@DouglasLapsley I don't think you are importing Phaser correctly.

Normally, Phaser exports itself into the global scope (ie. It assigns itself to window.Phaser). So Phaser should just be available everywhere as long as it has been required/imported at least once. But in your excerpt you have this:

import { Phaser } from 'phaser';

This effectively is the same as this:

var Phaser = require('phaser').Phaser;

This overshadows the global Phaser with a module-level variable of the same name, and assigns it the value of the global Phaser's own Phaser property, (ie. var Phaser = Phaser.Phaser)

But, Phaser doesn't have another Phaser nested inside of it. So you end up with var Phaser = undefined. This is why you are getting an error about the CANVAS property.

The solution is to use any ONE of the following alternatives, according to your preference:

import 'phaser';
import Phaser from 'phaser';
require('phaser');
var Phaser = require('phaser');

This is the way Phaser has always worked when used in module-based projects, AFAIK, and is not related to the 3.0 changes.

bradharms picture bradharms on 6 Feb 2018
👍2

Thank you, this was very helpful. Much appreciated.

DouglasLapsley picture DouglasLapsley on 7 Feb 2018

Just to say that this worked on the ejected project too. I changed to the following import.

import Phaser from 'phaser';

Thanks again :)

DouglasLapsley picture DouglasLapsley on 9 Feb 2018

How do you render this to the screen?

Ah, didn't notice the id in the config. Works like a champ

timwickey picture timwickey on 30 Apr 2018

I can't get this working. I'm not using Angular, just straight JavaScript. When webpack compiles I get a hundred red "SHADER... "errors in console. What is the magic fix from all the various comments above?

Thanks for any advice guys :-)

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/BitmapMask.frag
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_BITMAP_MASK_FS
|
| precision mediump float;
@ ./node_modules/phaser/src/renderer/webgl/pipelines/BitmapMaskPipeline.js 8:21-58
@ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
@ ./node_modules/phaser/src/boot/CreateRenderer.js
@ ./node_modules/phaser/src/boot/Game.js
@ ./node_modules/phaser/src/phaser.js
@ ./src/index.js

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/BitmapMask.vert
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_BITMAP_MASK_VS
|
| precision mediump float;
@ ./node_modules/phaser/src/renderer/webgl/pipelines/BitmapMaskPipeline.js 9:21-58
@ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
@ ./node_modules/phaser/src/boot/CreateRenderer.js
@ ./node_modules/phaser/src/boot/Game.js
@ ./node_modules/phaser/src/phaser.js
@ ./src/index.js

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/FlatTint.frag
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_FLAT_TINT_FS
|
| precision mediump float;
@ ./node_modules/phaser/src/renderer/webgl/pipelines/FlatTintPipeline.js 11:21-56
@ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
@ ./node_modules/phaser/src/boot/CreateRenderer.js
@ ./node_modules/phaser/src/boot/Game.js
@ ./node_modules/phaser/src/phaser.js
@ ./src/index.js

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/FlatTint.vert
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_FLAT_TINT_VS
|
| precision mediump float;
@ ./node_modules/phaser/src/renderer/webgl/pipelines/FlatTintPipeline.js 12:21-56
@ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
@ ./node_modules/phaser/src/boot/CreateRenderer.js
@ ./node_modules/phaser/src/boot/Game.js
@ ./node_modules/phaser/src/phaser.js
@ ./src/index.js

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/ForwardDiffuse.frag
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_FORWARD_DIFFUSE_FS
|
| precision mediump float;
@ ./node_modules/phaser/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js 8:21-62
@ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
@ ./node_modules/phaser/src/boot/CreateRenderer.js
@ ./node_modules/phaser/src/boot/Game.js
@ ./node_modules/phaser/src/phaser.js
@ ./src/index.js

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/TextureTint.frag
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_TEXTURE_TINT_FS
|
| precision mediump float;
@ ./node_modules/phaser/src/renderer/webgl/pipelines/TextureTintPipeline.js 9:21-59
@ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
@ ./node_modules/phaser/src/boot/CreateRenderer.js
@ ./node_modules/phaser/src/boot/Game.js
@ ./node_modules/phaser/src/phaser.js
@ ./src/index.js

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/TextureTint.vert
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_TEXTURE_TINT_VS
|
| precision mediump float;
@ ./node_modules/phaser/src/renderer/webgl/pipelines/TextureTintPipeline.js 10:21-59
@ ./node_modules/phaser/src/renderer/webgl/WebGLRenderer.js
@ ./node_modules/phaser/src/boot/CreateRenderer.js
@ ./node_modules/phaser/src/boot/Game.js
@ ./node_modules/phaser/src/phaser.js
@ ./src/index.js
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

locohost picture locohost on 12 Nov 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

samme picture samme  路  4Comments
cncolder picture cncolder  路  4Comments
Secretmapper picture Secretmapper  路  3Comments
Colbydude picture Colbydude  路  4Comments
rootasjey picture rootasjey  路  3Comments