Babel does not transpile everything and it might break your application

Today I noticed that a strange error had happened over the weekend. I couldn’t immediately frame it correctly, but after some debugging I found out what the problem was. The error message was the following:

TypeError: Object doesn’t support property or method ‘parseFloat’

As we’re using Babel I would have expected that if these new functions were not available in older browsers, they would get compiled into something that actually works. But apparently this is something which is currently not in the scope of the Babel project.

The problem is that we used the newer Number.parseFloat(someFloat) in favor of the global parseFloat() function in a new component. This Number syntax looks a bit cleaner as you’re using less globals, but besides that there’s no difference at all. We just assumed that this would work, as it’s part of the ES2015 syntax and we can normally use what’s in the standard thanks to Babel. That wasn’t the best assumption to make, as Babel does not do anything for these functions. And apparently it’s too boring to implement this for the guys at Microsoft and Apple :-)

I fixed my stuff by going back to the global functions, but you can also consider using this Number version of parseFloat or parseInt. The suggested polyfill is as simple as it gets:

Number.parseFloat = parseFloat;

You really have to do either of those as it’s not only Internet Explorer which does not support the new syntax yet. Even Safari does not support these newer functions. And on mobile Firefox is the only browser which does support this.

I wrote this little post as I hope it would light a bulb if you ever consider to use one of these newer functions. Using a transpiler/compiler like Babel doesn’t guarantee you’re ass is covered in every case, so you will always have to remain careful about browser support.

Another way to prevent these kind of errors from happening, would obviously be that Babel could handle them as well

Just keep in mind that for the time being you need to double check browser support when you’re starting to use a new function.