Phaser not playing well with Parcel

Phaser 3
1

I’m teaching my daughter to code in Javascript! We found a really nice Phaser code example online which looks like a great base from which to build a simple game. My browser reports a couple of odd errors though when after downloading the source and running on my home PC via Parcel. This prevents the code sample from running locally. Any help would be appreciated!

  • XML Parsing Error: mismatched tag. Expected: </link>.
    Parcel has added a <link> tag, but with no closing </link> to index.html. I can bypass the error by manually modify the <link> tag to a self-closing tag (<link .../>), though it’s odd that Parcel wouldn’t make the tag self-closing to begin with! Oddly, the original index.html contains a self-closing <meta> tag, but it removes the / from the tag making it non-self-closing. Is there a way to force Parcel to not mangle my index.html file?

  • Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    Stacktrace indicates that the line new Phaser.Game(config); results in this error. When I trace through, the web console reveals that Phaser is attempting to read the contents of index.html as JSON. No idea why it’s trying to do that! Any thoughts?

2

Usually a 404 served as a 200. Try copying your assets folder to the dist folder.

3

Usually a 404 served as a 200. Try copying your assets folder to the dist folder.

The XML parsing error triggered by the Phaser.Game(config) call is indeed due to the fact that the string attempting to be parsed is actually formatted as HTML. Not something in the expected JSON format. When I inspect the contents of the HTML string, instead of a 404 page it’s my index.html file. For some reason it’s attempting to read index.html as JSON! I tried copying the assets to the dist folder, but alas, it was to no avail. :frowning:

Stacktrace provided below:

onProcess phaser.js:10180
nextFile phaser.js:177475
onLoad phaser.js:4429
XHRLoader phaser.js:99224
load phaser.js:4399
checkLoadQueue phaser.js:177429
each phaser.js:29746
checkLoadQueue phaser.js:177415
start phaser.js:177365
bootScene phaser.js:80388
start phaser.js:81090
bootQueue phaser.js:80132
emit phaser.js:2023
texturesReady phaser.js:142653
emit phaser.js:2044
updatePending phaser.js:82067
emit phaser.js:2025
onload phaser.js:82193
addBase64 phaser.js:82185
boot phaser.js:82046
emit phaser.js:2044
boot phaser.js:142638
check phaser.js:72289
DOMContentLoaded phaser.js:72303
Game phaser.js:142598
parcelRequire<["src/index.js"]< index.js:44
newRequire src.a2b27638.js:47
parcelRequire src.a2b27638.js:81
<anonymous> src.a2b27638.js:120
4

Check your dev tools Network tab. You’ll (probably) see '200’s even though it can’t find the assets (like a Plugin JSON). This is a Parcel (and other bundlers) thing. It just doesn’t return 404, but returns index.html. If you go to localhost:1234/whatever you’ll see this too.
So the point is, make sure it can find the assets…

For some reason it’s attempting to read index.html as JSON!

No, Phaser is likely trying to parse a plugin JSON. Look at the error in the dev console.

I tried copying the assets to the dist folder,

The assets by itself? It needs the actual ‘assets’ folder. Check by going to localhost:1234/assets/yourfile.json

5

2023-10-08 19-15-09 npc

I moved the “assets” folder into the “dist” folder and everything worked like magic! I had previously interpreted the suggestion to move “assets” to the “dist” folder as meaning moving just the assets themselves. Thanks @Milton!

6

One way to do this is by package.json:

{
  "scripts": {
    "prebuild": "npm run copy-assets",
    "prestart": "npm run copy-assets",
    "copy-assets": "cp -Rv src/assets dist/assets"
  }
}
7

I found the “copy-assets” script suggested by @samme to be a cleaner solution, though manually moving the folder worked as well.