Phaser broken after reinstalling node_modules

Phaser 3
1

Hi, I’m pretty new to game dev and I do not have much experience with npm BUT I’ve been developing in python for a lot of years and I also worked with javascript before (+ I work as a DevOps), so I’m not a complete noob when it comes to development.

I’ve been working on a game that will serve as my wedding invitation for around 50 hours now, there’s a lot of effort and work put on it. It was working well until I wiped node_modules and tried to make a fresh install of everything.

Now I’ve tried using Parcel, and also using webpack, and either way everything is compeltely broken. Even when I get to install modules and start node I get lots of messages like these:

aser.js:116922 Failed to process file: tilemapJSON "level1"
onProcessError @ phaser.js:116922
onProcess @ phaser.js:123532
nextFile @ phaser.js:118042
onLoad @ phaser.js:116838
load (async)
XHRLoader @ phaser.js:118714
load @ phaser.js:116803
(anonymous) @ phaser.js:117996
each @ phaser.js:206008
checkLoadQueue @ phaser.js:117982
start @ phaser.js:117932
bootScene @ phaser.js:193135
start @ phaser.js:193901
bootQueue @ phaser.js:192888
emit @ phaser.js:218
texturesReady @ phaser.js:17104
emit @ phaser.js:218
updatePending @ phaser.js:210990
emit @ phaser.js:199
image.onload @ phaser.js:211131
load (async)
addBase64 @ phaser.js:211123
boot @ phaser.js:210969
emit @ phaser.js:218
boot @ phaser.js:17086
DOMContentLoaded @ phaser.js:30879
Game @ phaser.js:17046
g9e9u.phaser @ game.js:29
newRequire @ index.c3fdd8eb.js:71
(anonymous) @ index.c3fdd8eb.js:122
(anonymous) @ index.c3fdd8eb.js:145
phaser.js:123528 Uncaught SyntaxError: Unexpected token '<', "<html>
	<h"... is not valid JSON
    at JSON.parse (<anonymous>)
    at TilemapJSONFile.onProcess (phaser.js:123528:33)
    at LoaderPlugin.nextFile (phaser.js:118042:18)
    at TilemapJSONFile.onLoad (phaser.js:116838:21)
onProcess @ phaser.js:123528
nextFile @ phaser.js:118042
onLoad @ phaser.js:116838
load (async)
XHRLoader @ phaser.js:118714
load @ phaser.js:116803
(anonymous) @ phaser.js:117996
each @ phaser.js:206008
checkLoadQueue @ phaser.js:117982
start @ phaser.js:117932
bootScene @ phaser.js:193135
start @ phaser.js:193901
bootQueue @ phaser.js:192888
emit @ phaser.js:218
texturesReady @ phaser.js:17104
emit @ phaser.js:218
updatePending @ phaser.js:210990
emit @ phaser.js:199
image.onload @ phaser.js:211131
load (async)
addBase64 @ phaser.js:211123
boot @ phaser.js:210969
emit @ phaser.js:218
boot @ phaser.js:17086
DOMContentLoaded @ phaser.js:30879
Game @ phaser.js:17046
g9e9u.phaser @ game.js:29
newRequire @ index.c3fdd8eb.js:71
(anonymous) @ index.c3fdd8eb.js:122
(anonymous) @ index.c3fdd8eb.js:145
Loading.js:15 0.3571428571428571
phaser.js:116922 Failed to process file: tilemapJSON "level2"
onProcessError @ phaser.js:116922
onProcess @ phaser.js:123532
nextFile @ phaser.js:118042
onLoad @ phaser.js:116838
load (async)
XHRLoader @ phaser.js:118714
load @ phaser.js:116803
(anonymous) @ phaser.js:117996
each @ phaser.js:206008
checkLoadQueue @ phaser.js:117982
start @ phaser.js:117932
bootScene @ phaser.js:193135
start @ phaser.js:193901
bootQueue @ phaser.js:192888
emit @ phaser.js:218
texturesReady @ phaser.js:17104
emit @ phaser.js:218
updatePending @ phaser.js:210990
emit @ phaser.js:199
image.onload @ phaser.js:211131
load (async)
addBase64 @ phaser.js:211123
boot @ phaser.js:210969
emit @ phaser.js:218
boot @ phaser.js:17086
DOMContentLoaded @ phaser.js:30879
Game @ phaser.js:17046
g9e9u.phaser @ game.js:29
newRequire @ index.c3fdd8eb.js:71
(anonymous) @ index.c3fdd8eb.js:122
(anonymous) @ index.c3fdd8eb.js:145
phaser.js:123528 Uncaught SyntaxError: Unexpected token '<', "<html>
	<h"... is not valid JSON
    at JSON.parse (<anonymous>)
    at TilemapJSONFile.onProcess (phaser.js:123528:33)
    at LoaderPlugin.nextFile (phaser.js:118042:18)
    at TilemapJSONFile.onLoad (phaser.js:116838:21)
onProcess @ phaser.js:123528
nextFile @ phaser.js:118042
onLoad @ phaser.js:116838
load (async)
XHRLoader @ phaser.js:118714
load @ phaser.js:116803
(anonymous) @ phaser.js:117996
each @ phaser.js:206008
checkLoadQueue @ phaser.js:117982
start @ phaser.js:117932
bootScene @ phaser.js:193135
start @ phaser.js:193901
bootQueue @ phaser.js:192888
emit @ phaser.js:218
texturesReady @ phaser.js:17104
emit @ phaser.js:218
updatePending @ phaser.js:210990
emit @ phaser.js:199
image.onload @ phaser.js:211131
load (async)
addBase64 @ phaser.js:211123
boot @ phaser.js:210969
emit @ phaser.js:218
boot @ phaser.js:17086
DOMContentLoaded @ phaser.js:30879
Game @ phaser.js:17046
g9e9u.phaser @ game.js:29
newRequire @ index.c3fdd8eb.js:71
(anonymous) @ index.c3fdd8eb.js:122
(anonymous) @ index.c3fdd8eb.js:145
phaser.js:120384 Error decoding audio: background_music -  Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data
(anonymous) @ phaser.js:120384
phaser.js:116922 Failed to process file: audio "background_music"
onProcessError @ phaser.js:116922
(anonymous) @ phaser.js:120386
phaser.js:120384 Error decoding audio: audio_coin -  Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data
(

This is my package.json at the moment, but I’ve been iterating on it a lot. Anyway the original one won’t work anymore either:

{
	"name": "sdk-game-demo",
	"version": "1.0.0",
	"description": "Phaser on a Loom DappChain",
	"scripts": {
		"start": "parcel src/index.html -p 8000",
		"build": "rm -rf ./dist && parcel build src/index.html --no-source-maps --public-url ."
	},
	"author": "Loom Network",
	"license": "MIT",
	"devDependencies": {
		"@babel/core": "^7.21.4",
		"@babel/preset-env": "^7.21.4",
		"babel-loader": "^9.1.2",
		"copy-webpack-plugin": "^11.0.0",
		"file-loader": "^6.2.0",
		"html-webpack-plugin": "^5.5.0",
		"json-loader": "^0.5.7",
		"parcel": "^2.8.3",
		"phaser": "^v3.60.0-beta.23",
		"process": "^0.11.10",
		"ts-loader": "^9.4.2",
		"typescript": "^5.0.3",
		"webpack": "^5.77.0",
		"webpack-cli": "^5.0.1",
		"webpack-dev-server": "^4.13.2"
	},
	"dependencies": {
		"phaser": "^3.55.0"
	}
}

This is the Dockerfile I’m using:

FROM node:latest

WORKDIR /app

COPY package.json /app

# RUN npm install

ENV PORT=8000
EXPOSE 8000

RUN mkdir /app/.parcel-cache

CMD [ "npm", "start"]

The npm install is commented because I’m mounting the local volume when running the container to avoid installing the modules each time:

#!/bin/bash
docker build -t parcel -f Dockerfile-dev .
docker run --name game --rm \
        --entrypoint=npm \
        -v $(pwd):/app \
        -w /app \
        -u 1000:1000 \
        -p 8000:8000 \
        -p 1235:1235 \
        parcel \
        run start

I’ve been debugging this for 4 hours now, and I don’t know what to do anymore. I’m not able to spin up the game anymore. This is extremely frustrating, I just cannot afford to send to the trash all the hours spend on this.

I’m trying to run this on docker, but this shouldn’t really matter.

Can someone guide me to the proper path?

2

It looks like the tile map json url is wrong. In parcel assets need to be imported to use in JavaScript.

3

How do you come to that conclusion? The log file is not really descriptive.

I’ve tried another approach, using webpack this time, at least I could make it work for development (changing all paths for imports, as you said) but the production build will not work either, same as with parcel. I believe the issue with webpack is that it’s not copying the assets folder to the dist folder.

Anyway I might give parcel another chance after switching to the imports.

I’ll update this post. Thanks for your help.

4

The invalid json error is the cause. And that happens because parcel is sending an html page.

1 Like
5

I ended up making it work with vite. I had to do a few changes in my folder structure and I believe migrating to parcel would be relatively easy, but I think that vite works better than parcel for my needs since it improved 10th times the loading time when deploying it to Google Cloud Run.

Anyway, thanks for the help!