Today I encountered a problem with jQuery.BlockUI and I’m hoping to alleviate someone else from having to deal with the grief that I experienced. With a demo coming up in a few days, we were attempting to publish an ASP.NET MVC app to our test environment for the first time. Having done such a thing many times before, it should have been easy, but of course, if you’ve been in this business for some time, you know that never happens.

CoffeeScript Problem?

To start with, I tried publishing to my local IIS server, just to flush out any problems. Then, bingo, right out of the gate, I noticed that a couple of my JavaScript files weren’t included in the bundle. Hmph. Ok, perhaps something was up with my BundleConfig, so I took a look at the file. Nothing seemed out of place. I included my scripts properly in the bundle. What threw me off a bit was that I actually use CoffeeScript instead of plain vanilla JavaScript. I use Mindscape’s Web Workbench within Visual Studio. This allows me to create a .coffee file and it will generate the .js and .min.js alongside the CoffeeScript file whenever you save. I figured that MVC was having an issue loading the JavaScript because there is that extra .coffee file. That got me to add the following line to my BundleConfig:

    bundles.IgnoreList.Ignore("*.coffee");

ASIDE: This is in addition to clearing the default bundle ignore list. By default, in Debug mode, the bundler won’t include the minified (*.min.js or *.min.css) files. To get around that, you can clear the bundles IgnoreList and just add in what you want to ignore, e.g. *.intellisense.js. You can find more information in this forum post

Now that I ignored the CoffeeScript file, I changed my bundle includes from:

.Include("~/Scripts/myscript.js")

to

.Include("~/Scripts/myscript.*")

I actually tried the .* trick prior to ignoring *.coffee. Oddly enough, the CoffeeScript file ended up getting rendered, but not the Javascript. Odd. Anyway, as I’m sure you guessed, that wasn’t my problem…

IMPORTANT: Using the wildcard here for my situation is incorrect. I just used it for testing. Since we just have a .js and .min.js, what ends up happening is that the bundle, when rendered will include BOTH the .js and .min.js scripts, causing duplication if you have event handlers being attached. In other words, use the wildcard correctly! I ended up reverting back to just .Include("~/Scripts/myscript.js"), which is correct.

The Culprit: BlockUI

My next step was to break off my script from the rest of the bundle. I created a new bundle with just my scripts in it, and referenced it in my Layout. Success, my scripts rendered. Ok, I’m on to something now. My scripts appeared at the bottom of three other scripts. Two of them were Kendo UI scripts, and then BlockUI. Given the small number, I started messing around with two bundles. After some time, I found out the problem, it was with BlockUI. I had installed the NuGet package in my project (version 2.60), and for some reason, the minified version of BlockUI caused anything after it to not load. Odd. I didn’t dive too deeply into why this was happening, but what fixed the problem was updating to v2.60.1 of BlockUI. With v2.60.1, all seems to be working as expected.

Wrap Up

Like many of the posts on the Visoft, Inc. Blogs, my aim to help others solve their problems as quickly and painlessly as possible. It turned out that BlockUI, for whatever reason, broke my MVC bundle. It’s something to be aware of, as I’m sure there could be other scripts out there that cause a similar issue.