Reactivesearch: Sites created with Reactivesearch have rendering issues on mobile

[siddharthlatest]

Issue Type:

Possible Bug

Description:

Sites created with Reactivesearch have rendering issues when testing with https://search.google.com/test/mobile-friendly. It shows a blank screen.

Screenshots:

Minimal reproduction of the problem with instructions:

Go to https://search.google.com/test/mobile-friendly.

Reactivesearch version: x.y.z

2.0.0

[divyanshu013]

IMO this could be an issue with transpilation. We're targeting only latest 2 versions of browsers. @metagrover anyway we can test this hypothesis?

UPDATE: On mobile, site renders as blank using Firefox focus but works fine on Chrome browser. It works fine on both using a different mobile phone.

Tried a different config on demo site. However it doesn't solves the issue. Commit ref

[Guazi]

Googlebot also has trouble crawling reactivesearch websites, when using Fetch as Google through the webmaster tools (same result using both Desktop and Mobile render):

[metagrover]

The issue is with the polyfill being absent. Google bot uses an older version of Chrome to render pages. Adding the following polyfill fixes the issue:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

[divyanshu013]

We should add polyfill in

• [ ] website
• [ ] demo apps

[Guazi]

I added to the bottom of my index.html for my demo site (www.thepricebot.net) and it still won't render when using the Mobile Friendly tool or the Fetch as Google tool. I cloned gitxplore-app and added it to index.html and still the same, won't render.

[siddharthlatest]

@metagrover can we verify if this works on a demo app?

[Guazi]

Looked into debugging this and came across this site:

https://blog.codaxy.com/debugging-googlebot-crawl-errors-for-javascript-applications-5d9134c06ee7

I added the code to my app and here's the stack trace:

Stack: TypeError: undefined is not a function at new betterWs at new AppbaseClient at new ReactiveBase at constructClassInstance at updateClassComponent at beginWork at performUnitofWork at workLoop at HTMLUnknownElement.calllCallback (+20 lines more)

[metagrover]

Thanks @Guazi, that was incredibly helpful. The problem was with the web-socket connection handshake, which I've fixed and tested with the booksearch app here:

:tada: FUN FACT: I'm not using any polyfill script here, works perfectly without it.

[divyanshu013]

Probably because of babel polyfill?

[metagrover]

Yes, and that's why we should not remove babel-polyfill from appbase-js

[metagrover]

Fixed in 2.2.0 🎉