The "TypeError: n.curCSS is not a function‏" Error

Yesterday at work we deployed a new version of one of our websites to production after a successful test cycle in our QA and staging environments. However, once the site was deployed to production, a script error, "TypeError: n.curCSS is not a function‏", would appear whenever an attempt was made to display a jQuery UI dialog.

This left me scratching my head. It had worked fine in QA and staging, and the code in question had been around for months. It definitely had something to do with a difference in the production environment, but what?

The error in question was occurring in a JavaScript bundle being created by the website (which is an ASP.NET MVC 4.5 site) on start-up. I could view the source and see the offending line. After Googling the error message, I learned that it was related to an incompatibility between versions of jQuery and jQuery UI -- but again, this had worked perfectly in the other environments, and for quite some time. How could it be an incompatibility issue.

Using the console in Firebug, I verified that the loaded versions of jQuery and jQuery UI were what I expected them to be (1.8.3 and 1.10.1 respectively). But to make matters more confusing, when I searched both of those files for the line causing the exception, it wasn't there! So how was it making it into the bundle?

No sooner had this question entered my mind when my-coworker who I work on the site with sent me an IM. I'd mentioned the error to him, and in the meantime he'd had the admin set the compilation debug setting to true (which disables the bundling) and had noticed that we were referencing more than one version of the aforementioned files -- not explicitly, but rather through the bundle configuration! Since the last production build of the site, we had updated our jQuery and jQuery UI references via NuGet, but when we published the site to production we didn't remove any existing files from the production Scripts directory -- we simply deployed the current production build, which left the existing, outdated jQuery and jQuery UI files in place. The bundling mechanism, which works by naming convention in this case, picked up both the current and older versions of jQuery and jQuery UI -- apparently, there is nothing in the bundler logic to only take the most recent file for the specified naming convention. The offending line of code had been from the previous version of jQuery that we had in production, and because multiple versions had been bundled together, it allowed this error to occur. Going forward, to prevent this problem from occurring again, we'll be replacing that Scripts directory entirely and using only the files from the latest build. Lesson learned.


Popular posts from this blog

A Generic Method Using HttpClient to Make a Synchronous Get Request

The Cause and Solution for the "System.Runtime.Serialization.InvalidDataContractException: Type 'System.Threading.Tasks.Task`1[YourTypeHere]' cannot be serialized." Exception

How To Mock Out Child Components In Unit Tests of Angular 2 Code