I just spent an hour searching for how I could have gotten an

Uncaught TypeError: Cannot set properties of null

javascript. I checked the spelling of the element whose property I was trying to set and knew that element wasn’t null because the spelling was the same in the code as in the HTML. I also knew my element was loading, so it wasn’t that either.

Turns out no, the element was null. I was trying to set " NameHere" when the element’s actual name was “NameHere”.

Off by a single space. No wonder I thought the spelling was the same—because all the non-whitespace was identical. (No, the quotation marks slanting in the second NameHere and being totally vertical in the first NameHere wasn’t a part of the error, I am typing them all vertical and either Lemmy or my instance is “correcting” them to slanted for the second NameHere. But that is also another tricky-to-spot text difference to watch out for!)

And what did not help is that everywhere I specifically typed things out, I had it correct with no extra spaces. Trying to set " NameHere" was the result of modifying a bunch of correct strings, remembering to account for a comma I put between them, but not remembering to account for the space I added after the comma. In short, I only ever got to see " NameHere" written out in the debugger (which is how I caught it after like 30 repeats of running with the debugger), because everywhere I had any strings written out in the code or the HTML it was always written “NameHere”.

I figured I’d post about it here in case I can help anyone else going crazy over an error they did not expect and cannot figure out. Next time I get a similar error I will not just check spelling, I’ll check everything in the name carefully, especially whitespace at the beginning and end, or things one space apart being written with two spaces instead. Anyone else have a similar story to save the rest of us some time?

  • madeindjs@programming.dev
    English
    3·
    4 months ago

    My top 3 (as mainly JS dev) would be:

    1. Number overflow. It happens when you’re backend send big number ID serialized in a JSON. The solution is to wrap the number into a string when you know that can happens.
    JSON.parse('{"n": 123456789123456789012.0}').n
// => 123456789123456800000
    1. Mutating an Object by ref (now I use Object.freeze a lot). Something like:
    const CONFIGURATION = { conf: { enabled: false } }
// setup a "copy"
let currentConfiguration = { ...CONFIGURATION }
currentConfiguration.conf.enabled  = true
// try to reset the conf
currentConfiguration = { ...CONFIGURATION }
// => { conf: { enabled: true } }
    1. Assignation instead of comparison (now my IDE warn me)
    if (foo = false) {
  // do something
}