Vue-storefront: iOS 9.3 js error blocks behavior

[lorenaramonda]

Current behavior

Content like images are not loaded and all the links/buttons in the navbar does not work: menu does not open, mini cart does not open, customer modal does not open, wishlist does not link page

only some products and categories in home blocks link to a page but then the page does not perfom filters (if category) or adding to cart (if product page)

I guess it's because a javascript error detected blocks everything that comes after

Expected behavior

Steps to reproduce the issue

simply go to home and look at the error in the console:

SyntaxError: Unexpected token ')' vendor.js:3025

but also

SyntaxError: Unexpected token ')' vendor.js:13

both are pointless indications anyway as safari has a very bad debugger 😕

Repository

demo.vuestorefront.io :)

Can you handle fixing this bug by yourself?

Don't know if I have time at the moment, but maybe it's something concerning babel or webpack compilation?

Enviroment details

• Browser: iPad Mini Safari
• OS: 9.3
• Node: cannot know

Additional information

[pkarw]

This is somewhat connected with babel. To be honest - pretty old iOS (current is 12). Can You try out the test.vuestreofront.io?

[lorenaramonda]

test acts the same way 😞 same error, I know it's old but there are still similar devices around

[pkarw]

The problem is that some npm modules are not "babelized" we need to test it on local (on this iOS - using remote debugger) and figure out which modules causes the problem then add them to babel include list

Can You do this test? on demo or test you can hardly figure it out because there are no source maps so we don't know where exactly lays the problem

[pkarw]

The solution has been described in: #1266 after some research by @mdanilowicz

[lorenaramonda]

other news about this, putting stage-3 into babel config (as suggested here https://github.com/DivanteLtd/vue-storefront/issues/1266#issuecomment-427395322) and including some repo into transpile such as vue-offline and localforage solve the problem of navigation for this device BUT the add to cart functionality isn't working yet because safari under 10 does not support Object.value()
to solve this we could use _.values in place

[pkarw]

@lorenaramonda Maybe You could prepare a PR? :-)?

[lorenaramonda]

https://www.youtube.com/watch?v=9-eDK_ipYbg 😄

[lorenaramonda]

I would like to fix this @pkarw but I see that in the .eslintrc.js your restrict the import of lodash
'no-restricted-imports': [2, { 'paths': ['lodash'] }],
which is instead needed to provide backward compatibility with old JS browsers.

Do you know why this restriction has been added?

Maybe there's another way to use lodash?

[lorenaramonda]

mmh maybe with this 🤔
import _ from 'lodash-es/lodash'

[pkarw]

This restrictioj should be there. You should import just the modules from lodash-Es that are required. For example lodash-es/merge etc

[pkarw]

Hi @lorenaramonda, how are You? :) And how is this issue? :)

[lorenaramonda]

Hi Piotr, I tried some fixes but while two changes worked well in old versions of VS, for this one more fixes must be done, probably something like replacing native js function with lodash to keep old iOS version compatibility and I wonder if you’re interesting in this :)

[pkarw]

For Sure we are maybe You just create a PR and we’ll discuas the changes one by one there?

[pkarw]

Please just use lodash-es at only Es version supports tree shaking

[lorenaramonda]

Yes, of course. Now I’m abroad on vacation and far away from computer but I will do that when back home next week 👌