Sunday, October 26, 2014

Problem with id="global" in HTML

I am a fan of Moment.js. I am using is quite often for formatting dates in my Knockout view models.

In my current project I made some changes, and suddenly, it didn’t work any longer. I only got the exception

  • TypeError: Object expected (Internet Explorer)
  • ReferenceError: moment is not defined (Chrome & Firefox)

I ended up with deleting nearly everything in my page - until it worked again. So I found out the reason (after hours): I had added the following element:

<div id="global"> ... </div>

And this confused Moment.js. Because Moment.js contains support for Node.js:

var moment,
VERSION = '2.8.2',
// the global-scope this is NOT the global object in Node.js
globalScope = typeof global !== 'undefined' ? global : this,

That means with my div, globalScope will be set to this div, which doesn’t provide the expected functionality. So my lesson is to never use the id “global” again in my HTML code – at least as long as I can remember this problem.

I hope this post helps to remember.