Resolving Ionic Serve lab JS error

February 7, 2017, 7:22 pm Categories:

Categories

While trying to locally test an Ionic 2 application on Safari 9.1.1 using ionic serve -lab I kept receiving the following error:

As you can see from the above screen capture the console message states that there's an unexpected identifier error with the lab.js file.

Why this happens I can't tell you because the same command launches the application without fail on Google Chrome and Firefox.

Having recently updated my system to the latest version of Apache Cordova/Ionic 2 I double checked my software installation using the ionic info command to see if there might be some potential issues there.

Doing so output the following to the Terminal:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0 
ios-sim version: Not installed
OS: OS X El Capitan
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002

The only possible fly in the ointment with the above is the absence of the ios-sim software yet, if this were the issue, why does the application launch in Google Chrome and Firefox without error?

No, it looked this was solely a problem with Safari.

Fixing the issue

I'm not an advocate of 'hacking' application source code (there's no guarantee that such hacks won't break other functionality and software updates can very easily remove 'solutions' to problems) but, where needs must, resolving this error is thankfully very simple.

Open the following script:

  • /node_modules/@ionic/app-scripts/lab/static/js/lab.js

Scroll down towards the bottom of the file until you see the following method:

function setCordovaInfo(data) {
  let el = $('#app-info');
  el.innerHTML = data.name + ' - v' + data.version;
  if(data.name) {
    document.title = data.name + ' - Ionic Lab';
  }
}

Locate this line towards the top of the method:

let el = $('#app-info');

Make the following minor change:

var el = $('#app-info');

Save the file and sit back as Ionic serve reloads, within a few seconds you'll see the application being launched in the browser.

Problem solved!

In summary

Ionic serve is a fantastic tool for testing your applications locally but, for some reason, Safari 9.1.1 throws out an unexpected indentifier 'el' error resulting in the application being unable to render in the browser.

Thankfully the above tweak to the lab.js file fixes this.

If anyone out there has experienced the same issue then I hope they find this helpful.

If any developers out there know of a better way to resolve this issue then let me know as the above feels kind of, well, hacky and not really something I feel entirely comfortable with.

If you enjoyed what you've read here then please sign up to my mailing list and, if you haven't done so already, take a look at my e-book: Mastering Ionic for further information about troubleshooting Ionic errors.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

Top