DEV Community

Philip Perry
Philip Perry

Posted on

2 1

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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more