This week I had that moment you tap a colleague on the shoulder and asked the dreaded question: Is this broken for you in production, too? It was.

Panic

Wait, it doesn’t work? We tested this. Our integration tests check this. What happened? We have a cool little widget on our site that allows users to text themselves a link to download our app. Yeah, it stopped working.

What Happened?

We use jQuery inputmask to help the user type their mobile number. The inputmask provides context of what digit of their number they’re entering. It’s a nice little usability improvement that people have really liked so far.

Unfortunately, inputmask was updated from 3.1.0 to 3.1.21 (by way of 4 other releases that same day :-/) and it broke the inputmask entirely for us. The mask wouldn’t fire and users couldn’t input their number. I will save you my grumblings about this not following semantic versioning (since the community community has that locked down) and save this from happening to you.

Lock Down your Bower Versions

I guess I should have realized this, but by default when you bower install --save jquery.inputmask, it will insert a line in your bower.json file like this:

"jquery.inputmask": "~3.1.0"

That little ~ means a lot. Basically, it’s saying any version like 3.1.0 is acceptable. In theory, 3.1.21 should be acceptable, but it wasn’t and broke the component. I highly recommend going through your current production build, check which ~verison is really installed, and lock down your bower.json to that version. All you do is remove the tilde like this:

"jquery.inputmask": "3.1.0"

Now 3.1.0 will be installed. Every time. Until bower gets a shrinkwrap/lock solution this is a nice way to prevent obvious issues.