JavaScript error messages can be deceptive
Philip Perry
Posted on September 8, 2021
I was working on a project where an item can be many things. Currently it's just for characters, but in the future it might be used for other things later. So in order to keep things general, I named the class "Object":
import { IObject } from "../interfaces/IObject";
class Object {
getImage(object: IObject): string {
const imagePath = process.env.VUE_APP_BACKEND + '/images/characters/';
const image = imagePath + object.name + '.png';
return image;
}
}
export default new Object();
This is how I made the call to the method:
for(var i=0; i<allObjects.length; i++){
let image = Object.getImage(allObjects[i]);
}
When running the code in Firefox, I got the following error:
Uncaught InternalError: too much recursion
Object webpack-internal:///./src/classes/Object.ts:11
...
At first I thought something was wrong with the for loop. So my first step in debugging was to see what happens when calling the method only a single time (not in a loop). After it still happened, it finally occurred to me, that Object is probably a reserved name in JavaScript. After renaming the class to ObjectClass, the error disappeared.
I don't know why the JavaScript compiler or even VS Code didn't highlight this issue. If you know of a way to avoid these kind of errors (although rare), please let me know in the comments.
Posted on September 8, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.