Parcel: 🐛 Parcel is struggling with Phaser v3

Created on 2 Mar 2018 · 13Comments · Source: parcel-bundler/parcel

I'm trying to bundle phaser v3 with Parcel-bundler but parcel gives me weird behavior.
while bundling parcel struggling in some files forever and didn't complete bundling

my GitHub repo for my project: https://github.com/22mahmoud/Phaser.io-v3-Boilerplate

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 3.1.2
| Node | node 9.3.0
| npm/Yarn | yarn 1.4.0
| Operating System | Windows 10 x64

Bug

Source

22mahmoud

Most helpful comment

Hi everyone! The reason why #831 isn't merged yet is because of some bug with resolving glslify dependencies (and that's why the tests are red). I'm still trying to figure out why it happens. I fail to reproduce it on every environment, but it seems to me that updating yarn to 1.5.1 resolves the bug. I'll do my best to figure it out as soon as possible and maybe to come up with a workaround.
Technically #831 is already working

mvlabat on 5 Mar 2018

👍2

All 13 comments

I just tried to reproduce, but Parcel did not freeze up.

However, I did get an error when I ran the app:

Uncaught ReferenceError: WEBGL_RENDERER is not defined
    at Object.require.439.../../utils/NOOP (SpriteRender.js:10)
    at newRequire (1a7c08fb979da999ab75156d72ea7cb4.js:42)
    at localRequire (1a7c08fb979da999ab75156d72ea7cb4.js:48)
    at Object.require.268.../../utils/Class (Sprite.js:10)
    at newRequire (1a7c08fb979da999ab75156d72ea7cb4.js:42)
    at localRequire (1a7c08fb979da999ab75156d72ea7cb4.js:48)
    at Object.require.267.../../utils/Class (Sprite3D.js:9)
    at newRequire (1a7c08fb979da999ab75156d72ea7cb4.js:42)
    at localRequire (1a7c08fb979da999ab75156d72ea7cb4.js:48)
    at Object.require.457.../../utils/Class (Camera.js:13)

@22mahmoud Is this expected, or do you think this is an issue with how Parcel is bundling your app?

Btw, I’m using MacOS (High Sierra), so although I couldn’t get it to freeze, maybe somebody on Windows will be able to get the same behavior.

davidnagli on 2 Mar 2018

Comment by rblopes (https://github.com/photonstorm/phaser/issues/3121#issuecomment-350720870)

You'll need to define both WEBGL_RENDERER and CANVAS_RENDERER booleans, somewhere in your app configuration, to enable either renderer for you game.

[...] I know that for Webpack you'll face a similar problem, but you can solve it by adding webpack.DefinePlugin to define those two values in the configuration.

There is no webpack.DefinePlugin-like functionality in parcel.

mischnic on 2 Mar 2018

You can fix this by defining the variables in your entry html file :

<!DOCTYPE html>
<html>
  <body>
    <script>
      var WEBGL_RENDERER = true
      var CANVAS_RENDERER = false
    </script>
    <script src='./index.js'></script>
  </body>
</html>

fathyb on 3 Mar 2018

❤1 🎉1

I removed the node_modules folder, It worked without freezing but I faced the same issue as @davidnagli .

and I tried to set global variables as @fathyb made, but there is another error

Uncaught Error: Failed to compile Vertex Shader: ERROR: 0:1: '/' : syntax error

and in core files of phaser, he expected to receive the variables from webpack.DefinePlugin so I'll take a look at webpack implantation

22mahmoud on 3 Mar 2018

This is a different error. If you do exactly the same as DefinePlugin you'll get the same error.

Phaser fails to load its GLSL shaders. I'm trying to find out why it can't, in the meantime if only the canvas renderer is enough for you you can do WEBGL_RENDERER = false, CANVAS_RENDERER = true instead.

fathyb on 3 Mar 2018

even if using only canvas and render assets this is the result

22mahmoud on 3 Mar 2018

WebGL shader error:

Phaser tries to use /dist/0591441950cadcfa9697e7a2d37e3259.vert as the shader source code, because

var ShaderSourceVS = require('../shaders/TextureTint.vert');
ShaderSourceVS == "/dist/0591441950cadcfa9697e7a2d37e3259.vert"

EDIT:
Because #831 isn't merged yet

Canvas renderer error:

needed changes:

use parcel src/index.html --public-url / instead of parcel src/index.html
copy the asset folder into dist

mischnic on 4 Mar 2018

cc @mvlabat

davidnagli on 4 Mar 2018

mvlabat on 5 Mar 2018

👍2

@22mahmoud, I've tried to run your project on my glslify branch - shaders are compiled successfully. But I'm not able to get the correct result, I see the same thing as on the screenshot above.
@mischnic, passing --public-url / just breaks everything for me, even index.html isn't loaded, so I stare at white screen.

Upd. Oh, it works! I had to change paths to the assets to be like this: this.load.image('sky', '/dist/assets/sky.png');
Running with parcel src/index.html and assets folder being copied to dist is working great
:)

mvlabat on 9 Mar 2018

@mvlabat With --public-url /, you have to open localhost:1234/index.html explicitly. (Corresponding issue: https://github.com/parcel-bundler/parcel/issues/782)

mischnic on 9 Mar 2018

👍1

This will work flawlessly with the next release.
WebGL shaders will work properly and the dist/ in this.load.image('sky', 'dist/assets/sky.png'); isn' t needed anymore because the default public url was changed to /.

mischnic on 23 Mar 2018

👍1

This should have been fixed in 1.7.0, feel free to reopen if needed.

fathyb on 2 Apr 2018

Was this page helpful?

0 / 5 - 0 ratings