DEV Community

Philip Perry
Philip Perry

Posted on

JavaScript error messages can be deceptive

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();
Enter fullscreen mode Exit fullscreen mode

This is how I made the call to the method:

for(var i=0; i<allObjects.length; i++){
      let image = Object.getImage(allObjects[i]);
}
Enter fullscreen mode Exit fullscreen mode

When running the code in Firefox, I got the following error:

Uncaught InternalError: too much recursion
    Object webpack-internal:///./src/classes/Object.ts:11
    ...
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)