VueJS not Rendering in Safari

Question

Safari isn't rendering my single page application built in VueJS.

I have spent 2 weeks developing it. It contains components that show or not depending on user clicks. And data objects that are rendered via the "v-for" element.

In chrome all works perfectly!! In mozilla also...in safari the list doesn't show up. Why isn't safari rendering anything?? I can't even debug it..

I looked up work arounds, like polyfills...but these seem to not be supported by safari..so there's no point in implementing them.

Would love some support or insights guys..if there's no work around does that mean i have to go back a build it in JS + Jquery?

Thanks in advance

Answer 1

So, I had this same issue. Meaning, a series of components listed with a v-for but not rendered on the screen (or the DOM) only in Safari (on Mac) even though it worked just fine on Firefox and Chrome (even on Mac). And after long and hard attempts, I was able to resolve the issue. I will give the answer in two parts.

THE QUICK ANSWER

In my case, the render error was the end result of a date conversion gone wrong somewhere deep in my code in a helper file. Indeed, in this file, I was receiving an ISO date in string format and transforming it into a JS date object through new Date(myISODateString). While Firefox and Chrome handle this conversion just fine, Safari was producing 'Invalid Date' errors and the chain-reaction was only effecting a single component. Once I corrected this date parsing, everything was being rendered correctly in Safari. In this instance, I used Luxon to do the conversion, I will give that as the solution

DateTime.fromISO(myISODateString, { setZone: true }).toJSDate();

THE LONG ANSWER

I think what is even more valuable in this experience is how I found out that this was the problem since in your case, it will probably be some other particularity of Safari that is causing the error.

It was actually Frank Provost's comment on this question that guided me in the right direction. It goes without saying that smaller components are most of the time constructed from their props. It is like their life source. If props are erroneous, internal operations and render will also be problematic. So I decided to console, within the lifecycle hooks, the props that my non-rendering component was receiving. Of course, nothing was printed out to the console. So I went up one level above and did the same thing for the props of the parent component. This time, I was getting information in the console but there were variations in what is being printed to the console between Firefox and Safari. By the way, the props were not filled in at created or mounted in my case since they depended on an asynchronous network operation. So, my console debugging looked like this;

created(){
  setInterval(() => {
    console.log(this.myProp);
  }, 5000, this);
}

Long story short, by going up this way, component to component, variable to variable, I found out that I was relying on this date provided by my helper function in a helper file outside of my components and this was why no error was logged to the console at runtime even though multiple components were not being rendered correctly.