Phaser Tileset Error

Phaser is a popular HTML5/JavaScript game engine. It allows you to more rapidly develop complex browser games. Today I was working on a game and I received a "Phaser.Tileset - actual and expected number of tile rows and columns differ" error.

It was surprising, because I had not made any changes to my source code. I was however, on a different computer, so my browser may have been a different version. The error also only happened in Firefox (49.0.2) and not in Chrome or Safari.

When the error occurred (it did not occur every time I loaded the page) it lead to the same being playable, but the images were not fully loaded.

Looking at the Phaser code I see that this error is produced when I run addTilesetImage on a tilemap. Though the image has previously loaded, for whatever reason, Phaser sees the image as having a width and height of 0.

It was strange because I see that the image is properly loaded in my Preload.js file, and has a proper height and width, but then in my main Game.js file, the image no longer has a width or height, causing this error.

I thought this was due to some race condition, where the image is not fully loaded before the addTilesetImage command is ran, but this does not seem to be the case. Maybe it is something unique to this version of Firefox, I am unsure.

To solve the error, I moved my image preloading from a separate Preload.js file into the preload function of my main Game.js file. Doing so ensures that the images are still loaded before the game play starts, but for whatever reason the images now have a width and height stored in cache, allowing the tilemap to load correctly.