Sunday, November 6, 2016

Hybrid Mobile App Filepath Case-Sensitive Issue

I have been yearning to learn Hybrid App Development for a very long time. To get started, i wanted to be good at fundamentals in  20+years old web technology - HTML/CSS/JS. Hence, i did this course in Coursera first and then did a round of R&D for the Hybrid frameworks and decided to start with Ionic, as i found Ionic framework to be the best in the industry as far as i know. Hence, did this Ionic course in Udemy, which is good starter for programmers. 
Enough of my story. 
Jumping into the context; After finishing up the course(not really finished, just watched the On-Demand videos as usual), i tried to create an app during which i faced an issue which was very weird, i.e., everything was working fine on the browser, but it wasn't working on the actual mobile devices, both iOS & Android, which were supposed to be the target devices. 
First, the catch i made was that the issue was consistent on both (iOS&Android) these devices, so definitely its not an OS specific issue. 
Next, i tried to print logs around all the code where the issue was producing and found that  one specific library(randomColor.js) was the cause of the issue, which was added at last (as far as i remembered), so i put logs around the code used in my JS file which were printed in the device console and noticed that none of my code written after that library's code was getting executed. 
To confirm that the randomColor.js is the cause, i just commented out all the library related code from my JS file & everything was working fine on all the devices, so the culprit was that library. Now, i wanted to find out if the issue was in my code or in the lib code. I saw that the lib had hundreds of stars & active contributors, so there's less chance of having any such critical issue left out in the prod version. 
So, finally, i decided to check the lib integration process from the start again & found out that a very minor mistake i did was the ROOT Cause of this major issue. 
The issue was that there was a case-sensitive file name typo i made in the import statement in my "index.html" file. 
This was the path of "randomColor.js" file in my project:
But, i imported this lib in "index.html", like this:

Did you notice?
Yes, that Su**ing CAPITAL 'C' (Have marked in Bold above) was the culprit. 

Since, browsers does case-insensitive search for JS files, whereas both the native mobile platforms does case-sensitive file search, hence i was faced with the issue after integrating "randomColor.js" with typo in file import code. 

It might not be a very big issue, but it wasted a lot of my time, hence thought of logging it here, thus hoping to save someone else time with this crap. 

Thanks for taking out your time to read my stuff. 😊

No comments: