Webpacket + Typescript + Phaser 3 = Error with # ???

[Nodragem]

Hello,

This morning I tried to follow the following tutorial which explains how to use webpack with phaser 3:

https://snowbillr.github.io/blog/2018-04-09-a-modern-web-development-setup-for-phaser-3/

The only point where I diverge from the tutorial is that I tried to used Typescript instead of ES6.

 

When I run `yarn run webpack-dev-server`, I get a lot of errors that looks like that:

ERROR in ./node_modules/phaser/src/renderer/webgl/shaders/BitmapMask.frag 1:0
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/app.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.ts

 

Hence it seems that tsc or webpack do not like the # characters in phaser 3's source code. Any idea of what I am doing wrong?

You can find a zip of the project attached (I deleted the node_modules folder to keep it light).

 

tuto-webpack.zip

[phaserlover]

Looks like your webpack is trying to import a .frag file, which is not javascript. "#define SHADER_NAME PH ASER_BIT MAP_MASK_FS" is a comment, but not in javascript, another language. You might want to exclude that extension, or similar. I'm using typescript and works fine out the box with create-react-app-typescript

[Nodragem]

Thank you for your answer @phaserlover. Do you mean that webpack is working well out-of-the-box with phaser 3?

 

Someone trying the tuto ran into the same problem and answered to my comments under the blogpost: https://snowbillr.github.io/blog/2018-04-09-a-modern-web-development-setup-for-phaser-3/

I take the liberty to copy paste their solution here:

Quote

 

I ran into the same issue. Here is how I got it to work.

Based on the webpack phaser template (https://github.com/photonst..., we need to use a raw-loader for the vert and frag files.

So add this to your webpack config in the rules section:

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

You need that raw-loader dependency: yarn add -D raw-loader@^0.5.1

Then I noticed that the typeof keyword in the DefinePlugin was causing an issue, so I removed it:

new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true)
})

That's how it is in the template. Hope it works.

 

 

Hope that will help some people getting the same issue

[snowbillr]

Hey there!

Thanks for posting about this, I'd love to figure out what's going on. Someone actually made a pull request to add the raw-loader to the project (https://github.com/snowbillr/phaser3-webpack-es6-dev-starter/pull/1).

I was unable to reproduce the issue though, and when this person cloned the repository freshly, they weren't either.

What version of Phaser are you on? Where did the tutorial stop working?

[Nodragem]

The tutorial stops to work when we call the webpack server after we ran the line:

yarn add phaser@^3.0.0

(You can see the error that is thrown in my first post).

 

In my case, the above yarn command was installing phaser 3.0.0. After I read the github issue you mentioned, I tried to update phaser to the last version using:

yarn add phaser

 

Now, the project is using phaser 3.11.0 and webpack bundles it successfully  . Problem solved!

 

Hence, the solution I provided above (which I got from someone in the comment of the blogpost) is not recommended; instead, just make sure that you  are using the last version of phaser (3.11.0)  

[Nodragem]

Note, with Webpack 4.0 I get the error:
 

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.