Vue Component doesn't render on certain Google Chrome browsers (i.e. Chrome 60)

It may be because you are going with the "latest thing". Large enterprise companies, State Governments do not touch new stuff until it's been out at least several months. Imagine Fedex every month updating to only the latest thing, their customer base would fall.

@jlrdw I hear what you mean. I'm not doing anything fancy though. I am using Vue 1.x and Laravel 5.3 and my component is nothing fancy. The only thing it doesn't work in some Chrome browsers but I don't know why.

Hum, does that version of vue have a browser compatibility chart somewhere? Which version of chrome, older or newer. Investigate which chrome version.

EDIT: I just did a google search for vue not working, there are many many pages of problems it seems, why even use vue if there are so many compatibility issues? Perhaps use plain js or jquery.

And if plain js, do not write code in latest new techniques, use older style for backwards compatibility.

ANOTHER EDIT: I was curious, I checked Fedex, here are what their compatibility is:

• adopted browsers:
• Internet Explorer 7.0 and higher
• Safari 4.0 and higher
• Google Chrome 12 and higher
• Mozilla Firefox 4.0 and higher

Like I said, large enterprise isn't going to chance loosing a large customer base due to older browsers.

does not work on Chrome 60 on OSX

The element room-types does not get populated

I was surprised by the page weight inner.js is over 1MB! and the page takes over 4 seconds to load!

@jlrdw and @Snapey ... thanks for your comments!

@jldrw I thought that Elixir/Browserify would compile ES2015 code to vanilla JS to maintain reasonable backwards compatibility. It was very interesting how far back the Big Boys are supporting older browsers!

@Snapey the inner-..js is from stripe off a CDN and I'm not sure how I can eliminate that. I don't think stripe allows us to reference a local copy of the source but I may be mistaken. The images are also a little heavy even after compression hence the 4s load time :( I tried my best to minimize this!

I found the issue also was with the roomTypes not getting populated properly on certain browsers. While troubleshooting I used Forge to install Let'sEncrypt SSL on the testing environment and it ended up breaking the roomTypes across all browsers!

It then figured out that the json returned was not being parsed correctly for some reason, so I updated my code from:

this.roomTypes = response.data

to the following

this.roomTypes = JSON.parse(response.data)

This has resolved the issue on my Chromebook and on Chrome 60 OS X. @Snapey if you have time perhaps you can double confirm at https://petopia.prime7pms.com/book

The new problem is that I cannot SEARCH for available rooms on all other browsers except for the latest chrome browsers! Safari (Mac and iPhone), Firefox (Mac and iPhone), Chrome (iPhone) all stopped responding. I get a response back from my back end and it is parsing it correctly, but I don't know what's happening in my Javascript.

I'll take a dinner break and come tackle this again with a fresh mind. I am praying one of you might have a solution for me by then!

Thanks again guys!

Some kind of syntax error...

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

Seemed to have resolved it with this...

this.roomTypes = JSON.parse(JSON.stringify(response.data))

Now it works on Safari, Firefox, and Chrome on my iMac, works on my Chromebook, works on my iPhone in Safari, Firefox, and Chrome.

I hope this actually helps someone else!

Glad you got it.

Thank @jlrdw :)

Thought I had it, but I didn't. As it turns out in Chrome 60 the AJAX query is getting back a String.

In Chrome 59 and other browsers the AJAX query returns a json array of objects. This also holds true for the mobile version of Chrome 60.

So basically for Chrome 60 I have to do this: this.roomTypes = JSON.parse(response.data)

and for all other browsers I have to simply do this: this.roomTypes = response.data

Need to sleep on this. Don't know if it's worth adding special logic based on Browser version at this stage... Otherwise I may have to keep revisiting the logic when new Browser versions behave differently... sigh...

Came across this that confirmed my today's struggles... https://stackoverflow.com/questions/45360348/in-crome-60-http-get-returns-response-data-as-string-instead-of-json-array

Came up with a much simpler solution than having to check Browser versions etc. like I initially attempted.

I added the following method to my Vue components:

    makeJsonObject(data) {
      if(typeof data == 'string') {
        return JSON.parse(data)
      }
      return data
    }

Then I simply called the method and fed in the response like so:

this.roomTypes = this.makeJsonObject(response.data)